Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML Неупорядоченный список



HTML тег <ul> определяет неупорядоченный (маркированный) список.

Неупорядоченный список

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

По умолчанию элементы списка будут помечены маркерами (маленькими черными кружочками):

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »


Неупорядоченный HTML список, выберите маркер элемента списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка. Он может иметь одно из следующих значений:

Значение Описание
disc Устанавливает маркер элемента списка в маркер (по умолчанию)
circle Устанавливает маркер элемента списка в виде круга
square Устанавливает маркер элемента списка в квадрат
none Элементы списка не будут помечены

Пример - Disc

<ul style="list-style-type:disc;">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример - Circle

<ul style="list-style-type:circle;">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример - Square

<ul style="list-style-type:square;">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример - None

<ul style="list-style-type:none;">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »


HTML Вложенные списки

Списки могут быть вложенными (список внутри списка):

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Примечание: Элемент списка (<li>) может содержать новый список, и другие HTML элементы, такие как изображения, ссылки и т. д.


Горизонтальный список с CSS

HTML списки можно стилизовать по-разному с помощью CSS.

Один из популярных способов, стилизовать список горизонтально, чтобы создать навигационное меню:

<!DOCTYPE html>
<html>
 <head>
  <style>
  ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
  }

  li {
   float: left;
  }

  li a {
   display: block;
   color: white;
   text-align: center;
   padding: 16px;
   text-decoration: none;
  }

  li a:hover {
   background-color: #111111;
  }
  </style>
 </head>
 <body>

  <ul>
   <li><a href="#home">Главная</a></li>
   <li><a href="#news">Новости</a></li>
   <li><a href="#contact">Контакты</a></li>
   <li><a href="#about">О Нас</a></li>
  </ul>

 </body>
</html>
Попробуйте сами »

Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.


Краткое содержание главы

  • Используйте HTML элемент <ul> для определения неупорядоченного списка
  • Используйте CSS свойство list-style-type для определения маркера элемента списка
  • Используйте HTML элемент <li> для определения элемента списка
  • Списки могут быть вложенными
  • Элементы списка могут содержать другие элементы HTML
  • Используйте свойство CSS float:left для отображение списка по горизонтали

HTML Теги списка

Теги Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dl> Определяет описание списка
<dt> Определяет термин в описание списка
<dd> Описывает термин в описание списка

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.