Порядок дій по створенню горизонтального меню сайту передбачає знання властивостей css гуртківцями, які були розглянуті на попередніх заннятях, тому перелік дій потрібно замінити на назви властивостей css, щоб отримати такий результат як на малюнку.
Щоб створити меню, яке представлено на малюнку, потрібно виконати наступні дії:
1. Створити папку menu-horizontal
2. У папці проекту створити файл index.html, у якому записати наступний код:
3. Стилізувати блок меню у зовнішньому файлі style.css
Щоб створити меню, яке представлено на малюнку, потрібно виконати наступні дії:
1. Створити папку menu-horizontal
2. У папці проекту створити файл index.html, у якому записати наступний код:
3. Стилізувати блок меню у зовнішньому файлі style.css
- для блока menu-hor встановити ширину 100%;
- колір фону блоку #fc9d00;
-для шрифту у блоці використати сімейство шрифтів sans-serif, Arial;
меню буде мати такий вигляд:
Меню прийме такий вигляд:
5. Далі потрібно стилізувати посилання у елементах меню до та після відвідування
- встановити білий колір шрифту;
- прибрати підкреслення у посиланнях;
- зробити посилання блочними;
- встановити внутрішні відступи: 0px 13px;
- міжрядкові відступи: 35px:
- вирівнювання тексту: по центру;
- розмір шрифта: 13px;
Меню має виглядати так:
6. Стилізація елемента меню при наведенні курсору миші:
- встановити білий колір шрифту;
- прибрати підкреслення у посиланнях;
Результат має бути таким:
7. Стилізація зовнішнього відступу списку меню:
- лівий зовнішній відступ^ 13px;
- внутрішні відступи: 0px;
4. Для того щоб елементи меню розташувались горизонтально, потрібно змінити спосіб
відображення тегів <li> з вертикального на горизотальне, адже ці теги є блоками,
а їх потрібно зробити рядково-блочними :
відображення тегів <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;
Завдання для самостійного виконання
Самостійно створити меню згідно зразка:
Немає коментарів:
Дописати коментар