Учебники

W3.CSS — Списки

Ноябрь 23, 2018

W3.CSS может использоваться для отображения разных типов списков с использованием различных стилей поверх w3-ul.

Старший Имя класса и описание
1

и3-уль

Представляет основной список без каких-либо границ.

2

w3-полосатый

Отображает раздетый список.

3

w3 каймой

Рисует список с границей между строками.

4

w3-граница

Рисует список с рамкой.

5

w3-карты

Рисует список как карточку.

6

w3-крошечное

Рисует список с очень маленьким шрифтом.

7

w3-маленький

Рисует список мелким шрифтом.

8

w3-большой

Рисует список крупным шрифтом.

9

w3-XLarge

Рисует список с очень крупным шрифтом.

10

w3-XXLarge

Рисует список с очень очень крупным шрифтом.

11

w3-XXXLarge

Рисует список с очень высоким очень крупным шрифтом.

12

w3-джамбо

Рисует список с большим шрифтом.

и3-уль

Представляет основной список без каких-либо границ.

w3-полосатый

Отображает раздетый список.

w3 каймой

Рисует список с границей между строками.

w3-граница

Рисует список с рамкой.

w3-карты

Рисует список как карточку.

w3-крошечное

Рисует список с очень маленьким шрифтом.

w3-маленький

Рисует список мелким шрифтом.

w3-большой

Рисует список крупным шрифтом.

w3-XLarge

Рисует список с очень крупным шрифтом.

w3-XXLarge

Рисует список с очень очень крупным шрифтом.

w3-XXXLarge

Рисует список с очень высоким очень крупным шрифтом.

w3-джамбо

Рисует список с большим шрифтом.

пример

w3css_lists.htm

Live Demo

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Результат

Проверьте результат.

47
Share: