精通CSS-创建基本列表

1. 基本列表样式

 <ul>

  <li>Read emails</li>

  <li>Write chapter</li>

  <li>Go shopping</li>

  <li>Cook dinner</li>

  <li>Watch Lost</li>

</ul>

为了添加定制的项目符号，可以使用list-style-image属性。但这种方法控制力不强，更常用的是将项目符号作为背景添加在列表元素上。然后可以使用背景图像的定位属性精确地控制自定义项目符号的对准方式。

IE的早期版本和Opera使用左外边距控制列表的缩进，而包括Safari和Firefox在内的大多数现代浏览器则选择使用左内边距。因此，首先需要将列表的外边距(margin)和内边距(padding)设置为0.从而去掉这个缩进。要去掉默认的项目符号，只需将列表样式类型设置为none;

ul {

    margin:0;

   padding: 0;

  llist-style-type: none;

     }

添加定制的项目符号非常简单。在列表项左边添加内边距，为符号留出所需的空间。然后将项目符号作为背景图像应用于列表项。如果列表项跨越多行，你可能希望将项目符号放在接近列表项顶部的位置。但是，如果知道列表项的额内容不会跨越多行，那么可以将垂直位置设置为middle或50%，从而让项目符号垂直居中：

li{

background:url(/img/bullet.gif) no-repeat  0 50%;

 padding-left: 30px;

}

创建基本的垂直导航条

<ul class="nav">

   <li> <a href="home.htm">Home</a></li>

   <li><a href="about.html">About</a></li>

   <li><a href="services.htm">Services</a></li>

   ....

</ul>

首先要做的是去掉默认的项目符号并将外边距和内边距设置为零：

ul.nav{

    margin:0;

    padding: 0;

    list-style-type:none;

       }

然后开始处理图像样式。给导航菜单设置浅绿色的背景和深绿色的边框。还以em为单位设置导航列表的宽度。

ul.nav  {

      margin:0;

      padding: 0;

     list-style-type: none;

     width: 8em;

     background-color: # 8BD400;

     border: 1px solid #486B02;

         }

  不对列表项应用样式，而是对其中包含的锚链接应用样式，由此提供更好的浏览器兼容性。为了创建与按钮相似的单击区域，需要将锚的display属性设置为block.然后扩展锚链接，让它占据可用空间

ul.nav  a{

display: block;

color: #2B3f00;

text-decoration: none;

border-top:1px solid #E4FFD3;

border-bottom: 1px solid #486B02;

background:url(/img/arrow.gif) no-repeat 5% 50%;

padding: 0.3em 1em;

} 

所有边框叠在另一个链接的顶上，但是最后一个链接的底边框与列表的底边框形成了双线。可以在第一个或最后一个列表项上添加类，这样就可以直接删除边框。以后还可以使用：last-child 伪类

ul.nav .last a{

   border-bottom: 0;

     }

为了完成最终效果，最后还需要用:hover  :focus 和:selected状态。为此，只需要修改背景和文本颜色。还可以通过修给边框颜色创建按下的按钮效果。当鼠标悬停在锚链接上时，这些样式应用于锚链接。他们还应用于具有selected类的父列表项中的锚。

ul. nav a:hover,

ul nav a:focus,

ul.nav  .selected a {

 color: #E4FFD3;

background-color: #6DA203;

 }

在除Windows上的IE6和更低版本之外的所有主流浏览器上，这种技术都是有效的。但是，IE6在列表项上下添加了额外的空间。为了修复这个bug,需要将列表项上的dispaly属性设置为inline;

ul .nav  a li {

display:inline;

   }