Списки в HTML.


В процессе создания сайта, очень часто приходится писать какие-то тексты, выводить информацию в порядке поочередности, что-то перечислять и т.д. А процесс написания "меню" для сайта без списков почти не обходится.

Списки в HTML

Правда можно написать при помощи тега <P >, или таблицы и т.д., но при помощи тегов <UL> <LI> сделать "меню" для сайта наиболее эффективно. Такое меню легко поддается оформлению при помощи стилей CSS, не требует очень глубоких познаний в программировании, а главное - для начинающего верстальщика самый быстрый и практичный вариант.

Списки в HTML


Теги <UL> <LI> <OL>


И так, списки создаются при помощи тега <UL> или <OL> и закрывающего тега </UL>и соответственно </OL> ( закрывать - обязательно!). Каждый элемент списка должен начинаться с тега <LI> и заканчиваться тегом </LI> (обязательно!). Списки могут быть пронумерованы или не пронумерованы. Могут быть выделены каким-то символом, например кружком, точкой, буквой, неупорядоченными цифрами, или самодельным символом, зависимо от потребности и фантазии. Ниже представлены некоторые примеры синтаксиса и отображения в броузере, для написания списков, этих вариантов достаточно для простого применения.

Синтаксис тегов <UL> <LI> <OL>:

<UL> <LI>элемент списка</LI> </UL>, можно писать и малыми буквами - <ul> <li> элемент списка </li> </ul>, или <ol> <li> элемент списка </li> </ol>


Параметры тегов <UL> <LI> <OL>:

Параметр TYPE (type) - устанавливает вид маркера для определенного списка, или для всех списков данного сайта ( с применением стиля CSS).

Синтаксис тега TYPE (type):



Варианты маркеров для непронумерованных списков, их три "disc", "circle", "square".


пример c type="disc"

пример c type="circle"

пример c type="square"



Некоторые варианты маркеров для пронумерованных списков.


Стандартная нумерация

заданный отсчет "start=2011"

пример c "type=A"


В стилях CSS задавать маркер можно параметром style="list-style:тип маркера".


Оформление списков с помощью стилей.


style="list-style:lower-latin"

style="list-style:upper-alpha"

произвольный маркер


Примеры можно посмотреть здесь.

по материалам сайта kapon.com.ua

Поделитесь ссылкой на статью...


Всего комментариев - 0.    Можете оставить свой комментарий.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер