ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
W3CSS. Уроки для начинающих

W3.CSS Списки


  • × Списки в W3.CSS
    Mike
    Web Designer
  • × Списки в W3.CSS
    Jill
    Support
  • × Списки в W3.CSS
    Jane
    Accountant

Основной список

Класс w3-ul используется для отображения основного списка:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Список в рамке

Класс w3-border добавляет рамку (границу) вокруг списка:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Заголовок списка

Пример того, как добавить элемент заголовка в элемент списка:

  • Имена

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-border">
  <li><h2>Имена</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Список как карточка

Классы w3-card-число могут быть использованы для отображения списка в виде карточки:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Центрированный список

Класс w3-center можно использовать для центрирования элементов списка в списке:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Цветной список

Классы w3-цвет могут быть использованы для добавления цвета в список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Цветной элемент списка

Классы w3-цвет могут быть использованы для добавления цвета к элементу списка:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Список при наведении

Класс w3-hoverable добавляет серый цвет фона к каждому элементу списка при наведении курсора:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Если вам нужен определенный цвет при наведении, добавьте любой из классов w3-hover-цвет к каждому єлементу <li>:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>
Попробуйте сами »

Закрываемый элемент списка

Нажмите на «х», чтобы закрыть/скрыть элемент списка:

  • Jill ×
  • Adam ×
  • Eve ×

Пример

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>
Попробуйте сами »

Совет: HTML сущность &times; является предпочтительным значком для кнопок закрытия (вместо буквы "X").


Список с отступом (padding)

Классы w3-padding могут использоваться для добавления отступов к элементам списка:

  • Jill
  • Eve
  • Adam
  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>
Попробуйте сами »

Список аватаров

  • × Списки в W3.CSS
    Mike
    Web Designer
  • × Списки в W3.CSS
    Jill
    Support
  • × Списки в W3.CSS
    Jane
    Accountant

Пример

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>
Попробуйте сами »

Совет: Вы узнаете больше о классах w3-bar в разделах W3.CSS бари и W3.CSS Навигация на нашем сайте W3Schools на русском.


Ширина списка

Списки имеют ширину 100% по умолчанию. Используйте свойство width, чтобы изменить это.

Пример

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

30% ширина:

  • Jill
  • Adam

50% ширина:

  • Jill
  • Adam

80% ширина:

  • Jill
  • Adam

Крошечный (tiny) список

Используйте класс w3-tiny чтобы отобразить крошечный (tiny) список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Маленький (small) список

Используйте класс w3-small чтобы отобразить маленький (small) список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Большой (large) список

Используйте класс w3-large чтобы отобразить большой (large) список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Экстра большой (xlarge) список

Используйте класс w3-xlarge чтобы отобразить экстра большой (xlarge) список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

XXLarge список

Используйте класс w3-xxlarge чтобы отобразить XXLarge список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

XXXLarge список

Используйте класс w3-xxxlarge чтобы отобразить XXXLarge список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »

Гигантский (jumbo) список

Используйте класс w3-jumbo чтобы отобразить огромный "jumbo" список:

  • Jill
  • Eve
  • Adam

Пример

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Попробуйте сами »