项目列表是网页设计中用途很广泛,上一节我们的导航条其实已经应用到了这个知识点,并且给其去了列表项目前面的原点,横向排列。不过当时没有详细讲解,这里单独写一篇教程,把无序列表和有序列表进行对照示范,ul是无需列表,ol是有序列表,通常都是与li一起使用,li是具体的列表项。先看不添加css样式的默认状态,比较二者的区别,完成测试代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<ul>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
</ul>
<ol>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
<li>SEOWHY7 DEMO</li>
</ol>
</body>
</html>
从案例可以看到,ul的默认状态的实心圆点,垂直方向排列。ol的默认状态是数字12345,也是垂直方向排列。通常情况下,ul的属性值有3种常用类型:
1)disc,默认值,实心圆。
2)circle,空心圆。
3)square,实心方块。
ol有序列表属性值比较多:
1)1,decimal,默认值。数字有序列表。(1、2、3、4)
2)a,lower-alpha,按字母顺序排列的有序列表,小写。(a、b、c、d)
3)A,upper-alpha,按字母顺序排列的有序列表,大写。(A、B、C、D)
4)i,lower-roman,小写罗马字母。(i, ii, iii, iv)
5)I,upper-roman,大写罗马字母,(I, II, III, IV)
下面分别给ul和ol添加css,看看效果
<style type="text/css">
ul{
list-style:circle;
}
ol{
list-style:upper-alpha;
}
</style>
还有很多属性值可以看到不一样的列表效果,大家可以自己测试。实际应用中,如果添加样式的话,其实Ul和ol没有区别,只是在默认状态差异明显,大多数情况下使用ul 即可。如果要让li列表项某个项有特殊的属性,实现方法也很简单,在样式里面定义一个对应的类,在li列表项引入这个类即可,由于操作比较简单,这里就不做案例示范了。列表项前面的符号除了使用圆点圆圈,也可以自定义一个小图标,在css里面写上list-style-image属性即可,对应的属性值就是要显示的小图片,所以,对于项目列表前面的符号,其实我们可以任意设置,想放什么都可以轻松实现。
|