W3.CSS Списки
Основной список
Класс w3-ul используется для отображения основного списка:
- Jill
- Eve
- Adam
Список в рамке
Класс w3-border добавляет рамку (границу) вокруг списка:
- Jill
- Eve
- Adam
Заголовок списка
Пример того, как добавить элемент заголовка в элемент списка:
Имена
- 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
Цветной список
Классы w3-цвет могут быть использованы для добавления цвета в список:
- Jill
- Eve
- Adam
Цветной элемент списка
Классы 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">×</span>
</li>
Попробуйте сами »
Совет: HTML сущность × является предпочтительным значком для кнопок закрытия (вместо буквы "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>
Попробуйте сами »
Список аватаров
Пример
<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 бари и 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
Маленький (small) список
Используйте класс w3-small чтобы отобразить маленький (small) список:
- Jill
- Eve
- Adam
Большой (large) список
Используйте класс w3-large чтобы отобразить большой (large) список:
- Jill
- Eve
- Adam
Экстра большой (xlarge) список
Используйте класс w3-xlarge чтобы отобразить экстра большой (xlarge) список:
- Jill
- Eve
- Adam
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
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
