W3.CSS - 列表



W3.CSS可以使用各種樣式透過w3-ul顯示不同型別的列表。

序號 類名和描述
1

w3-ul

表示一個沒有任何邊框的基本列表。

2

w3-striped

顯示條紋列表。

3

w3-bordered

繪製一個帶有橫向邊框的列表。

4

w3-border

繪製一個帶邊框的列表。

5

w3-card

將列表繪製成卡片。

6

w3-tiny

繪製一個字型非常小的列表。

7

w3-small

繪製一個字型較小的列表。

8

w3-large

繪製一個字型較大的列表。

9

w3-xlarge

繪製一個字型特大的列表。

10

w3-xxlarge

繪製一個字型超大的列表。

11

w3-xxxlarge

繪製一個字型極大的列表。

12

w3-jumbo

繪製一個超大號字型的列表。

示例

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://w3schools.tw/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>

結果

驗證結果。

廣告