Page 219 - Сила CSS3 Освой новейший стандарт

Подгонка макета под большой экран • 219

Я указала, что все эти браузеры лишь частично поддерживают медиазапросы, так
как они не поддерживают все существующие характеристики медианосителей. Если
я начну перечислять подробности для каждого браузера, список получится слишком
длинным и, простите за тавтологию, подробным для данной книги. Тем не менее все
эти браузеры поддерживают большинство характеристик медианосителей, включая
те, которые вы с наибольшей вероятностью будете регулярно применять.

от горизонтальной полоСы навигаЦии к вертикальному меню
Хотя сейчас все на странице отображается на своих местах, некоторые элементы
не помешало бы немного подправить. Например, элементы li блока div nav-main
плавающие, и для выравнивания по горизонтали и равномерного распределения
мы добавили слева от этих элементов поля. Однако из-за этого элементы списка не
выстраиваются друг над другом по вертикали, по одному в каждой строке. Кроме
того, у них немного скруглены верхние углы — это хорошо смотрится в горизон-
тальном меню, но не тогда, когда элементы выстроены в столбик. Эти стили нам
больше не нужны, поэтому в медиазапросе мы переопределим их, добавив стили
для вертикального меню:
#nav-main li {
float: none;
margin: 0;
}
#nav-main a {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

Теперь каждая ссылка находится на отдельной строке, и ширина всех элементов
равна ширине столбца меню (рис. 6.4).
Двигаемся дальше. Давайте поработаем со стилями меню в целом и сделаем его
более похожим на поле для подписки на электронную рассылку, которое находится
у другого края страницы. У того поля полупрозрачный фон, немного скруглены
углы, и оно отбрасывает мягкую падающую тень:
#nav-main {
position: fixed;
top: 136px;
width: 13%;
margin: 0;
-moz-box-shadow: 0 0 8px hsla(0,0%,0%,.1);
-webkit-box-shadow: 0 0 8px hsla(0,0%,0%,.1);
box-shadow: 0 0 8px hsla(0,0%,0%,.1);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

www.trk.kg