Урок 13. Как создать список на HTML странице.
Автор: Андрей Краснокутский
Дата: 2009-03-30 Сегодня мы продолжаем совершенствовать свое мастерство по созданию сайтов. Очень часто при создании web-страниц возникает необходимость разместить какой-то список, например Вам хочется перечислить технические характеристики автомобиля. Или у Вас есть свой интернет-магазин и Вам нужно разместить перечень товаров. Как это сделать?
Можно просто с каждой новой строчки написать:
1. Товар № 1 (описание товара).
2. Товар № 2 (описание товара).
и дальше в таком же духе. Но это подход дилетанский, хотя и будет выглядить как перечисление Ваших товаров.
В HTML для создание списка (перечня товаров) используются специальные теги разметки. Списки делятся на Нумерованные и Ненумерованные.
Нумерованные списки создаются с помощью парных тегов <ol> </ol>. Элементы списки задаются с помощью тегов <li> </li>. Кроме того с помощью атрибута type="1" можно задать вид нумерации списка, именно:
-
type="1" - нумерация элементов списка арабскими цифрами;
-
type="I" - нумерация элементов списка большими римскими цифрами;
-
type="i" - нумерация элементов списка маленькими римскими цифрами;
-
type="А" - нумерация элементов списка большими английскими буквами;
-
type="а"- нумерация элементов списка маленькими английскими буквами;
Можно задать нумерацию списка например с цифры 5, для этого в теге <ol> прописываем атрибут start="5"вот таким образом <ol start="5"> и список будет начинаться с цифры 5.
Или же продолжить нумерацию с цифры например 11, например Вы вставили после 10 позиции в списке подробное описание товара или рекламу, для этого прописываем в атрибуте <li> зачение value="11", таким образом <li value="11"> и дальше нумерация продолжится с цифры 11.
Полный листинг кода задающего нумерацию списка например большими английскими буквами выглядит так:
Листинг 13.1.
<ol type="A">
<li>Товары для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ol>
| |
А вот так Ваш список будет выгдядить на web-странице:

Рисунок 13.1
Ненумерованные списки создаются с помощью парных тегов <ul> </ul>. Элементы списки задаются с помощью тегов <li> </li>. Вместо цифр или букв (как в нумерованных списках) с помощью атрибута type=" " можно задать вид значка перед элементом списка, именно:
-
type="square" - перед элементом списка стоит квадратик;
-
type="disk" - перед элементом списка черный кружочек - это значение можно не прописывать оно присваивается по умолчанию;
-
type="circle" - перед элементом списка прозрачный кружочек;
Полный листинг кода задающего нумерацию списка например с прозрачными кружками перед элементами списка выглядит так:
Листинг 13.2.
<ul type="circle">
<li>Товара для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ul>
| |
А вот так Ваш список будет выгдядить на web-странице:

Рисунок 13.2
Пробуйте и экспериментируйте и Вы без труда сможете создать свой сайт.
Просмотров: 16334
При использовании приведенного кода ненумерованного списка, список получается смещенным в центр, в то время как кружки находятся слева. А как сместить тексты строк влево к кружкам? Куда и как следует вставить left
|