2.3 创建列表

列表形式在网页设计中占有比较大的比例，它的特点是显示信息非常整齐直观，便于用户理解。在本节中将向读者介绍HTML中用于创建项目列表、编号列表和定义列表的相关标签。

2.3.1 使用<ul>标签创建项目列表

项目列表又称为无序列表，就是列表结构中的列表项没有先后顺序的列表形式。不少网页应用中的列表均采用项目列表。

项目列表标签采用<ul></ul>标签，每一个列表项被包含在<li></li>标签内，所有的列表项被包含在<ul></ul>标签内。

项目列表的语法格式如下。

<ul>
   <li>列表项一</li>
   <li>列表项二</li>
   <li>列表项三</li>
   <li>列表项四</li>
   <li>列表项五</li>
</ul>

01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-1.html”，效果如图2-41所示，将鼠标光标移至名为news的div中，将多余的文字删除，并输入相应的文字，如图2-42所示。

图2-41　打开页面

图2-42　输入文字

02 切换到网页HTML代码中，为刚输入的内容添加相应的项目列表标签，如图2-43所示。保存页面，在浏览器中预览页面，可以看到网页中项目列表的效果，如图2-44所示。

图2-43　添加项目列表标签

图2-44　预览项目列表默认效果

2.3.2 使用<ol>标签创建编号列表

编号列表又称有序列表，就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有不同的序列编号，如1、2、3……或者a、b、c……。

编号列表采用标签<ol></ol>，每一个列表项被包含在<li></li>标签内，所有的列表项被包含在<ol></ol>标签内。使用编号列表可以让列表项按照明确的顺序排列。

编号列表的语法规则如下。

<ol>
   <li>列表项一</li>
   <li>列表项二</li>
   <li>列表项三</li>
   <li>列表项四</li>
   <li>列表项五</li>
</ol>

01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-2.html”，效果如图2-45所示，将鼠标光标移至名为box的div中，将多余的文字删除，并输入相应的文字，如图2-46所示。

图2-45　打开页面

图2-46　输入文字

02 切换到代码视图中，为刚输入的内容添加相应的编号列表标签，如图2-47所示。保存页面，在浏览器中预览页面，可以看到网页中编号列表的默认效果，如图2-48所示。

图2-47　添加编号列表标签

图2-48　预览编号列表默认效果

2.3.3 使用<dl>标签创建定义列表

列表的另外一种形式是定义列表，定义列表形式特别，用法也特别，定义列表中每个标签都是成对出现的，它在网页布局中的应用也是非常广泛的。

定义列表由<dl>、<dt>和<dd>3个标签组成，<dt>和<dd>标签包含在<dl>标签内，不同的是标签<dt></dt>定义的是标题，而标签<dd></dd>定义的是内容。

定义列表的语法规则如下。

<dl>
   <dt></dt>
   <dd></dd>
   …
</dl>

01 执行“文件>打开”命令，打开页面“源文件\第2章\2-3-3.html”，效果如图2-49所示，将鼠标光标移至名为news的div中，将多余的文字删除，并输入相应的文字，如图2-50所示。

图2-49　打开页面

图2-50　输入文字

02 切换到代码视图中，可以看到该部分内容的HTML代码，如图2-51所示。在页面中将<div id="news"></div>标签之间相应的段落标签删除，添加定义列表标签<dl>、<dt>和<dd>，如图2-52所示。

图2-51　HTML代码

图2-52　添加定义列表标签

03 因为<dl>、<dt>和<dd>标签的默认效果并不能满足这里制作的效果，需要定义相应的CSS样式对其进行控制，如图2-53所示。保存页面，在浏览器中预览页面，可以看到网页中定义列表的效果，如图2-54所示。

图2-53　CSS样式代码

图2-54　预览定义列表效果