Блочная верстка | Урок 7

htmlВ блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нибудь php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом 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><l><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 23 45 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.

Добавить комментарий


Защитный код
Обновить

Комментарии

Реклама