селекторы в действии - шаг-12-стили для навигации
Оригинал: Step 12 - styling the <a> element
Display: block
Так как мы хотим, чтоб каждый пункт навигационного меню был в виде кнопки, то в первую очередь на нужно заставить его вести себя
как блочный элемент. В следующем блоке кода мы это и сделаем прописав стили для всех ссылок которые находятся в контейнере
с идентификатором #navigation и являются элементами списка, а также установим ширину, высоту для будующих кнопок и внутренние отступы.
#navigation ul li a {
display:block;
width:135px;
padding:3px 5px 3px 10px;
}
Оформление текста
Цвет ссылок в навигационном меню мы установим черный, а также уберем подчеркивание у ссылок.
#navigation ul li a {
display:block;
width:135px;
padding:3px 5px 3px 10px;
text-decoration:none;
color:#000;
}
Фоновое изображение
Теперь укажем фоновое изображения для элементов навигационного меню. И установим правило, которое будет заставлять изображение дублироватся по высоте.
#navigation ul li a {
display:block;
width:135px;
padding:3px 5px 3px 10px;
text-decoration:none;
color:#000;
background-image:url('/nav_base.jpg');
background-repeat:repeat-y;
}
Просмотреть шаг 12
Перейти к шагу #13
Добавить комментарий
