立即学习“前端免费学习笔记（深入）”；
续简单的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;
}
立即学习“前端免费学习笔记（深入）”；
Page Header
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
立即学习“前端免费学习笔记（深入）”；
Page Content
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Content1
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side3
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side2
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
立即学习“前端免费学习笔记（深入）”；
Page Footer
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
p4
实例 4 代码：
立即学习“前端免费学习笔记（深入）”；
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:278px;
float:left;
立即学习“前端免费学习笔记（深入）”；
}
#contentb{
float:left;
width:278px;
}
#content1{
width:200px;
}
#side{
width:557px;
float:left;
}
#side2{
width:200px;
float:left;
}
#side3{
float:right;
width:200px;
}
立即学习“前端免费学习笔记（深入）”；
Page Header
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Content
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Contentb
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Content1
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side2
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side3
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
立即学习“前端免费学习笔记（深入）”；
Page Footer
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
p5
实例 5 代码：
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,#container{
width:760px;
margin: 0 auto;
}
#content2{
float:left;
width:200px;
}
#content3{
position:relative;
top:20px;
float:left;
width:354px;
}
#content4{
float:right;
width:200px;
}
#content5{
position:relative;
padding-left:200px;
width:350px;
float:left;
}
#side{
float:left;
width:200px;
}
#pagefooter{
clear:both;
}
Page Header1
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side1
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Header3
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side2
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Header5
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
Page Side3
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
立即学习“前端免费学习笔记（深入）”；
Page Header3
这是一行文本，这里作为样例，显示在布局框中
这是一行文本，这里作为样例,显示在布局框中
查看详细信息
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3088667.html
