Урок 7

Еще в текстовом блоке мы задали размещение списка для новых участников. По идее, за эту работу отвечает один из скриптов php, но, поскольку, мы делаем самую простую страничку, то можем оформить все это самым элементарным списком. Теперь используем не маркированный список, а другой – нумерованный. Для этого используем тэг ol. Откройте страничку в этом месте:

<img class="poloska" src="poloska.gif" alt="Бизнес" />
<img class="img2" src="img2.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>
</div>

Что нового появилось? Атрибут 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: #0066CC;
} #members li a:hover {
color: #0066CC;
}

Рассмотрим изменения. Сейчас мы задали блоку определенный размер. Мы задали значения, как ширины, так и высоты. Далее обозначено правило, которое касается заголовка второго уровня. С этим мы уже стыкались раньше. Все понятно. А для самого списка, определенного тэгом ol мы определили обтекание слева. Таким образом, оба наших списка будут располагаться один возле другого. Имена, которые находятся в списке, созданы в идее ссылок (ориентированы на профили участников). Мы определили для них только цвета, но и они подчеркиваются точечной линией – это следствие каскада. Список лежит в разделе, где действует атрибут text, поэтому с него берется и часть правил.

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9