Отображение списка
- ×
Майк
Веб-дизайнер - ×
Джил
Поддержка - ×
Джейн
Бухгалтер
Базовый список
- Джил
- Ева
- Адам
Выложенные Список
- Джил
- Ева
- Адам
Список заголовков
имен
- Джил
- Ева
- Адам
пример
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Попробуй сам " Список как открытку
- Джил
- Ева
- Адам
Сосредоточенный Список
- Джил
- Ева
- Адам
Цветные Список
- Джил
- Ева
- Адам
Цветные Список экземпляров
- Джил
- Ева
- Адам
пример
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Попробуй сам " Hoverable список
W3-hoverable класс добавляет серый цвет фона для каждого элемента списка курсора мыши над:
- Джил
- Ева
- Адам
Если вы хотите определенный цвет парения, добавить любой из W3-классов при наведении к каждому элементу <li>:
- Джил
- Ева
- Адам
Перекрываемый список
Нажмите на букву "х", чтобы закрыть / скрыть элемент списка:
- Джилл х
- Адам х
- Ева х
пример
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Попробуй сам " проложенный Список
- Джил
- Ева
- Адам
- Джил
- Ева
- Адам
пример
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
Попробуй сам " Список Аватар
- Икс Майк
Веб-дизайнер - Икс Джил
Поддержка - Икс Джейн
Бухгалтер
пример
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
Попробуй сам " Крошечный Список
- Джил
- Ева
- Адам
Малый Список
- Джил
- Ева
- Адам
Большой список
- Джил
- Ева
- Адам
Список XLarge
- Джил
- Ева
- Адам
Список XXLarge
- Джил
- Ева
- Адам
Список XXXLarge
- Джил
- Ева
- Адам
Jumbo Список
- Джил
- Ева
- Адам