Списки W3.CSS
Основной список
Класс w3-ul используется для отображения основного списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Список с границами
Класс w3-border добавляет рамку вокруг списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Заголовок списка
Пример того, как добавить элемент заголовка внутри элемента списка:
Имена
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Список как карта
Классы w3-card- number можно использовать для отображения списка в виде карты:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Центрированный список
Класс w3-center можно использовать для центрирования элементов списка в списке:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Цветной список
Классы w3- color можно использовать для добавления цвета в список:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Элемент цветного списка
Классы w3- color можно использовать для добавления цвета к элементу списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Наводимый список
Класс w3-hoverable добавляет серый цвет фона к каждому элементу списка при наведении курсора мыши:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Если вам нужен определенный цвет при наведении, добавьте любой из классов w3- hover- color к каждому элементу <li>:
- Джилл
- канун
- Адам
Пример
<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>
Закрываемый элемент списка
Нажмите на «x», чтобы закрыть/скрыть элемент списка:
- Джилл
- Адам
- канун
Пример
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Совет: HTML × сущность является предпочтительным значком для кнопок закрытия (а не буквой «X»).
Список с отступами
Классы w3-padding можно использовать для добавления отступов к элементам списка:
- Джилл
- канун
- Адам
- Джилл
- канун
- Адам
Пример
<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>
Список аватаров
Пример
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</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 Bars и W3.CSS Navigation .
Ширина списка
По умолчанию списки имеют ширину 100%. Используйте свойство ширины, чтобы изменить это.
Пример
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% ширина:
- Джилл
- Адам
50% ширины:
- Джилл
- Адам
80% ширины:
- Джилл
- Адам
Крошечный список
Используйте класс w3-tiny для отображения крошечного списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Маленький список
Используйте класс w3-small для отображения небольшого списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Большой список
Используйте класс w3-large для отображения большого списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Большой список
Используйте класс w3-xlarge для отображения очень большого списка:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXLarge список
Используйте класс w3-xxlarge для отображения списка XXLarge:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXБольшой список
Используйте класс w3-xxxlarge для отображения списка XXXLarge:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Большой список
Используйте класс w3-jumbo , чтобы отобразить огромный «большой» список:
- Джилл
- канун
- Адам
Пример
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>