请选择 进入手机版 | 继续访问电脑版
  • 注册
  • 登录
*本站广告为第三方自助投放。发生纠纷,向本站索取第三方联系方式沟通。

CSS无序列表<ul>和有序列表<ol>实际应用[复制链接]

小七 发表于 2017-05-2311:56 显示全部楼层 阅读模式
+1
9001°C
5
  • 优友
  • 烨水朱华
  • 我有我道
  • 小七
  • haihai1999
过: 他们
项目列表是网页设计中用途很广泛,上一节我们的导航条其实已经应用到了这个知识点,并且给其去了列表项目前面的原点,横向排列。不过当时没有详细讲解,这里单独写一篇教程,把无序列表和有序列表进行对照示范,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属性即可,对应的属性值就是要显示的小图片,所以,对于项目列表前面的符号,其实我们可以任意设置,想放什么都可以轻松实现。
5 条评论
您需要登录后才可以评论 | 注册
优友 发表于 2017-05-2314:38 显示全部楼层
讲的很好  支持一下
烨水朱华 发表于 2017-05-2316:30 显示全部楼层
ol标签挺好用的
我有我道 发表于 2017-05-2316:35 显示全部楼层
说的不错,挺好用的
楼主 小七 发表于 2017-05-2316:36 显示全部楼层

如果需要排序,确实很方便,一下子就出来了
haihai1999 发表于 2017-10-0517:26 显示全部楼层
又学习了
相关推荐

小七 官方

头衔 : 起个好听的头衔

签名 : 一句话描述自己