CSS无序列表<ul>和有序列表<ol>实际应用

小七 发表于:2017-05-23 11:56 复制链接 ?提问题 +写文章
阅读数:8719
项目列表是网页设计中用途很广泛,上一节我们的导航条其实已经应用到了这个知识点,并且给其去了列表项目前面的原点,横向排列。不过当时没有详细讲解,这里单独写一篇教程,把无序列表和有序列表进行对照示范,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属性即可,对应的属性值就是要显示的小图片,所以,对于项目列表前面的符号,其实我们可以任意设置,想放什么都可以轻松实现。





返回列表 使用道具 举报
条评论
您需要登录后才可以回帖 登录 | 注册
高级
优友 优友 发表于 2017-05-23 14:38 | 阅读全部
讲的很好  支持一下
使用道具 举报
回复
烨水朱华 烨水朱华 发表于 2017-05-23 16:30 | 阅读全部
ol标签挺好用的
使用道具 举报
回复
我有我道 我有我道 发表于 2017-05-23 16:35 | 阅读全部
说的不错,挺好用的
使用道具 举报
回复
小七 小七 发表于 2017-05-23 16:36 | 阅读全部

如果需要排序,确实很方便,一下子就出来了
使用道具 举报
回复
haihai1999 haihai1999 发表于 2017-10-05 17:26 | 阅读全部
又学习了
使用道具 举报
回复
相关推荐

您的等级不够,“高级及以上会员” 开启

您的等级不够,“vip会员”开启