Свій власний вид списку

Доброго вам дня. 🙂

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

Саме про такі списки ми й поговоримо. Хоча, можливо, хтось із Вас застосує це до списків для створення меню або просто виведення чогось. Стандартні списки можуть бути різними. Основні їх полягають у тегиol іul.

OL – виводить нумерований список. Перед кожним новим елементом буде цифра порядку.

UL - виводить список із різними маркерами. Це можуть бути точки, квадрати, літери цифри або зображення.

Хочу показати як можна внести зміни до маркування списків і зробити його унікальним. Покажу кілька прикладів, використовуючи які Ви зможете зробити незвичайні списки своїми руками. Нижче на прикладі можете подивитися що до чого.

Як зробити, щоб після кожного номера йшла кругла дужка

Перший список у прикладі – це додавання дужки після числа. Стандартними методами це зробити. Для здійснення задуманого нам знадобиться використання псевдоелемента -:before.

Для початку потрібно зробити сам список і присвоїти йому клас, щоб він був унікальним за своїм виглядом. ВикористовуватимемоOl, тому що він спочатку використовує числовий маркер списку.

Списку було надано клас -one. тепер додамо стилів та отримаємо потрібний результат.

За потребою. замість дужки можна поставити інший знак, якщо це, звичайно, потрібно.

Як зробити маркер у вигляді слова

Цей спосіб виведе замість маркераслова. Наприклад: Крок 1, Крок, 2 тощо. Глава 1, Глава 2, тощо. По суті все, що Ви захочете, перед числовим маркером. Для цього знову визначаємося зі списком і задаємо йому клас.

Тут ми використали ul список. Далі додаємо стилі і в параметрах псевдоелемента:before перед числом ставимо слово - у нас це "Крок", а після крапка "."

Як зробити будь-який символ у вигляді маркера

Ідея способу у тому, щоб замінити всі стандартні маркери на будь-який символ. У нашому випадку це подвійний пунктир. Просто вказуємо потрібний символ уcontent:.

Ну і самі стилі:

Як укласти нумерований маркер у потрібні символи

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

Ось такі марковані списки можна отримати, використовуючи мінімальні доробки в стилях. Тепер можна під час написання статті для свого сайту використовувати незвичайні списки.

На цьому все, дякую за увагу. 🙂