【网站开发网站制作】
列表分为无序列表和有序列表:带序号标志(如数字、字母等)的表项组成有序列表,否则为无序列表。
4.9.1 无序列表标签<ul><li> - - - </ul>
无序列表中每个表项的前面都是项目符号(如●、■等符号)。建立无序列表可使用<ul>标签和<li>表项标签,格式为:
<ul type=”符号类型”>
<li type=”符号类型1”>第一个列表项
<li type=”符号类型2”>第二个列表项
</ul>
值得注意的是,<li>标签是单标签,即一个表项的开始,就是前一个表项的结束。
从浏览器中看,无序列表的特点是,列表项目作为一个整体,与上、下文本段间各有一行空白;表项向右缩进并左对齐,每行前面有项目符号。
type属性指定每个表项左端的符号类型,可取值为disc(实心圆点)、circle(空心圆点)、square(方块),也可以自己设置图片。方法有两种:
1.在<ul>后指定符号的样式
在<ul>后指定符号的样式,可以设置到</ul>前各表项的加重符号。例如:
<ul type=”disc”> 符号为实心圆点●
<ul type=”circle”> 符号为空心圆点0
·57·
<ul type="square">
<ul img src="mygraph.gif'>
符号为方块■
符号为指定的图片文件
2.在<li>后指定符号的样式
在<li>后指定符号的样式,可以设置从该<li>起到</ul>au各表项的项目符号。格式就是将前面例子中的ul换为li。
【案例4-6l无序列表应用示例。
【案例展示】本例文件4-6.html在浏览器中显示的效果如图4110所示。
【学习目标】掌握无序列表标签和表项标签的用法。
【知识要点】掌握无序列表的使用场合。
代码如下:
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>无序列表</title>
</head>
<body>
<h2 align=”center”>手机厂商</h2>
<h3>国外厂商<,h3>
4.9.2 有序列表标签<ol><l》…</ol>
图4-10页面的显示效果
通过带序号的列表可以更清楚地表达信息的顺序。使用<ol>标签可以建立有序列表,苇项的标签仍为<li>。格式为:
<ol type=”符号类型”>
<li type=”符号类型l”>表项1
<li type=”符号类型2”>表项2