
- W3.CSS 教程
- W3.CSS - 首頁
- W3.CSS - 概述
- W3.CSS - 環境設定
- W3.CSS - 容器
- W3.CSS - 程式碼著色
- W3.CSS - 卡片
- W3.CSS - 響應式設計
- W3.CSS - 網格
- W3.CSS - 表單
- W3.CSS - 按鈕
- W3.CSS - 工具提示
- W3.CSS - 模態對話方塊
- W3.CSS - 表格
- W3.CSS - 列表
- W3.CSS - 圖片
- W3.CSS - 圖示
- W3.CSS - 顏色
- W3.CSS - 導航
- W3.CSS - 實用工具
- W3.CSS 有用資源
- W3.CSS - 快速指南
- W3.CSS - 有用資源
- W3.CSS - 討論
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>
結果
驗證結果。
廣告