Продолжаем изучать основы блочной верстки сайта. Сегодня познакомимся с оформлением списков. Напомню, что существует два вида списков: маркированный и нумерованный. Первый помечается точками, квадратиками и пр., а второй, соответственно, порядковыми номерами.

Списки на сайте служат для упорядочивания информации и наглядного ее представления в удобном для читателя виде. Типичным примером списка может служить оглавление в книге, или содержание реферата, план сочинения, перечень деталей, или пошаговый кулинарный рецепт и т.д.

В верстке сайтов наиболее часто используются маркированные и нумерованные списки.

В блоке текста мы разместим список новых участников. Оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol.

Поехали!

Оформление списков в верстке веб-сайта

Откроем в текстовом редакторе нашу страничку и сразу после вот этого места:

……………..
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />

вставим следующий кусок:

<div id="members">
<h2>Список новых учаснегов:</h2>
<ol>
<li><a href="#">Рыжий</a></li>
<li><a href="#">Брат Корнелий</a></li>
<li><a href="#">Муха</a></li>
<li><a href="#">Пигфлай</a></li>
<li><a href="#">Нигга Боб</a></li>
<li><a href="#">Помидорка</a></li>
</ol>
<ol>
<li><a href="#">Косолапыч</a></li>
<li><a href="#">Тушка</a></li>
<li><a href="#">Свин Полезный</a></li>
<li><a href="#">Сало</a></li>
<li><a href="#">Кнопка</a></li>
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />

Что мы тут видим? Появился новый атрибут members. Так мы обозвали наш список. Тэг h2 — это заголовок второго уровня. Первый уровень, как легко догадаться, это чаще всего название сайта или страницы.

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

Можно было бы, конечно, занести всех в один общий список, сделать ширину одной ячейки ровно вполовину отведённого под список места, и тогда ячейки автоматом переносились бы на новую строчку. Но тогда нумерация выглядела бы так:

1 2
3 4
5 6

и так далее. Нам это не совсем подходит. Поэтому не будем мудрить, а сделаем просто два списка подряд. Но! Каждому из них в листе стилей зададим обтекание слева. Об этом чуть позднее. Сразу после списков мы положим картинку волнистой линии.

Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил.

#members {
width: 300px;
height: 190px;
float: right;
}
#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 304px;
height: 13px;
float: right;
}

Расшифруем. Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно?

Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии «поджимала» бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева.

Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно — список должен быть правее указанного рисунка.

Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо.

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

Все имена в списке оформлены в виде ссылок (типа на странички профилей участников). Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией!

Вот тут как раз и сработал так называемый «каскад» — список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил.

Последнее правило здесь для рисунка линии. Оно также, как и предыдущие картинки, оформлено классом. Сохранились. А теперь смотрим, что получилось.

Отлично! В следующий раз прицепим к нашему сайту блок новостей и симпатишный подвальчик — он же footer. Оставайтесь на связи!

Enjoy!

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

Автор: Игорь Квентор
www.websovet.com