W3.CSS - 列表

W3.CSS 可用于使用 w3-ul 上的各种样式来显示不同类型的列表。

先生。没有。	类名和描述
1	w3-ul 表示没有任何边框的基本列表。
2	w3条纹显示剥离列表。
3	w3 边框绘制一个带有跨行边框的列表。
4	w3边框绘制一个带边框的列表。
5	w3卡将列表绘制为卡片。
6	w3-小用非常小的字体绘制一个列表。
7	w3-小号用小字体绘制一个列表。
8	w3-大号绘制一个大字体的列表。
9	w3-超大用超大字体绘制列表。
10	w3-xxlarge 用非常大的字体绘制一个列表。
11	w3-xxxlarge 用非常高的超大字体绘制一个列表。
12	w3-巨型用巨型大字体绘制一个列表。

例子

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>

结果

验证结果。