Реферат: Раздвижные двери CSS

<li><a href="#">Products</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

На практике блок #header мог бы содержать например, еще логотип и форму для поиска. В нашем примере мы сократим значение href для каждой ссылки до “#”. Понятно, что в реальной жизни вместо этого значка будет указан путь к файлу или папке.

Начнем работу с CSS с присвоения свойства float контейнеру #header. Это дает гарантию того, что контейнер в действительности «вмещает» элементы списка, которые тоже будут плавающими. Так как мы сделали #header плавающим, нам нужно присвоить ему ширину в 100%. Мы также добавим временный желтый фон, чтобы убедиться, что этот родительский элемент растягивается на всю ширину позади закладок. Ну и наконец зададим несколько основных шрифтовых свойств, чтобы обеспечить единство внешнего вида элементов:

#header {

float:left;

width:100%;

background:yellow;

font-size:93%;

line-height:normal;

}

Мы также зададим нулевое значение для полей и отступов элементов ul и li и уберем маркер списка. Для всех элементов списка напишем объявление float:left:

#headerul {

margin:0;

padding:0;

list-style:none;

}

#header li {

float:left;

margin:0;

padding:0;

}

Для ссылок мы зададим блоковое отображение с тем, чтобы контролировать происходящее, не беспокоясь о строчной модели:

#headera {

display:block;

}