Содержание

Как убрать точки которые появились? HTML CSS

Вопрос задан

Изменён 1 год 3 месяца назад

Просмотрен 379 раз

В футере страницы выводится информация о социальных сетях, при работе с кодом появились точки на картинках которые я не могу убрать. Как это можно исправить?

Пример вывода ниже:

.single-footer-widget p {
  margin-bottom: 0px;
  color: #777777;
  max-width: 235px;
}
.single-footer-widget ul li a {
  line-height: 25px;
  display: inline-block;
  color: #777;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  margin-bottom: 13px;
}
.single-footer-widget ul li a:hover {
  color: #6f6fff;
}
.single-footer-widget .instafeed {
  margin-left: -30px;
  margin-right: -30px;
}
.
 
 single-footer-widget .instafeed li {
  margin: 1px;
}
<div>
  <div>
    <h6>Instagram</h6>
    <ul>
      <li><img src="{% static 'img/instagram/Image-01.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-02.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-03.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-04.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-05.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-06.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-07.jpg' %}" alt=""></li>
      <li><img src="{% static 'img/instagram/Image-08.jpg' %}" alt=""></li>
    </ul>
  </div>
</div>
  • html
  • css
  • css3
  • html5

Для избежание повторения строки кода можете сделать так:

* { list-style: none; }

Или:

ol, ul { list-style: none; }

Добавить list-style: none; для элементов списка

. single-footer-widget p {
  margin-bottom: 0px;
  color: #777777;
  max-width: 235px;
}
.single-footer-widget ul li a {
  line-height: 25px;
  display: inline-block;
  color: #777;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  margin-bottom: 13px;
}
.single-footer-widget ul li a:hover {
  color: #6f6fff;
}
.single-footer-widget .instafeed {
  margin-left: -30px;
  margin-right: -30px;
}
.single-footer-widget .instafeed li {
  margin: 1px;
  list-style: none; // <-- добавить это
}
<div>
  <div>
    <h6>Instagram</h6>
    <ul>
      <li><img src="{% static 'img/instagram/Image-01.jpg' %}" alt="image1"></li>
      <li><img src="{% static 'img/instagram/Image-02.jpg' %}" alt="image2"></li>
      <li><img src="{% static 'img/instagram/Image-03.jpg' %}" alt="image3"></li>
      <li><img src="{% static 'img/instagram/Image-04.jpg' %}" alt="image4"></li>
      <li><img src="{% static 'img/instagram/Image-05.
 
 jpg' %}" alt="image5"></li>
      <li><img src="{% static 'img/instagram/Image-06.jpg' %}" alt="image6"></li>
      <li><img src="{% static 'img/instagram/Image-07.jpg' %}" alt="image7"></li>
      <li><img src="{% static 'img/instagram/Image-08.jpg' %}" alt="image8"></li>
    </ul>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как убрать маркеры в маркированном списке? — Вопрос от Юрий Белявцев

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16592)
  • Платные услуги (2145)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1438)
  • Редактор страниц (236)
  • Новости сайта (500)
  • Каталоги (809)
  • Блог (дневник) (113)
  • Объявления (295)
  • Фотоальбомы (434)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2459)

Управление сайтом

  • Работа с аккаунтом (5343)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1536)
  • Дизайн сайта (13485)
  • Безопасность сайта (1485)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (319)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (429)
  • Софт для вебмастера (39)

…

Как удалить маркеры из списка с помощью CSS?

html

7 месяцев назад

Аднан Шаббир

В HTML вы, вероятно, прошлись по упорядоченным и неупорядоченным спискам. Упорядоченный список обозначается числовым идентификатором, а неупорядоченные списки имеют маркеры. Иногда эти пули не подходят для ситуации. В таком случае пули необходимо удалить, чтобы сохранить поток и структуру.

Мы составили это руководство, чтобы предоставить набор методов, используемых для удаления пуль.

Как удалить маркеры из списка с помощью CSS?

CSS предлагает различные свойства для выполнения определенного действия. Свойство CSS list-style определяет тип стиля списков. Его значение может удалить маркеры из списка с помощью свойств CSS list-style или list-style-type . Это свойство удаляет маркеры из неупорядоченного списка. Следующий практический пример поможет лучше понять использование этого свойства CSS.

Код



   
       Первый документ
   
   
    Список овощей



  • Морковь

  • Cucumber

  • Картофель

  • Belf Pepper

  • Шпинат



Список фруктов




  • Оранжевый

  • Манго

    •                
  • Банан

    •                
  • Ананас

    •                  
  • Арбуз

    •              
 9002 30023    

