列表与导航，内联

标签：block   图片   border   url   repeat   ack   背景   ora   背景图   

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-
}

列表与导航，内联

标签：block   图片   border   url   repeat   ack   背景   ora   背景图   

原文地址：http://www.cnblogs.com/yjh1604600160/p/6016998.html