3.7 设置列表属性_Dreamweaver CC网页设计从入门到精通（微课精编版）-QQ阅读男生轻小说网

书名：Dreamweaver CC网页设计从入门到精通（微课精编版）
作者名：前端科技
本章字数：2437字
更新时间：2021-03-30 12:40:50

3.7 设置列表属性

在HTML中，列表结构有两种类型：无序列表和有序列表，前者是用项目符号来标记无序的项目，后者则使用编号来记录项目的顺序。此外，还有一种特殊类型列表：定义列表。

3.7.1 实战演练：设计项目列表

在项目列表中，各个列表项之间没有顺序级别之分，即使用一个项目符号作为每条列表的前缀。在HTML中，有3种类型的项目符号：○（环形）、●（球形）和■（矩形）。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中把光标置于定位盒子内，输入5段段落文本，如图3.41所示。

图3.41 输入段落文本

第3步，使用鼠标拖选5段段落文本，在【属性】面板中切换到【HTML】选项卡，然后单击【项目列表】按钮，把段落文本转换为列表文本，如图3.42所示。

图3.42 把段落文本转换为列表文本

【拓展】

在HTML中使用下面代码实现项目列表：

     <ul>
          <li>腾讯视频</li>
          <li>迅雷看看</li>
          <li>乐视网</li>
          <li>电视剧</li>
          <li>更多>></li>
     </ul>

其中，<ul>标记的type属性用来设置项目列表符号类型，如下所示。

（1）type="circle"：表示圆形项目符号。

（2）type="disc"：表示球形项目符号。

（3）type="square"：表示矩形项目符号。

<li>标记也带有type属性，也可以分别为每个项目设置不同的项目符号。

3.7.2 实战演练：设计编号列表

编号列表同项目列表的区别在于，编号列表使用编号，而不是项目符号来编排项目。对于有序编号，可以指定其编号类型和起始编号。编号列表适合设计强调位置关系的各种排序列表结构，如排行榜等。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中把光标置于定位盒子内，输入10段段落文本，如图3.43所示。

图3.43 输入段落文本

第3步，使用鼠标拖选10段段落文本，在【属性】面板中切换到【HTML】选项卡，然后单击【编号列表】按钮，把段落文本转换为列表文本，如图3.44所示。

图3.44 把段落文本转换为列表文本

【拓展】

在HTML中使用<ol>标记定义编号列表，该标签包含type和start等属性，用于设置编号的类型和起始编号。设置type属性，可以指定数字编号的类型，如下所示。

（1）type= "1"：表示以阿拉伯数字作为编号。

（2）type= "a"：表示以小写字母作为编号。

（3）type= "A"：表示以大写字母作为编号。

（4）type= "i"：表示以小写罗马数字作为编号。

（5）type= "I"：表示以大写罗马数字作为编号。

通过<ol>标记的start属性，可以决定编号的起始值。对于不同类型的编号，浏览器会自动计算相应的起始值。例如，start="4"，表明对于阿拉伯数字编号从3开始，对于小写字母编号从d开始等。

默认时使用数字编号，起始值为1，因此可以省略其中对type属性的设置。同样<li>标记也带有type和start属性，如果为列表中某个<li>标记设置type属性，则会从该<li>标记所在行起使用新的编号类型，同样如果为列表中的某个<li>标记设置start属性，将会从该<li>标记所在行起使用新的起始编号。