简单div+css布局之二_html/css_WEB-ITnose

续简单的div+css的布局之一

left-top.gif right-top.gif

right.gif left-bottom.gif

right-bottom.gif

p3

实例 3 代码：

body{

background:#fff;

font:13px/1.5 Arial, Helvetica, sans-serif;

margin:0;

padding:0;

}

.rounded{

background:#aaa url(images/lt.gif) top left no-repeat;

width:100%;

}

.rounded h2{

background:url(images/rt.gif) top right no-repeat;

padding:20px 20px 10px;

margin:0;

}

.rounded .main{

background:url(images/r.gif) top right repeat-y;

padding:10px 20px;

margin:-2em 0 0 0;

}

.rounded .footer{

background:url(images/lb.gif) bottom left no-repeat;

}

.rounded .footer p{

color:#888;

text-align:right;

background:url(images/rb.gif) bottom right no-repeat;

display:block;

padding:10px 20px 30px;

margin:-2em 0 0 0;

}

#header,#pagefooter,#containter{

width:760px;

margin: 0 auto;

}

#content{

width:497px;

float:left;

position:relative;

top:20px;

}

#content1{

width:260px;

}

#side{

width:248px;

float:left;

}

#side1{

width:248px;

float:left;

}

#side2{

width:260px;

}

p4

实例 4 代码：

p5

实例 5 代码：