- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 5字
- 2024-12-21 22:00:39
5.2 无序列表
实例141 使用<ul>标签来显示无序列表
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\05\141
实例说明
和有序列表相对的是无序列表。在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。本实例将介绍如何使用<ul>标签来显示无序列表，运行本实例，可以看到窗口中建立了一个无序列表，该列表共包含 3 个列表项，结果如图 5.4所示。
图5.4 创建无序列表
技术要点
无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。语法如下：
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ul>
在该语法中，使用<ul></ul>标记表示这一个无序列表的开始和结束，而<li>则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。
实现过程
创建index.html文件，在文件中应用<ul>和<li>两个标记创建一个“游戏难度级别”的无序列表，代码如下：
<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+3" color="#0066FF">游戏的难度级别：</font><br/><br/>
<ul>
<li>简单级别</li>
<li>普通级别</li>
<li>困难级别</li>
</ul>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
设置无序列表的CSS样式。
使用无序列表制作导航菜单。
实例142 使用type 类型来设置无序列表
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\05\142
实例说明
默认情况下，无序列表的项目符号是●，而通过type属性可以调整无序列表的项目符号，避免列表符号的单调。本实例将使用type属性来设置无序列表的项目符号。运行本实例，可以看到除了默认的列表项符号之外，显示了另外两种列表项目符号的效果，运行结果如图5.5所示。
图5.5 设置无序列表项目符号
技术要点
实现本实例的关键是设置无序列表ul的type属性。语法如下：
<ul type=符号类型>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ul>
在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，见表5.2所示。其中，disc是默认的属性值。
表5.2 无序列表的符号类型
实现过程
创建index.html文件，在文件中首先应用无序列表标记<ul>和<li>定义明日科技公司的部门分布，并设置<ul>标记的type属性值为circle；然后再应用<ol>和<li>定义图书开发部的部门分布，并设置<ul>标记的type属性值为square，具体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置无序列表的项目符号</title>
</head>
<body>
<font size="+3" color="#00FF99">明日科技部门分布：</font><br/><br/>
<ul type="circle">
<li>图书开发部</li>
<li>软件开发部</li>
<li>市场营销部</li>
</ul>
<hr color="#3300FF" size="2"/>
<font size="+3"color="#00FFFF">图书开发部分布：</font><br/><br/>
<ul type="square">
<li>PHP部</li>
<li>ASP.NET部</li>
<li>C++部</li>
<li>JAVA部</li>
</ul>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
使用无序列表的type属性设置酒店菜单。
使用无序列表的type属性设置公司人员名单。