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;

   }