Урок 8

В этой части мы фактически соберем в единое целое всю страничку. После этого этапа предстоит только завершить некоторые детали и все будет готово.

Необходимо открыть страничку и найти следующие строки:

<li><a href="#">Вася</a></li>
</ol>
</div>

Добавим несколько строк:

</div>
<div id="news">
<h3>Свежие новости:</h3>
<ul>
<li>Сначала….</li>
<li>Именно тогда….</li>
<li>Только сейчас….</li>
</ul>
</div>
<div class="clearfloat"></div>

Мы видим, что добавились новые моменты. В глаза бросается тэг </div>, который обозначает окончание области нового текста. После него мы видим маркированный список, в нем новости. Заголовок, о чем говорит h3, третьего уровня, а с самого низа добавлена clearfloat – «очистка обтекания». Это все означает, что верстка данной страницы является «плавающей». Такое название она имеет благодаря множеству блоков, которые обтекаются. Стоит заметить, что различные браузеры по разному относятся к этой строчке. Для того, чтобы не возникло некорректного воспроизведения блоков, ее, несомненно, стоит добавить.

Давайте снова откроем наш лист и добавим еще несколько строк:

#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.gif) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}

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

Кроме этого мы определили стиль маркеров для используемого списка. Любой браузер нарисует на месте маркеров кружки черного цвета. Но для придания странице лучшего вида кружки можно поменять на более приятные формы, даже на лично нарисованный маркер. Для этого нужно совсем немного, нарисовать красивый маркер, и указать на него ссылку в виде url(marker.gif). Следом стоит приписать inside, это делается для размещения маркера именно в колонке с текстом, потому что изначально маркеры не состоят в самом блоке.

Теперь стоит сохраниться и посмотреть результаты изменений.

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