Уроки 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 #программирование #списки

Комментарии • 18

  • @wiseplat
    @wiseplat  4 года назад +3

    Ценю твой ЛАЙК и КОММЕНТ!
    Facebook: facebook.com/wiseplat/
    Личный Facebook: facebook.com/oleg.shpagin
    ВКонтакте: vk.com/wiseplat
    Личный ВКонтакте: vk.com/bazatut_ru
    Instagram: instagram.com/wiseplat/
    Мой личный Instagram: instagram.com/shpaginoleg/

  • @user-mv6qz8kc8x
    @user-mv6qz8kc8x 2 месяца назад

    Спасибо Олег очень доступный урок

  • @user-kr8uu9so1p
    @user-kr8uu9so1p Год назад +2

    Этот способ работает не во всех браузерах. Для списков правильнее использовать свойство background, которое позволяет выводить картинку как фоновый рисунок.

  • @HARE-333
    @HARE-333 4 года назад +3

    Четыре часа с этим мучился, уже запутался во всем)
    Спасибо большое, очень помогли!

    • @wiseplat
      @wiseplat  4 года назад +1

      Привет! Что за сайт делаешь?

    • @HARE-333
      @HARE-333 4 года назад

      Здравствуйте!) Все верное, прохожу курсы по HTML и CSS.

  • @serzhiignatov9720
    @serzhiignatov9720 Год назад +1

    Спасибо Вам! Как раз то, что искал

  • @user-zg6cf1hu3s
    @user-zg6cf1hu3s 2 года назад

    Громадное спасибо. Здорого вручили)

  • @Nurtulbukbek
    @Nurtulbukbek 8 месяцев назад

    Как же это было долго

  • @lumeaceaiuluisrl6343
    @lumeaceaiuluisrl6343 3 года назад

    Спасибо!

  • @androsikys
    @androsikys 2 года назад

    спасибо брат

  • @user-sandra05
    @user-sandra05 2 года назад

    Спасибо, все очень доступно и понятно! Отличное видео. Подскажите пожалуйста, а как можно сделать разные картинки, чтобы каждый пункт списка был с разной картинкой?

  • @Antonpianomusic
    @Antonpianomusic Год назад

    Доброго дня, всё бы и ничего, Хорошо, понятно. Но могу-ли я изменять размер картинки-иконки для списков по ширине и высоте? Какими свойствами или псевдо-классами? Не используя сторонние графические редакторы?

  • @vukavuka7519
    @vukavuka7519 4 года назад +1

    list-style-image вообще никак не устанавливает картинку. Просто все перепробовал. С чем это может быть связано?

    • @user-fx2jj2om3g
      @user-fx2jj2om3g 3 года назад

      Ты решил проблему? У меня тоже самое, мне кажется это связано с расположением картинки

    • @androsikys
      @androsikys 2 года назад +2

      эти волшебные две точки

  • @alexanderpadalka5708
    @alexanderpadalka5708 3 года назад

  • @user-qj7yx3nt7d
    @user-qj7yx3nt7d 2 года назад

    НОНЭЭЭЭЭЭЭЭЭ