В этом коде мы создали два неупорядоченных списка с помощью тега

    . Затем мы применили свойство в стиле списка CSS ко второму неупорядоченному списку и установили значение свойства равным none.

    Вывод

    Вывод ясно показывает, что маркеры удаляются только из второго ненумерованного списка.

    Примечание: Стиль списка является сокращенным свойством. Тип списка 9Свойство 0014 также можно использовать для удаления маркеров из списка.

    Как удалить цифры из нумерованных списков?

    С помощью свойства list-style-type можно удалить цифры (1, 2, 3) из упорядоченных списков.

    Давайте рассмотрим следующий практический пример удаления цифр из упорядоченного списка.

    Код:



       
           Первый документ


    Список овощей




    1. Морковь

    2. Cucumber



    Список овощей




    1. Морковь

    2. Cucumber

      3.            

           

       

    В этом коде мы создаем два упорядоченных списка, а затем удаляем числа из одного упорядоченного списка с помощью свойства list-style-type .

    Вывод

    Вывод показывает, что цифры успешно удалены из упорядоченного списка.

    Заключение

    Мы можем удалить маркеры из списков с помощью CSS « list-style » или « list-style-type ” свойство. Значение обоих свойств установлено равным none, чтобы удалить маркеры. Это свойство действует как для упорядоченных, так и для неупорядоченных списков. Вы узнали несколько способов удаления маркеров из списка. Практическая реализация этих примеров также демонстрируется здесь.

    Об авторе

    Аднан Шаббир

    Посмотреть все сообщения

    Группа списка · Bootstrap

    Группы списков — это гибкий и мощный компонент для отображения серии содержимого. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.

    Базовый пример

    Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.

    • Крас Хусто Одио
    • Dapibus ac facilisis в
    • Морби лео рисус
    • Porta ac consectetur ac
    • Вестибюль эроса
     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

Активные элементы

Добавьте .active к .list-group-item , чтобы указать текущий активный выбор.

  • Крас Хусто Одио
  • Dapibus ac facilisis в
  • Морби лео рисус
  • Porta ac consectetur ac
  • Вестибюль эроса
 <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Отключенные элементы

    Добавьте . disabled к .list-group-item , чтобы он отображался как отключенный. Обратите внимание, что некоторые элементы с .disabled также потребуют пользовательского JavaScript, чтобы полностью отключить события кликов (например, ссылки).

    • Крас Хусто Одио
    • Dapibus ac facilisis в
    • Морби лео рисус
    • Porta ac consectetur ac
    • Вестибюль эроса
     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Используйте s или

    Заподлицо

    Добавьте . list-group-flush , чтобы удалить некоторые границы и закругленные углы, чтобы отображать элементы группы списка от края до края в родительском контейнере (например, карточки).

     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Контекстные классы

    Используйте контекстные классы для оформления элементов списка с помощью фона и цвета с отслеживанием состояния.

     <ул>
  
  • Dapibus ac facilisis в
    • 
  
  • Это основной элемент группы списка. 
    • 
  
  • Это дополнительный элемент группы списка.
    • 
  
  • Это групповой элемент списка успеха.
    • 
  
  • Это элемент группы списка опасностей.
    • 
  
  • Это элемент группы списка предупреждений.
    • 
  
  • Это элемент группы информационного списка.
    • 
  
  • Это элемент группы облегченного списка.
    • 
  
  • Это групповой элемент черного списка.
    •

    Контекстные классы также работают с .list-group-item-action . Обратите внимание на добавление здесь стилей наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.

    Dapibus ac facilisis in Это основной элемент группы списка Это дополнительный элемент группы списка Это групповой элемент списка успеха Это групповой элемент списка опасностей Это элемент группы списка предупреждений Это элемент группы информационного списка Это элемент группы светового списка Это элемент группы темного списка

     <дел>
  Dapibus ac facilisis
  Это основной элемент группы списка
  Это дополнительный элемент группы списка
  Это элемент группы списка успеха
  Это элемент группы списка опасностей
  Это элемент группы списка предупреждений
  Это элемент группы информационного списка
  Это элемент группы облегченного списка
  Это элемент группы темного списка
    Передача значения вспомогательным технологиям

    Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

    С значками

    Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

    • Крас Хусто Одио 14
    • Dapibus ac facilis в 2
    • Морби Лео Рисус 1
     <ул>
  
  • 
    Крас Хусто Одио
    14
  
    • 
  
  • 
    Dapibus ac facilis в
    2
  
    • 
  
  • 
    Морби Лео Рисус
    1
  
    •

    Пользовательский контент

    Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже, с помощью утилит flexbox.

    Заголовок элемента списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta.

    Заголовок элемента списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta.

    Заголовок группы элементов списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. 
     <дел>
  <а href="#">
    <дел>
       
    Заголовок элемента группы списка
     
      3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. <а href="#"> <дел>
    Заголовок элемента группы списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. <а href="#"> <дел>
    Заголовок элемента группы списка
    3 дня назад