2.7 定义列表文本_Dreamweaver+Flash+Photoshop网页设计从入门到精通（微课精编版）-QQ阅读男生武侠网

书名：Dreamweaver+Flash+Photoshop网页设计从入门到精通（微课精编版）
作者名：前端科技编著
本章字数：1488字
更新时间：2025-02-21 07:17:54

2.7 定义列表文本

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

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

视频讲解

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

【操作步骤】

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

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

图2.41 输入段落文本

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

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

【拓展】

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

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

其中，<ul>标记的type属性用来设置项目列表符号类型，包括：

☑ type="circle"：表示圆形项目符号。

☑ type="disc"：表示球形项目符号。

☑ type="square"：表示矩形项目符号。

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

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

视频讲解

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

【操作步骤】

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

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

图2.43 输入段落文本

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

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

【拓展】

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

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

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

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

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

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

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

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