Уроки HTML, CSS Как в списках убрать точки и поставить картинку
HTML-код
- Опубликовано: 25 авг 2024
- Привет друзья! Сегодня у нас с вами будет урок про маркеры. Маркеры, которые используются в списках - это обычные точки, либо квадратики и их можно заменить, например, на какую-нибудь классную картинку. Например, на галочку, либо на звездочку или на огонек - и все это можно сделать легко и просто. 😊
Для этого можно через стили определить свойства списка и задать отображать маркер или нет. Так же можно назначить картинку вместо стандартного маркера, что придаст живость тексту и будет подходить под дизайн. Вот пример стиля: style="list-style-type: none;list-style-image: url(primary-ok-40.png);font-size: 3em;"
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #программирование #списки
Ценю твой ЛАЙК и КОММЕНТ!
Facebook: facebook.com/wiseplat/
Личный Facebook: facebook.com/oleg.shpagin
ВКонтакте: vk.com/wiseplat
Личный ВКонтакте: vk.com/bazatut_ru
Instagram: instagram.com/wiseplat/
Мой личный Instagram: instagram.com/shpaginoleg/
Спасибо Олег очень доступный урок
Этот способ работает не во всех браузерах. Для списков правильнее использовать свойство background, которое позволяет выводить картинку как фоновый рисунок.
Четыре часа с этим мучился, уже запутался во всем)
Спасибо большое, очень помогли!
Привет! Что за сайт делаешь?
Здравствуйте!) Все верное, прохожу курсы по HTML и CSS.
Спасибо Вам! Как раз то, что искал
Громадное спасибо. Здорого вручили)
Как же это было долго
Спасибо!
спасибо брат
Спасибо, все очень доступно и понятно! Отличное видео. Подскажите пожалуйста, а как можно сделать разные картинки, чтобы каждый пункт списка был с разной картинкой?
Доброго дня, всё бы и ничего, Хорошо, понятно. Но могу-ли я изменять размер картинки-иконки для списков по ширине и высоте? Какими свойствами или псевдо-классами? Не используя сторонние графические редакторы?
list-style-image вообще никак не устанавливает картинку. Просто все перепробовал. С чем это может быть связано?
Ты решил проблему? У меня тоже самое, мне кажется это связано с расположением картинки
эти волшебные две точки
™
НОНЭЭЭЭЭЭЭЭЭ