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
支付宝 
微信 