Для того, щоб зробити елементи списку красивими, часто використовують маленькі картинки.
Заливаємо наш художній маркер на сервер і запам'ятовуємо шлях. Нехай це буде images / pulka.jpg
Для формування нашої картинки замість дефолтного маркера в файлі стилів додамо властивість list-style-image:
Отримаємо такий вид списку замість стандартного:
В даному прикладі ми вказали стиль типу гурток list-style-type: circle; - це для тих користувачів, у яких браузер не показує зображення.
Зверніть увагу на розмір картинки пульки - він не повинен бути занадто великим, зазвичай 10-25 пікселів.
У деяких випадках графічне зображення додається через background.
Повний код ul li для вставки користувальницької картинки в якості маркера:
Властивості списків css:
border-top - лінія навколо рамки (товщина, колір, стиль - solid);
list-style-type - зовнішній вигляд. тип маркера.
Padding - відступи від вмісту зверху, знизу, праворуч, ліворуч.
Background - фон в списку.
Код для великого зображення в якості маркера списку. Як прибрати маркери css.
Для того, щоб в листі стилів css прибрати точки в списку, іспользуемlist-style: none ;.
У цьому прикладі в якості маркера використовується велика картинка, наприклад 50 на 50 пікселів. Принцип такий: видаляємо дефолтний маркер (list-style: none;), готуємо місце для великого зображення за допомогою завдання відступів, вставляємо свій маркер (background: url (maxpulka.png) no-repeat;).
Якщо вас зацікавили уроки css, то потренуйтеся з розширеним варіантом курсу від Євгена Попова.
Повний курс «Css практика»
Знання CSS необхідно кожному веб-майстру, бо це універсальний спосіб зробити якісний дизайн без перевантаження коду сторінки.
Для тих, хто хоче дуже швидко навчитися трюкам css стилів. рекомендую розширений курс "CSS практика" Євгенія Попова.
На цю тему ви можете прочитати наступні навчальні статті:
Відступ списку css.
Як поміняти css колір маркера списку, щоб його колір був відмінним від кольору тексту.
Вкладені списки. Як в css зробити горизонтальний список. Зміна стилю нумерованих списків.
Завантажити красиві маркери для списків сайту.