css例子

6.背景图像渐变的制作
body{
background：#ccc url（xxx.gif）rpeat-x或y；
}

7.给一个区块加上背景
#branding{
width：700px；
height：20px；
background：url（xxx.gif）no-repeat；
}

8.给标题加上一个小图标
h1{
background：url（xxx.gif）no-repeat left center；
padding-left：20px；
}
如果希望使用百分比而不使用关键字，则0.50%这样就实现了垂直居中

9.圆顶角
<div>
<h2>...</h2>
<p>...</p>
</div>

div{
width：320px；
height：180px；
background：#ccc url（xxx.gif）no-repeat left bottom；
}
h2{
background：url（xxx.gif）no-repeat left bottom；
padding-left：40px；
}

10.简单的css阴影效果
<div>
<img src="xxx.jpg" />
</div>
div{
width:250px;
height:343px;
background:url(xxx.gif)no-repeat right bottom;
}
div img{
position:relative;
top:-2px;
left:-2px;
}

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