W3.CSS - Danh sách

W3.CSS có thể được sử dụng để hiển thị các loại danh sách khác nhau bằng nhiều kiểu khác nhau trên w3-ul.

Sr không. Tên & Mô tả Lớp học
1

w3-ul

Đại diện cho một danh sách cơ bản không có bất kỳ đường viền nào.

2

w3-striped

Hiển thị danh sách bị loại bỏ.

3

w3-bordered

Vẽ một danh sách có đường viền giữa các hàng.

4

w3-border

Vẽ một danh sách có đường viền.

5

w3-card

Vẽ một danh sách dưới dạng một thẻ.

6

w3-tiny

Vẽ một danh sách với phông chữ rất nhỏ.

7

w3-small

Vẽ một danh sách với phông chữ nhỏ.

số 8

w3-large

Vẽ một danh sách với phông chữ lớn.

9

w3-xlarge

Vẽ một danh sách với phông chữ cực lớn.

10

w3-xxlarge

Vẽ một danh sách với phông chữ rất lớn.

11

w3-xxxlarge

Vẽ một danh sách với phông chữ cực lớn rất cao.

12

w3-jumbo

Vẽ một danh sách với phông chữ lớn jumbo.

Thí dụ

w3css_lists.htm

<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>

Kết quả

Xác minh kết quả.