Следом за <header> идет очередной структурный элемент, <nav>, предназначение которого — обеспечивать навигацию по веб-сайту. Ссылки, сгруппированные внутри этого элемента, представляют собой меню нашего сайта. Оно должно выглядеть как простая полоска под заголовком, так что получается, что почти все нужные стили уже связаны с данным элементом (как и с элементом <header>). <nav> относится к блочным элементам, следовательно, располагается прямо под предыдущим элементом, его ширина по умолчанию составляет 100 %, поэтому он будет на экране таким же широким, как родительский элемент (обертка <div>). Кроме того (и это тоже стиль по умолчанию), его высота будет равна высоте содержимого плюс поля. Таким образом, нам осталось только сделать его привлекательнее внешне. Для этого добавим серый фон и маленькие внутренние поля, отделяющие пункты меню от рамки.
Листинг 2.32. Добавление стилей для элемента <nav>
#main_menu {
Background: #CCCCCC; padding: 5px 15px;
}
#main_menu li {
Display: inline-block; list-style: none; padding: 5px;
Font: bold 14px verdana, sans-serif;
}
В листинге 2.32 первое правило ссылается на элемент <nav> по его атрибуту id. В этом правиле мы меняем цвет фона и с помощью свойства padding добавляем внутренние поля шириной 5 и 15 пикселов.
повторяем основы-
Свойство padding работает точно так же, как margin. Можно указать четыре значения: для верхнего, правого, нижнего и левого полей в указанном порядке. Если указано только одно значение, то оно присваивается полям со всех сторон элемента. Если вы задаете два значения, то первое связывается с верхним и нижним полями, а второе — с правым и левым.
Внутри навигационной полосы находится список, созданный на основе тегов <ul> и <li>. По умолчанию элементы списка располагаются в столбик, один под другим. Чтобы поменять это поведение и вывести пункты меню на одной строке бок о бок, мы ссылаемся на элементы <li> данного конкретного тега <nav> через селектор #main_menu li и связываем с ними стиль display: inline-block, превращая их в строчные блоки. В отличие от блочных элементов, элементы, для которых определяется стандартизованный в CSS3 параметр inline-block, не создают разрывов строк. Тем не менее их также можно обрабатывать как блоки и объявлять для них значение ширины. Если ширина не задается явно, то этот параметр устанавливает размер элементов равным размеру их содержимого.
Кроме того, мы убрали небольшие рисунки, которые по умолчанию выводятся перед каждым пунктом списка (маркеры списка), применив свойство list-style.
Добавить комментарий