Списки в HTML презентация

list
списки определений – definition list

одиночными пустыми строками.
Элементы списка маркируются с помощью чисел или букв.
Упорядоченный список начинается с тега

.
Каждый элемент списка начинается с тега
1. .
   Заголовок удобно задавать внутри списка (будет отспуп слева):
   
   
   Название списка
   
   1. элемент 1
   ...
   Атрибуты тега
   (deprecated HTML 4.01, но ЕСТЬ в HTML 5)
   start - начальное значение последовательности (порядковое число!!!!!), например:
   - нумерация с Е
   type - стиль нумерации элементов.
   "A" - заглавные буквы A, B, C ...
   "a" - строчные буквы a, b, c ...
   "I" - большие римские числа I, II, III ...
   "i" - маленькие римские числа i, ii, iii ...
   "1" - арабские числа 1, 2, 3 ... (по умолчанию),
   
   reversed="reversed" – нумерация обратном порядке – new в HTML (старые версии и IE- не поддерживают)
   
   
   
   1. элемент 1
   
   
   2. элемент 2
   
   
   3. элемент 3
   
   
   EXAMPLES\ex11_01.html
   

нумерации, символа
value - deprecated in HTML 4.01, IS in HTML5.
value - может использоваться только для элементов упорядоченного списка

- Если необходимо продолжить нумерацию внутри списка с какого-либо определенного порядкового номера.



1. …


2. …


3. …


4. …




EXAMPLES\ex11_02.html


1. …
2. …
30. …
31. …

списки, и т.д.
Элементы списка выводятся через один интервал и с переносом слов внутри символа нумерации.
Элементы списка могут содержать теги

или разделяться тегами
для увеличения межстрочного интервала между элементами.
При увеличении разрядности нумерация дополняется влево => риск выйти за границу страницы:

A. …
Z. …
AA. …
…
ZZ. …
AAA. …
…
ZZZ. …
AAAA. …

подчиненные списки смещаются относительно следующего охватывающего списка.
Все вложенные упорядоченные списки используют одну и ту же десятичную систему нумерации, начинающуюся с десятичной 1.

1. Элемент списка 1
2. Элемент списка 2
1. Элемент списка 2.1
2. Элемент списка 2.2
3. Элемент списка 3

когда упорядоченные списки содержатся внутри других упорядоченных списков, внутренние списки не отделяются пустыми строками, как это происходит, когда список появляется внутри обычного потока текста страницы.

специальных знаков.
Список выводится через один интервал и с отступом от левого края.
Неупорядоченный список начинается с тега

.
Каждый элемент списка начинается с тега
• .
  
  
  
  
  • элемент 1
  
  
  • элемент 2
  
  
  • элемент 3
  
  
  
  
  Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.
  

маркера
type = “disc | сircle | square”

… - тип маркера для всех элементов списка
когда списки содержатся внутри других списков, никакие пустые строки не окружают внутренние списки, как это происходит, когда одиночный список появляется в обычном потоке текста на странице.
можно задать любой тип маркера в произвольном месте (для любого элемента) списка.
можно смешивать разные типы маркеров в одном списке.

EXAMPLES\ex11_03.html

CSS:
list-style-type: disk | circle | square

2.1

элемент 2.2

элемент 3

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

• элемент 1


• элемент 2
  
  
  
  • элемент 2.1
  
  
  • элемент 2.2
    
    
    
    • элемент 2.2.1
    
    
    • элемент 2.2.2
    
    
    
    
  
  
  
  


• элемент 3

определений терминов.
отделен от окружающего текста пустыми строками.
Определяемый термин записывается без отступа слева на одной строке, а его определение — на следующей, с небольшим отступом вправо и использует при необходимости перенос слов.

Список определений помещается в контейнерный тег

...

.
Каждый термин списка определений помещается в контейнерный тег

...

.
Каждое определение списка помещается в тег

...

.
Внутри определения списка определений можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Тег

позволяет создавать отдельные абзацы с отступом без нумерации или маркеров.

Если на странице несколько тегов

, то текст постепенно сдвигается все больше вправо.

2

inside | outside
inside – если текст занимает несколько строк, то текст будет под меткой
outside – если текст занимает несколько строк, то текст на второй строке будет со сдвигом слева

list-style-type: disk | circle | square |decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none (по умолчанию)

list-style: type image position

list-style: square url(‘bullet.gif’) inside

EXAMPLES\ex11_04.html

{
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}

Horizontal List

• HTML


• CSS


• JavaScript


• PHP