CSS构造列表

1. 列表图片
2. 背景列表
3. 翻转列表
4. 水平导航
   1. 内边距与外边距

      Ul {

      List-style-type:none;

      Margin: 0;

      Padding: 0;

      }

   1. 使用图片作为列表图标

      Ul {

      Margin: 0;

      Padding:0;

      Width: 200px;

      List-style-image:url(images/list.gif);

      Line-height: 150%;

      }

   1. 以背景图片作为项目列表图标

      Ul {

      List-style-type:none;

      }

      Li {

      Background: url(images/list.gif) no-repeat left center;

      Padding: 0 0 0 25px;

      }

   1. 内联列表

      Ul {

      List-style-type:disc;

      }

      Li {

      Display: inline;

      }

      这里的display属性是块级值的设置,定义是否要成为块.

      Inline是内联,block是区块.

   5. 背景图片和内联列表

   Ul {

   List-style-type: none;

   }

   Li {

   Display:inline;

   Background:url(images/list.gif) no-repeat left center;

   Margin: 0 0 0 10px;

   Padding: 0 0 0 15px;

   }

   6.垂直导航栏

   <div>

   <ul>

   <li><a href="#">Drubjs Menu</a></li>

   <li><a href="#">Beer</a></li>

   <li><a href="#">Spirits</a></li>

   <li><a href="#">Cola</a></li>

   <li><a href="#">Lemonade</a></li>

   <li><a href="#">Tea</a></li>

   <li><a href="#">Coffee</a></li>

   </ul>

   </div>

   Ul {

   List-style-type:none;

   Margin:5px;

   Padding:2px

   Width: 160px;

   Font-size: 12px;

   }

   Li {

   Background: #ddd;

   Margin: 0;

   Padding: 2px 10px;

   Border-left: 1px solid #fff;

   Border-top: 1px solid #fff;

   Border-right: 1px solid #666;

   Border-bottom: 1px solid #aaa;

   }

   7.创建垂直翻转的列表

   ul {

   margin: 0;

   padding: 0;

   list-style-type: none;

   }

   Ul a{

   Display: block;

   Width: 200px;

   Height: 40px; /*39px*/

   Line-height: 40px; /*39px*/

   Color:#000;

   Text-decoration: none;

   Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/

   Text-indent: 50px;

   }

   a:hover {

   background-position: right bottom;

   }

   8.创建水平导航条

   ul {

   Margin: 0;

   Padding: 0 2em;

   List-style: none;

   line-height: 2.1em;

   Width: 720px;

   Background: #faa819 url(images/mainNavBg.gif) repeat-x;

   }

   ul li {

   float: left;

   }

   ul a {

   color:#fff;

   padding: 0 10px;

   background: url(images/divider.gif) repeat-y left top;

   /* background: url(images/divider.gif) no-repeat right center;

   text-align:center;

   */

   text-decoration: none;

   }