Использование селекторов: 12.Cтили для навигации

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;
      }

 

Последние комментарии

  • Чем отличаются margin-top от margin-bottom?
  • 5
  • Отличный сайт! :D