Створення і стилізація горизонтального меню сайту

Порядок дій по створенню горизонтального меню сайту передбачає знання властивостей css гуртківцями, які були розглянуті на попередніх заннятях, тому перелік дій потрібно замінити на назви властивостей css, щоб отримати  такий результат як на малюнку.

Щоб створити меню, яке представлено на малюнку, потрібно виконати наступні дії:

1. Створити папку menu-horizontal
2. У папці проекту створити  файл index.html, у якому записати наступний код:

3. Стилізувати блок  меню у  зовнішньому файлі style.css

- для блока menu-hor встановити  ширину 100%;

- колір  фону блоку  #fc9d00;

-для шрифту у блоці використати сімейство шрифтів sans-serif, Arial;

меню буде мати такий вигляд:

4. Для того щоб елементи меню розташувались горизонтально, потрібно змінити спосіб
відображення тегів <li> з вертикального на горизотальне, адже ці теги є блоками,
а їх потрібно зробити рядково-блочними :

#menu-hor li {display: inline-block;}

Меню прийме такий вигляд:

5. Далі потрібно стилізувати посилання у елементах меню до та після відвідування

#menu-hor a:link, #menu-hor a:visited

- встановити білий колір шрифту;
- прибрати підкреслення у посиланнях;
- зробити посилання блочними;
- встановити внутрішні відступи: 0px 13px;
- міжрядкові відступи: 35px:
- вирівнювання тексту: по центру;
- розмір шрифта: 13px;
Меню має виглядати так:

6. Стилізація елемента меню при наведенні курсору миші:

#menu-hor a:hover 

- встановити білий колір шрифту;
- прибрати підкреслення у посиланнях;

- колір фону #e93301;

Результат має бути таким:

7. Стилізація зовнішнього відступу списку меню:

#menu-hor ul

- лівий зовнішній відступ^ 13px;
- внутрішні відступи: 0px;

Завдання для самостійного виконання

Самостійно створити меню згідно зразка:

Тест на знання властивостей тексту в css