上QQ阅读APP看书，第一时间看更新
4.2 使用无序列表
教学录像：光盘\TM\lx\4\使用无序列表．exe
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
4.2.1 无序列表标记——ul
无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标记。
语法
<ul>
<li>第1项</li>
<li>第2项</li>
…
</ul>
语法解释
在该语法中，使用<ul></ul>标记表示这一个无序列表的开始和结束，而<li>则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。
【例4.1】实例代码。（实例位置：光盘\TM\sl\4\1）
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+3" color="#0066FF">编程词典的模式分类：</font><br/><br/>
<ul>
<li>入门模式</li>
<li>初级模式</li>
<li>中级模式</li>
</ul>
</body>
</html>
运行这段代码，可以看到窗口中建立了一个无序列表，该列表共包含3个列表项，如图4.3所示。
图4.3 创建无序列表
4.2.2 设置无序列表的类型——type
默认情况下，无序列表的项目符号是●，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。
语法
<ul type=符号类型>
<li>第1项</li>
<li>第2项</li>
…
</ul>
语法解释
在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，如表4.2所示。其中disc是默认的属性值。
表4.2 无序列表的符号类型
【例4.2】实例代码。（实例位置：光盘\TM\sl\4\2）
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+3" color="#00FF99">明日科技部门分布：</font><br/><br/>
<ul type="circle">
<li>图书开发部</li>
<li>软件开发部</li>
<li>质量部</li>
<li>财务部</li>
</ul>
<hr color="#3300FF" size="2" />
<font size="+3" color="#00FFFF">图书开发部分布：</font><br/><br/>
<ul type="disc">
<li>PHP部</li>
<li>ASP.NET部</li>
<li>C#</li>
<li>JAVA</li>
</ul>
</body>
</html>
运行这段代码，可以看到除了默认的列表项目符号之外，显示了另外两种列表项目符号的效果，如图4.4所示。
图4.4 设置无序列表项目符号
也可以在<li>项中定义无序列表的类型，其语法是<li type=符号类型>，这样定义的结果是对单个项目进行定义，实例代码如下。
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+3" color="#00FF99">明日科技部门分布：</font><br/>
<ul>
<li type="circle">图书开发部</li>
<li type="disc">软件开发部</li>
<li type="square">质量部</li>
</ul>
</body>
</html>
运行这段代码，效果如图4.5所示。
图4.5 设置不同的项目符号