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；

}