Стилі CSS
Псевдоелемент: після
Цей псевдоелемент можна використовувати для вставки вмісту після елемента. У наступному прикладі зображення вставляється після кожного елемента
Псевдоелементи CSS
| : після | Додайте вміст після елемента |
| : Раніше | Додайте вміст перед елементом |
| : Перший лист | Додає стиль до першої літери тексту |
| : Перша лінія | Додає стиль до першого рядка тексту |
24. Панель навігації
Для веб-сайту дуже важливо мати просту у використанні навігаційну систему. За допомогою CSS ви можете перетворити нудні меню HTML у красиві навігаційні панелі. Панель навігації насправді є списком посилань. У цьому прикладі ми створимо панель навігації зі стандартного списку HTML.
Тепер ми вилучаємо маркери, поля та відступи зі списку:
- list-style-type: немає - видаляє маркери; вони не потрібні на панелі навігації
- властивості поля і прокладка мають значення 0, щоб видалити налаштування браузера за замовчуванням
Код у наступному прикладі - це стандартний код, який використовується для побудови вертикальних або горизонтальних смуг навігації.
Вертикальна панель навігації
Для побудови вертикальної панелі навігації нам потрібно стилізувати елементи:
- дисплей: блок - відображаючи посилання у вигляді блоків, цілою областю можна керувати за допомогою миші, не тільки текстом, але і шириною.
- ширина: 60 пікс - елементи блоку займають всю доступну ширину, тому вказана бажана ширина
Горизонтальна панель навігації
Ми можемо створити панель навігації двома способами, використовуючи елементи в лінію або плавати. Обидва методи хороші, але якщо ви хочете, щоб посилання мали однаковий розмір, вам потрібно використовувати такі елементи, як плавати.
Вбудовані елементи
Одним із способів побудови вертикальної навігаційної панелі є оголошення елементів зі списку посилань як елементів в лінію:
Пояснення:
- дисплей: вбудований - за замовчуванням елементи
- є блочними елементами. Розриви рядків до і після кожного елемента були видалені для відображення в одному рядку.
- якщо ви встановите відступ для елементів
- (а не для), посилання будуть переміщуватися за межі елемента. З цієї причини для елемента ul було вказано верхнє та нижнє заповнення.
предметів плавати
У попередньому прикладі посилання мають різну ширину. Так що всі посилання мають однакову ширину елементів повинен бути оголошений як плавати і ширина для елементів повинна бути вказана:
- поплавок: зліва - float використовується для переміщення елементів блоку поруч
- дисплей: блок - відображаючи посилання як елементи блоку, цілою областю (а не лише текстом) можна керувати за допомогою миші, і можна вказати ширину кожної області
- ширина: 60 пікс - оскільки елементи блоку займають всю доступну ширину, вони не можуть рухатися поруч. З цієї причини вказана бажана ширина посилань.
Приклади меню:
Приклад 1: Горизонтальне меню з трьома рівнями
Приклад 2: Горизонтальне меню з чотирма рівнями