整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。
無序列表使用 <ul> 標(biāo)簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
- black hot drink
Milk
- white cold drink
注意事項(xiàng) - 有用提示
提示: 列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實(shí)例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復(fù)雜的嵌套列表。
自定義列表
本例演示一個(gè)定義列表。
HTML 列表標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項(xiàng) |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項(xiàng)目 |
| <dd> | 定義自定列表項(xiàng)的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
width: 1200px;
height: 40px;
line-height: 40px;
margin: 50px auto;
}
ul>li{
float: left;
width: 120px;
height: 40px;
cursor: pointer;
text-align: center;
position: relative; /* 相對(duì)定位 */
}
ul>li:hover{
background-color: deepskyblue;
}
/* 豎線 */
li:after{
content: '';
width: 1px;
height: 16px;
display: inline-block;
background-color: #000;
position: absolute;
right: 0;
top: 12px;
}
li.last:after{
display: none;
}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>
公司動(dòng)態(tài)
</li>
<li>新聞中心
</li>
<li>企業(yè)風(fēng)采</li>
<li class="last">關(guān)于我們</li>
</ul>
</body>
</html>
用content: '';樣式實(shí)現(xiàn)
TML的常用列表可以分為三種：無序列表，有序列表以及定義列表。
定義：<ul>...</ul> ，表示項(xiàng)目之間沒有順序規(guī)定的列表。
內(nèi)層標(biāo)簽是 <li>...</li>，它有一個(gè)type屬性，常用的值有三種：
小實(shí)例：
<ul>
? <li>默認(rèn)值</li><br>
? <li type="disc">實(shí)心圓點(diǎn)</li><br>
? <li type="circle">空心圓點(diǎn)</li><br>
? <li type="square">實(shí)心方塊</li><br>
</ul>定義：<ol>...</ol>， 相對(duì)于無序列表而言，具有一定的順序的列表，一般用數(shù)字或者是字母放在表示項(xiàng)目的最前端表示先后順序。
內(nèi)層標(biāo)簽是 <li>...</li>，同樣它的type屬性常用值有四種：
小實(shí)例：
<ol>
? <li>默認(rèn)值</li><br>
? <li type="A">大寫字母</li><br>
? <li type="a">小寫字母</li><br>
? <li type="I">羅馬數(shù)字</li><br>
? <li type="1">純數(shù)字</li><br><br><br>
</ol>定義：<dl>...</dl>，不僅僅是一列項(xiàng)目，還是項(xiàng)目及其注釋的組合。
由 <dl> 標(biāo)簽開始，內(nèi)層標(biāo)簽 <dt>...</dt> 包裹對(duì)象文本， <dd>...</dd> 包裹著解釋文本。（內(nèi)層只能是 dt 和 dd 標(biāo)簽，且dt 必須是在 dd 前面）
小實(shí)例：
<dl>
? <dt>HTML</dt>
? <dd>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。</dd><br>
? <dt>CSS</dt>
? <dd>層疊樣式表(英文全稱：Cascading Style
? Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。</dd><br>
? <dt>JavaScript</dt>
? <dd>JavaScript是一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。</dd><br>
</dl>動(dòng)手小練習(xí)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
