- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 439字
- 2024-12-21 22:00:46
5.4 列表的应用
实例145 实现有序列表和无序列表的嵌套
这是一个可以提高分析能力的实例
实例位置：光盘\mingrisoft\05\145
实例说明
列表之间是可以进行嵌套的。而最常见的列表嵌套模式就是有序列表和无序列表之间的嵌套。本实例将介绍有序列表和无序列表的嵌套的应用，运行结果如图5.8所示。
图5.8 有序列表与无序列表的嵌套
技术要点
要实现有序列表和无序列表之间的嵌套，可以通过重复地使用<ol>和<ul>标记组合实现。每个ul列表的列表项都可以是一个ol列表，而每个ol列表的列表项都可以是一个ul列表。
实现过程
创建index.html文件，在文件中首先应用<ul>和<li>标记定义一个无序列表，然后在每个li列表项中都定义一个ol有序列表，实现有序列表和无序列表之间的嵌套。具体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>有序列表与无序列表的嵌套</title>
</head>
<body>
<h2>编程语言图书</h2>
<ul type="square">
<li><u>PHP类</u>
<ol type="a">
<li>PHP从入门到精通</li>
<li>PHP开发实战宝典</li>
<li>PHP典型模块大全</li>
</ol>
</li>
<li><u>JAVA类</u>
<ol type="A">
<li>JAVA项目开发实战</li>
<li>JAVA从入门到实践</li>
<li>JAVA开发实战</li>
</ol>
</li>
<li><u>C语言类</u>
<ol type="i">
<li>C语言从入门到精通</li>
<li>C语言从入门到实践</li>
</ol>
</li>
<li><u>数据库类</u>
<ol type="I">
<li>MySQL数据库编程</li>
<li>Oracle数据库编程</li>
</ol>
</li>
</ul>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
实现无序列表和无序列表之间的嵌套。
实现有序列表和有序列表之间的嵌套。
实例146 通过ol元素创建一个图书销量排名列表
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\05\146
实例说明
本实例将通过ol元素创建一个图书销量排名列表，并实现动态改变图书销量排名的功能。运行实例，如图 5.9 所示。向文本框中输入数值，然后单击“确定”按钮，将以文本框中的值为列表项开始编号，显示图书销量排名，如图5.10所示。
图5.9 图书销量排名
图5.10 对列表项重新开始编号
技术要点
本实例中主要应用到了有序列表标记<ol>。<ol>标记用于页面中有序列表的创建，HTML5中新增了两个属性为start和resversed，start用于自定义列表项开始的编号，resversed用于设置列表是否进行反向排序。
实现过程
创建 index.html文件，在文件中首先定义一个图书销量排名的有序列表，然后定义一个设置开始值的文本框和一个“确定”按钮，当单击该按钮时执行JavaScript函数click1()；最后编写JavaScript脚本，定义函数click1()。具体代码如下：
<html>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<head>
<title>图书销量排名</title>
<link href="Css/css1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
function click1(){
var num=document.getElementById("te").value;
var div=document.getElementById("list");
div.setAttribute("start",num);
}
</script>
</head>
<body>
<h3>各类图书销量排名</h3>
<ol id="list">
<li>HTML5自学视频教程</li>
<li>JavaScript自学视频教程</li>
<li>PHP自学视频教程</li>
</ol>
<h5>设置开始值</h5>
<input type="text"id="te" class="tt" style="width:60px"/>
<input type="button" value="确定" class="bb" onClick="click1();">
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
通过ol列表定义商品销量排名。
通过ol列表定义音乐网站歌曲排行榜。
实例147 指定图标的列表项
本实例是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\05\147
实例说明
将同一页面中的并列信息通过列表项显示，不但可以统一页面整体风格，而且可以提高制作速度。在默认情况下，通过列表标记实现的列表项只能有“●”、“○”和“■”3 种符号，本实例将介绍如何通过CSS样式为列表项指定图标。运行本实例，在页面中将以带图标的列表项显示公司部门，如图5.11所示。
图5.11 指定图标的列表项
技术要点
本实例主要通过<ul>标记的style属性的list-style-image属性实现。list-style-image属性用于设置列表的图像样式，此规则将影响到列表的所有列表项，语法格式如下：
style="list-style-image:url(ico.gif)"
其中，ico.gif为设置列表项图标的图片名称。
实现过程
创建index.html文件，在文件中添加列表项并设置其style属性，关键代码如下：
<!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="#00FF99">明日科技部门分布：</font><br/>
<ul style="list-style-image:url(images/ico.gif)">
<li>图书开发部</li>
<li>软件开发部</li>
<li>市场营销部</li>
</ul>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
以带图标的列表项显示关于注册的帮助信息。
以带图标的列表项显示联系信息。