css中的无序列表和有序列表的差别,CSS中有序和无序排列详解

在CSS布局中，我们经常会用到

1. 这些元素，在运用时，如果用得不熟，也经常会遇到一些问题，下面我将对这几个标签进行详细讲解，希望能对各位网页设计师有所帮助。
   • 在CSS中被称为无序列表，通常以
   1. 在CSS中被称为有序列表，通常以开始和结束。那么何为无序列表，何为有序列表呢？顾名思义，无序就是指没有顺序地排列，有序就是有顺序地排列了，比如：

   -------------------------------------

   .无序排列一

   .无序排列二

   .无序排列三

   .无序排列四

   .无序排列五

   .无序排列六

   --------------------------------------

   这种格式通常被称为无序排列，当然你可以为每条前面加上小点或者小图标进行修饰，上面无序排列的代码为：

• 无序排列一
• 无序排列二
• 无序排列三
• 无序排列四
• 无序排列五
• 无序排列六

我们可以通过CSS来去掉每条标题前面的小点，然后加上自己喜欢的图标，去掉前面点的CSS代码为：list-style:none;加图标就是在li里面用background:url(..)这种格式了。

然后我们再来看看有序排列的例子：

--------------------------------------

1.有序排列一

2.有序排列二

3.有序排列三

4.有序排列四

5.有序排列五

6.有序排列六

--------------------------------------

上面例子的代码为：

1. 有序排列一
2. 有序排列二
3. 有序排列三
4. 有序排列四
5. 有序排列五
6. 有序排列六

但实际上我们在应用中，往往不会这么单一的用无序和有序两种方法，我们有时会穿插运用，有时会分开运用等等。如果我们在总样式中，将li的属性设置成了list-style:none;那么在页面某个部分，我们又需要用有序或者要显示前面的圆点，那么我们该如何来设置CSS才能还原呢？其实当我们在父级设置了list-style:none这个属性后，如果要在子级让其还原为无序或者有序，只需要加上如下代码即可实现，无序还原，在li中加入list-style:disc

outside;这样，那个小圆点就出来啦；有序还原就在li中加入list-style:decimal

inside;这样每条标题前面的序号就出来了。