1、建立无序的列表
无序列表用<ul>标签定义,表示一个没有特定顺序的相关条目的集合。无序列表的各个列表之间没有顺序级之分。通常会在每个列表前添加一个项目符号,并且每行会针对左边界压缩一定的距离。
无序列表用一对<ul>标记,但每个列表要用<li>定义。
使用type属性可以定制无序项目列表符号:disc实心圆、circle空心圆、square实心方块、默认的是disc。type属性既可以在ul中设置,还可以直接在li中设置。
body> <div> <h1 align="center">本章内容</h1> <ul> <li><h2 >建立无序的列表</h2></li> <li><h2>建立有序的列表</h2></li> <li><h2>建立定义列表</h2></li> <li><h2>列表的嵌套</h2></li> </ul> </div> <hr /> <div style="width: 650px; margin :0 auto "> <p><h3>建立无序列表中的具体知识</h3></p> <div style=" width:300px; height:120px; background-color:yellowgreen "> <ul type="disc"> <li>在ul中设置type属性为disc时的列表符号样式</li> <li type="circle">在li中设置type属性为circle时列表符号样式</li> <li type="square">在li中设置type属性为实心正方形</li> </ul> </div> </div> </body>
2、建立有序的列表
有序列表<ol>标签在列表项目前添加的编号而不是项目符号,编号从第一列表项开始向后递增。当需要给列表项目排列顺序时就可以使用有序列表。
同样可以
1>通过设置type属性定制有序列表的项目符号:设置成1数字序号、a小写字母、A大写字母、i小写罗马字母、I大写罗马数字。默认是1数字列表。
2>start属性:定制有序列表中列表项的起始数。例type=“i”,start=5.则有序表的第一个项目符号从v开始。
3>value属性:定制有序列表中列表序号的数值。仅仅使用于li元素,用来指定当前列表项的序号。
<div style="width:600px;height:900px ;background-color :gold"> <p><h3>建立有序的列表</h3></p> <div > <ol> <li>第一个有序列表</li> <li>第二个有序列表</li> </ol> <hr style="width:400"/> <ol type="i"> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> </ol> <hr style="width:400" /> <ol type="a"> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> </ol> <hr style="width:400" /> <ol type="A"> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> <li>使用type属性的不同格式</li> </ol> <hr /> <ol type=" A" start=" 3"> <li>start属性定制起始数</li> <li>start属性定制起始数</li> <li>start属性定制起始数</li> </ol> <hr /> <ol> <li>li标签适用的value属性</li> <li value=" 3">li标签适用的value属性</li> <li value="6">li标签适用的value属性</li> </ol> </div> </div>
3、建立定义列表
定义列表通常用于术语的定义,用<dl>标签实现。术语标签由<dt>标签开始,术语的解释说明由<dd>标签实现,dd后的文字会缩进显示。
1 <div style ="background-color :red "> 2 <p><h3>建立定义列表</h3></p> 3 <dl> 4 <dt>术语的定义:张保东</dt> 5 <dd>东腾科技有限公司的创始人</dd> 6 </dl> 7 <dl> 8 <dt>东腾科技</dt> 9 <dd>东腾科技有限公司的简称,一个拥有现代科技为一体的全职能新型化公司</dd> 10 </dl> 11 </div>
4、列表的嵌套
通常嵌套列表用于反映层次较多的内容。可以将编号或项目列表嵌套在其他的编号列表中。
1>嵌套一层列表
2>嵌套多层
3>混合嵌套
1 <div style="width: 600px; height: 800px; background-color: #b2e05c"> 2 <h3>列表的嵌套</h3><hr /> 3 <div> 4 <h4>嵌套一层列表</h4> 5 <ul> 6 <li>手机</li> 7 <li> 8 电脑 9 <ul> 10 <li>联想</li> 11 <li>戴尔</li> 12 <li>华硕</li> 13 </ul> 14 </li> 15 <li>冰箱</li> 16 </ul> 17 </div><hr /> 18 <div> 19 <h4>嵌套多层无序列表</h4> 20 <ul> 21 <li>手机</li> 22 <li>电脑 23 <ul> 24 <li>联想 25 <ul> 26 <li>联想电脑顶呱呱</li> 27 <li>联想电脑没有用</li> 28 </ul> 29 </li> 30 <li>戴尔 31 <ul> 32 <li>戴尔电脑好的不得了</li> 33 <li>戴尔电脑还不错</li> 34 </ul> 35 </li> 36 </ul> 37 </li> 38 <li>冰箱</li> 39 </ul> 40 </div><hr /> 41 <div> 42 <h4>混合嵌套的列表,有序与无序</h4> 43 <ul> 44 <li>手机</li> 45 <li> 46 电脑 47 <ul> 48 <li>联想 49 <ol> 50 <li>联想不错</li> 51 <li>联想杠杠的</li> 52 <li>联想是个啥</li> 53 </ol></li> 54 <li>戴尔</li> 55 </ul> 56 </li> 57 <li>华硕</li> 58 </ul> 59 </div> 60 61 62 </div>