ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

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 Навигация на нашем сайте.


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

Списки имеют ширину 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>
Попробуйте сами »