СпискиВ этой главе пойдёт речь о списках, которые могут быть:
Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html. Ну что ж давайте пройдёмся по нашему списку. Неупорядоченные спискиНеупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, "пунктов", каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам "пункта". Для тега <li> закрывающий тег </li> необязателен. Вместе данные теги приобретают следующий вид: <ul><li> Пункт первый.. <li> Пункт второй.. <li> Пункт третий.. </ul> Пример неупорядоченного списка: <html>
<head> <title>неупорядоченный список</title> </head> <body> Купить и доставить домой: <ul> <li> 2 кг. клубней картофеля <li> 1 булку ржаного чёрного хлеба <li> пачку макарон "спагетти" (длинные не менее 200мм. тонкие) <li> 1 кг. шлифованного риса (сложно объяснить.. спросишь..) <li> 1 дес. куриных яиц. <li> 1 пачку 500г. Натрия двууглекислого (Сода) </ul> Смотри ничего не перепутай.. целую.. </body> </html> Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль. Может иметь одно и трёх значений:
Пример: <html>
<head> <title>стили неупорядоченного списка</title> </head> <body> В этом списке каждый элемент имеет свой стиль: <ul> <li type="disk"> кружок, диск (по умолчанию) <li type="circle"> полый круг <li type="square"> квадрат </ul> А здесь стиль задан всему списку <ul type="circle"> <li> Пункт 1 <li> Пункт 2 <li> Пункт 3 </ul> </body> </html> Упорядоченные спискиУпорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке элемент списка присуждается тегом <li>. Построение кода полностью схоже с неупорядоченным списком поэтому сразу пример: <html>
<head> <title>упорядоченный список</title> </head> <body> Купить товары в следующем порядке: <ol> <li> Водка <li> Пиво <li> Сырок (необязательно) </ol> Жду!!! </body> </html> А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
Вот пример их применения: <html>
<head> <title>Стили упорядоченного список</title> </head> <body> Арабские цифры <ol type="1"> <li>Во-первых <li>Во-вторых </ol> Строчные буквы <ol type="a"> <li>Во-первых <li>Во-вторых </ol> Заглавные буквы <ol type="A"> <li>Во-первых <li>Во-вторых <li>В-третьих </ol> Строчные римские цифры <ol type="i"> <li>Во-первых <li>Во-вторых <li>В-третьих <li>В-четвёртых </ol> Заглавные римские цифры <ol type="I"> <li>Во-первых <li>Во-вторых <li>В-третьих <li>В-четвёртых </ol> </body> </html> В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список. Пример: <html>
<head> <title>Начало упорядоченного списка</title> </head> <body> <ol type="1" start="24"> <li>Сразу переходим к двадцать четвёртому пункту!! <li>Идём дальше <li>И дальше </ol> Аналогично можно "стартовать" при любом стиле упорядоченного списка <ol type="I" start="8"> <li>Сразу переходим к восьмому пункту.. <li>Идём дальше <li>И дальше </ol> </body> </html> Списки определенийСо списком определений дело обстоит немного иначе нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом <dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>. Всё вместе пишется по следующей схеме: <dl><dt> <dd> </dl> Пример: <html>
<head> <title>Список определений</title> </head> <body> <dl> <dt> Слово коса может иметь следующие определения: <dd> сельскохозяйственный инструмент <dd> хитрая девичья причёска <dd> отмель реки <dt> Слово ключ тоже имеет несколько значений: <dd> гаечный <dd> источник, родник </dl> </body> </html> Собственно вот и вся премудрость.. Полезные советы:Психология посетителя страницы.
|
