23.1列表图片

1.内边距与外边距

ul{

list-style-type:none;

margin:0;

padding:0;

}

ul{

list-style-type:none;

margin:0;

padding:0;

line-height:150%;

}

ul li{

krgound:url(xxx.gif)no-repeat left center;

padding-left:14px;

}

4.内联

ul与li本是区块

ul加上list-style-type：disc；

li加上display：inline；

可变成内联

5.背景图片和内联列表

ul{

list-style-type:none;

}

li{

display：inline；

background：url（xxx.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>

</ul>

</div>

ul{

list-style-type:none;

margin:5px;

padding:2px;

width:160px;

font-size:12px;

}

li{

brckground:#ddd;

margin:0;

padding:2px 10px;

border-left:1px solid #fff;

border-top:1px solid #fff;

border-ridht:1px solid #fff;

border-bottom:1px solid #fff;

}

7.创建垂直翻转的列表

ul{

margin:0;

padding:0;

list-style-type:none;

}

ul a{

display:block;

width:200px;

height:40px;

line-height:40px;

color:#000;

text-decoration:none;

background:#94b8e9 url(xxx.gif)no-

}