技术总结2 背景图片 div ul_综合

效果图如上

技术点总结如下：

背景图片和ul大小如何一致：背景图片宽度-40就是ul的宽度了。

背景图片大小通过background-size来设置

不要设置*{margin:0,padding:0},不然，ul li的那个符号标点会少一排

下面ul li成为两列是浮动，ul宽度是li的两倍，详情看技术总结1

那个符号图标可以通过list-style-image换成自已想要的样式，不过我没找到满意的图标，就没做

代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div{
               background: url(travel_guider_p001.jpg) no-repeat ;
               background-size:200px 300px ;
               width:300px;
               height:600px;
           }
       ul{
           background-color: #8A2BE2;
           width:160px;
   margin-top: 220px;
           height: 120px;

       }
       li{
           width: 80px;
   float: left;
       }
   .b1{
           color: white;
       }
       </style>
   </head>
   <body>
       <div>
           <span class="b1">线路</span>
               <ul id="list">
               <li><a href="#" >123</a></li>
              <li><a href="#" >456</a></li>
               <li><a href="#" >789</a></li>
               <li><a href="#" >789456</a></li>
               <li><a href="#" >234</a></li>
               <li><a href="#">345</a></li>
               <li><a href="#">458</a></li>
               <li><a href="#">963</a></li>
               <li><a href="#">523</a></li>
               <li><a href="#">5268</a></li>
               </ul>
       </div>

   </body>
</html>