НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
W3CSS. W3Schools українською. Уроки для початківців

En

W3.CSS Списки

❮ Prev Next ❯
  • × Списки в W3.CSS
    Mike
    Веб-дизайнер
  • × Списки в W3.CSS
    Jill
    Веб-програміст
  • × Списки в W3.CSS
    Jane
    На підхваті

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

Клас 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>
Спробуйте самі »
❮ Prev Next ❯