Списки. Создание меню при помощи структуры списков (<ul>, <li>)

Слайд 2

ПЛАН

 Создание меню при помощи структуры списков (

    ,
  • ).
    Создание вложенных списков.
    Форматирование списков при

ПЛАН Создание меню при помощи структуры списков ( , ). Создание вложенных
помощи CSS.
Списки определений: элементы
,
,
.

Слайд 3

Создание меню при помощи структуры списков (

    ,
      ,
    1. ),

       МАРКИРОВАННЫЙ

       НУМЕРОВАННЫЙ

Создание меню при помощи структуры списков ( , , ), МАРКИРОВАННЫЙ НУМЕРОВАННЫЙ

Слайд 4

 

СВОЙСТВА ДЛЯ НУМЕРОВАННОГО СПИСКА

СВОЙСТВА ДЛЯ НУМЕРОВАННОГО СПИСКА

Слайд 5

Список определений

,
,

 

Список определений , ,

Слайд 6

Вложенный список

Свойства

    :

Вложенный список Свойства :

Слайд 7

Многоуровневый нумерованный список


  1. пункт

  2. пункт

    1. пункт

    2. пункт

Многоуровневый нумерованный список пункт пункт пункт пункт пункт пункт пункт пункт пункт пункт пункт
  • пункт

    1. пункт

    2. пункт

    3. пункт



  • пункт



  • пункт

  • пункт


  • Слайд 8

    Стили CSS для многоуровневого списка

    ol { counter-reset: li; /*Идентифицируем счетчик и даем ему

    Стили CSS для многоуровневого списка ol { counter-reset: li; /*Идентифицируем счетчик и
    имя (знач. -0)*/
      list-style: none; /*убираем стандартную нумерацию*/}
    li:before {
     counter-increment: li; /* Псевдоэлемент before указывает, что содержимое будет располагаться до пунктов списка.   
      content: counters(li,".") ". "; /*content выводится номер пункта. counters() = значению всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка*/}

    Слайд 9

    ПРИМЕР:

    ПРИМЕР:

    Слайд 10

    СТИЛИ СПИСКА

    list-style-type

    СТИЛИ СПИСКА list-style-type

    Слайд 11

    list-style-image:url()

    list-style-image:url()

    Слайд 13

    Практика

    Практика

    Слайд 14

    Практика

    Практика