免費(fèi)AI編程助手
W3.CSS Lists (列表)
基本列表
w3-ul 類用來制作基本列表：
實(shí)例
<ul class="w3-ul">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶邊框的列表
w3-border 類用于增加列表的邊框：
實(shí)例
<ul class="w3-ul w3-border">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
列表標(biāo)題
如何在列表項(xiàng)內(nèi)添加標(biāo)題元素的示例：
實(shí)例
<ul class="w3-ul w3-border">
<li><h2>名字</h2></li>
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
卡片化列表
使用 w3-card 類將列表卡片化：
實(shí)例
<ul class="w3-ul w3-card-4" style="width:50%">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
列表內(nèi)容居中
用 w3-centered 類將列表的內(nèi)容居中
實(shí)例
<ul class="w3-ul w3-center">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
彩色列表
w3-color 類可用于將顏色添加到列表：
實(shí)例
<ul class="w3-ul w3-red">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
彩色列表行
使用 w3-color 類來顯示彩色行：
實(shí)例
<ul class="w3-ul">
<li class="w3-blue">吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
懸停列表
w3-hoverable 類添加鼠標(biāo)懸停時(shí)在列表上顯示灰色的背景色：
實(shí)例
<ul class="w3-ul w3-hoverable">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
如果要使用特定的懸停顏色，請將 w3-hover-color 類添加到每個(gè)<li>元素：
實(shí)例
<li class="w3-hover-red">吉爾<</li>
<li class="w3-hover-blue">夏娃</li>
<li class="w3-hover-green">亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
可關(guān)閉列表項(xiàng)目
單擊“ x”以關(guān)閉/隱藏列表項(xiàng)：
實(shí)例
<li class="w3-display-container">吉爾
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
提示： HTML ＆times; 實(shí)體是關(guān)閉按鈕的首選圖標(biāo)（而不是字母“ X”）。
帶有填充的列表
w3-padding 類可用于將填充內(nèi)容添加到列表項(xiàng)：
實(shí)例
<ul class="w3-ul">
<li class="w3-padding-small">吉爾</li>
<li class="w3-padding-small">夏娃</li>
<li class="w3-padding-small">亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
頭像列表
實(shí)例
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">邁克</span><br>
<span>網(wǎng)頁設(shè)計(jì)師</span>
</div>
</li>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
提示： 您將在我們的 W3.CSS Bars 和 W3.CSS Navigation 章節(jié)中了解有關(guān) w3-bar 類的更多信息。
列表寬度
默認(rèn)情況下，列表的寬度為 100％。使用 width 屬性更改此設(shè)置。
實(shí)例
<ul class="w3-ul" style="width:30%">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
Tiny 列表
使用 w3-tiny 類制作 Tiny 列表：
實(shí)例
<ul class="w3-ul w3-tiny">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
Small 列表
使用 w3-small 類制作 Small 列表：
實(shí)例
<ul class="w3-ul w3-small">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
Large 列表
使用 w3-large 類制作 Large 列表：
實(shí)例
<ul class="w3-ul w3-large">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
XLarge 列表
使用 w3-xlarge 類制作 XLarge 列表：
實(shí)例
<ul class="w3-ul w3-xlarge">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
XXLarge 列表
使用 w3-xxlarge 類制作 XXLarge 列表：
實(shí)例
<ul class="w3-ul w3-xxlarge">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
XXXLarge 列表
使用 w3-xxxlarge 類顯示 XXLarge 列表：
實(shí)例
<ul class="w3-ul w3-xxxlarge">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
Jumbo 列表
使用 w3-jumbo 類制作 Jumbo 列表：
實(shí)例
<ul class="w3-ul w3-jumbo">
<li>吉爾</li>
<li>夏娃</li>
<li>亞當(dāng)</li>
</ul>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：