Реферат: Продвинутая CSS-верстка: шаг за шагом

}

...

#topBar form { # The search form

float:right;

width:10.5em;

text-align:right;

margin:0;

line-height:.7em; # - Crucial!

}

#topBar input {

font-size:.8em;

}

Добавляем текстовые ссылки

Поместим текстовые ссылки на полагающееся им место. Эти пять ссылок разделены буллитом и заключены в тэг <B>, поэтому именно этот тэг должен стать вторым потомком блока "topBar". В IE 5.0 для Windows мы обнаружили странный эффект, из-за которого ссылки выравнивались к правому краю. Решить эту проблему можно было либо заключив ссылки в слой с выравниванием налево, либо сделав <B> блочным элементом, указав для него необходимое выравнивание. Мы предпочли второй способ. Также мы указали стиль для шрифта и необходимую высоту строки, чтобы ссылки были выровнены по вертикали. Взгляните.

#topBar b { # Top nav bar text links (sitemap, experts...)

display:block;

text-align:left;

font:bold .8em/1.7em Arial,Geneva,sans-serif;

}

Добавляем содержимое и заголовок для "Совета дня"

На этом этапе мы заменим тестовые заголовки типа "Это заголовок 1" и "Это заголовок 2" на реальные заголовки сайта WebReference – "WebReference.com: DevtheWeb™" и "internet.com" соответственно. Еще мы добавим заголовок для блока "Совет дня", причем располагаться он будет в том же блоке, что и заголовок "WebReference.com: DevtheWeb™". Для этого нам понадобится новый слой, назовем его "tipTit", который будет первым потомком слоя "main". Укажем для него перемещение и выравнивание к правому краю, ширину, стиль шрифта и высоту строки для вертикального выравнивания. Ширину определим в 7em (такую же, как и у блока "tipDay"). Чтобы избежать проблем в IE, которые описаны выше, позиционирование его сделаем относительным. Взгляните.

#tipTit {

float:right;

width:7em;

text-align:right;

position:relative;

font:.8em/1.8em Arial,Geneva,sans-serif;

background:red;

}

.note {

color:red

К-во Просмотров: 733
Бесплатно скачать Реферат: Продвинутая CSS-верстка: шаг за шагом