CSS для створення списків лову очей

• Квітня 28, 2024

Списки - чудовий елемент веб-дизайну, оскільки вони дозволяють легко читати кінцевим користувачем. Більшість користувачів хочуть відповіді швидко, і вони спочатку лише скатують веб-сайт, щоб побачити, чи відповідає він на їх питання. Це особливо актуально, якщо вони заходять на ваш веб-сайт через пошукову систему.

Використання тегів та списків заголовків - це чудовий спосіб дозволити людям легко бачити основний вміст вашого веб-сайту. Якщо вони вважають, що списки та підзаголовки цікаві, є більша ймовірність, що вони залишаться на вашому веб-сайті. Це, звичайно, призводить до зниження показників "відмов" і допомагає покращити надійність вашого веб-сайту та рейтингові позиції в двигунах. Все, що покращує читабельність, полегшує очі очі, завжди допоможе веб-сайту. Чудовий дизайн завжди має на увазі читабельність.

CSS - це простий і дуже ефективний спосіб створення стильних списків за допомогою спеціальних куль (маркерів). Ви можете включати різні форми або просту користувацьку графіку, яка вписується в логотип, кольори або тематику вашого веб-сайту. Наприклад, на веб-сайті для привидів екскурсії я створив невелику піктограму привидів, яка використовувалася в бічній панелі навігації та на невпорядкованих елементах списку на головній сторінці. Це було просто, але дуже мило і прив’язано до теми сайтів, завдяки чому ці елементи сторінки виділялися.

В іншому випадку кулі можуть відволікати важливий вміст у списку. У цьому випадку властивість стилю списку "none" може бути використана для видалення автоматично створених маркерів.

Список властивостей стилю

За допомогою властивості типу списку виберіть тип маркера, який відображається з кожним елементом списку. Доступні значення - диск, коло, квадрат, десятковий, нижній римський, верхній римський, нижньогрецький, нижній латинський, верхній латинський, нижній альфа, верхній альфа та жоден.

Щоб вказати власне зображення як маркер, використовуйте властивість зображення-стилю списку таким чином:

ul {list-style-image: url (imagename.jpg);
список-стиль-положення: зовні;
}

URL-адреса відповідає таблиці стилів і повинна вказувати на папку, де знаходиться ваше зображення. У цьому випадку зображення буде в тій же папці, що і файл css та html. Якщо ви розмістите свої зображення в окремій папці, ви також включите: url (images / imagename.jpg)

Позиції маркера

Ви також можете налаштувати положення маркерів. У наведеному вище прикладі зовнішня властивість змушує кулю відображатися поза зоною вмісту.
list-style-position: всередині дозволяє кулі всередині області вмісту, щоб вона потрапляла у вміст списку.

Техніка скорочення

Ще один швидкий спосіб форматування списку за допомогою CSS - це метод скорочень. За допомогою цього методу всі властивості списку задаються в одному властивості:

вул
{
список списку: URL-адреса кола ("image.gif");
}

у методі скорочення всі значення повинні відображатися у визначеному порядку таким чином:

список-стиль-тип
список-стиль-позиція (всередині, зовні)
список-стиль-образ

Не має значення, якщо ви пропускаєте значення, якщо інші залишаються у правильному порядку.

Спеціальні списки дуже корисні, і CSS дозволяє легко їх досягти. Прості деталі перетворюють середні веб-сайти в найефективніші веб-сайти.

Відео Інструкція: Week 7 (Квітня 2024).