好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

简单的div+css的实例布局,利用图片进行布局,首先要准备5张图片。

实例1代码:



固定宽度 相对定位

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:497px;
float:left;
}
#side2{
width:260px;
}



Page Header




这是一行文本,这里作为样例,显示在布局框中

这是一行文本,这里作为样例,显示在布局框中


查看更多关于简单的div+css布局之一_html/css_WEB-ITnose的详细内容...

  阅读:34次