Меню
Спросить
*.{ }

Урок 3. Пункты меню

26 октября 2016
Урок 3. Пункты меню

Всем привет! В этой статье изменим немного нашу навигацию страницы HTML, которую мы создали в курсе уроков html для начинающих и css для начинающих.

Поехали

Сначала изменим цвет на нашем логотипе. Для этого напишем такой код:

  1. /*изменение стиля ссылки в классе header*/
  2. .header a{
  3. color:white;
  4. }

Как убрать маркеры у списка

Или как убрать черные точки у списка?
Это делается довольно быстро и просто, одной строчкой. Для этого впишите такой код в свойства ul. В данном случае у нас он под классом "navigate":

  1. list-style:none; /*убираем маркеры в списке*/

Теперь сделаем так, чтобы при наведении на пункты меню, появлялась рамка вокруг. Если вы смотрите или читаете уроки css для начинающих, то вы уже наверняка знакомы с псевдоэлементом hover. Если мы просто пропишем, появление рамки, во время наведения, с помощью псевдоэлемента hover, то у нас меню будет "скакать", двигаться итд. Это связано с тем, что до того как мы на него наведем мышкой, у него еще нет рамки размером в 1px, к примеру, а как только мы наведем появляется рамкам, тем самым, заполняя дополнительное место по 1px со всех сторон. Чтобы этого избежать, нужно в стилях элемента заранее добавить рамку, но только в цвет фона или же в произвольный. Теперь код:

  1. /*вот так выглядели наши пункты во втором уроке*/
  2. .navigate li {
  3. padding:5px;
  4. margin:5px;
  5. }
  6. /*Заранее добавляем рамку в цвет фона*/
  7. .navigate li {
  8. border:1px solid lime;
  9. padding:5px;
  10. margin:5px;
  11. }
  12. /*Добавляем псевдоэлемент hover*/
  13. .navigate li:hover{
  14. border:1px dashed #B200FF;
  15. }

Теперь изменим стиль у ссылок:

  1. .navigate li a {
  2. color:white;
  3. text-decoration:none; /*убираем подчеркивание у ссылок*/
  4. }
  5. /*изменяем стиль у ссылок при наведение мыши*/
  6. .navigate li a:hover{
  7. color:#B200FF;
  8. }

Заключение

Вот так вот. Импровизируйте и не копируйте код, пробуйте писать самому.
До следующего урока =)

Следующая статьяПредыдущая статья