По просьбе подписчика расскажу сегодня, как сделать маркеры списка <ul> разнообразными. Поехали!
Есть несколько способов поменять вид обычного значка. Во-первых можно изменить его форму. Для этого у тэга <ul> есть атрибут type. Его значения - disc, circle и rect. По умолчанию ставится значение disc. Circle представляет собой незакрашенные кружки, а rect - квадрат.
Другой способ стилизации - поменять цвет текста и маркеров. Это можно сделать следующим образом: <style> ul { color: цвет, который вам нравится } </style>. Можете придумать разные классы и сделать некоторые пункты одним цветом, а другие - другим.
Можно быть еще изобретательнее и сделать вместо кружочка/квадратика картинку. Для этого используйте следующую конструкцию:
<style>
ul {
list-style-image: url(images/book.png);
}
</style>
Вместо того, что в скобках, указывайте путь к вашей картинке. Как правильно указать путь, можете почитать здесь.
Выбирайте в качестве картинки небольшую наглядную иконку, чтобы она отображала суть списка.