CSS基础知识三（列表编号 ）

一、列表编号（ul中设置）

List-style-type:none;------不显示编号

List-style-type:decimal;------数字编号

List-style-type:circle;------空心圆

List-style-type:disc;------实心圆

List-style-type:square;-----方块

List-style-type:url(图像位置);-----图片符号（同时也可以用背景图像实现，background:url(图像位置) no-repeat;）

注意：

<ul>

         <li><ahref=””>标题</li>

</ul>

1、  设置a:hover的背景色，需要把a:hover的属性覆盖到li中，即在a样式中加入：display:block；（让块显示）

2、  让列表横着显示，只需要在li中加入：float:left;

 

<ul>中设置margin:0px;padding:0px;list-style-type:none;

<li>中设置宽度，背景颜色

<a>中：字体的各种样式，并加入display:block；

 

例子代码：

样式：

ul{

         list-style-type:none;

         padding:0px;

         margin:0px;

         }

li{

         width:100px;

         background-color:#c11136;

         border-bottom:1pxsolid black;

         border-left:10pxsolid #711515;

         border-right:1pxsolid #711515;

         float:left;

         margin-left:20px;

         }

a{

         display:block;

         padding:10px10px;

         text-decoration:none;

         color:white;

         text-align:center;

         }

a:hover{

         background:#711515;

         color:#0FF;

         }

页面中：

<ul>

         <li><ahref="">首页</a></li>

   <li><a href="">关于我们</a></li>

   <li><a href="">新闻中心</a></li>

   <li><a href="">通知公告</a></li>

   <li><a href="">联系方式</a></li>

   

</ul>