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

2017-05-23

项目列表是网页设计中用途很广泛，上一节我们的导航条其实已经应用到了这个知识点，并且给其去了列表项目前面的原点，横向排列。不过当时没有详细讲解，这里单独写一篇教程，把无序列表和有序列表进行对照示范，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

讲的很好支持一下

2017-05-23

ol标签挺好用的

2017-05-23

说的不错，挺好用的

2017-05-23

烨水朱华发表于 2017-5-23 16:30
ol标签挺好用的

如果需要排序，确实很方便，一下子就出来了

2017-10-05

又学习了