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://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>
作者:terry,如若转载,请注明出处:https://www.web176.com/w3css/919.html