CSS构造颜色,背景与图像
1.使用span更好的控制文本中局部区域的文本:文本 ;
2.使用display属性提供区块转变:display:inline(是内联的默认值)/block(是区块的默认值)/none;(转换成内联/区块/不占位隐藏;
3.背景图像渐变的制作: body{
backgroung:#ccc url(bg.gif) repeat-x;
}
4.给一个区块加上一个背景:#branding{
width:700px;
height:700px;
backgroung:url(branding.gif) no-repeat;
}
5.给标题加上一个小图标: h1{
padding-left:20px;
backgroung:url(bullet.gif) no-repeat left center;
}
如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中;
6.text-indent:20px;(首行内缩20px);
7.圆顶角:
Header
content
.box{
width:418px;
backgroung:#ccc url(bottom.gif) no-repeat left bottom ;
}
.box h2{
backgroung: url(top.gif) no-repeat left top ;
}
如果不希望碰到外界,加上填充:
.box h2{
padding:10px 20px 0 20px;
}
.box p{
padding:0 20px 10px 20px;
}
8.简单的CSS阴影效果:
.img-wrapper {
backgroung: url(images/shadow.gif) no-repeat bottom right;
clear:right;
float:left;
position:relative;
margin:10px 0 0 10px;
}
.img-wrapper img{
display:block;
margin:-5px 5px 05px -5px;
position:relative;
}