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

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

left-top.gif                    right-top.gif

立即学习“前端免费学习笔记（深入）”；

right.gif                          left-bottom.gif

立即学习“前端免费学习笔记（深入）”；

宣小二

宣小二：媒体发稿平台，自媒体发稿平台，短视频矩阵发布平台，基于AI驱动的企业自助式投放平台。

21

查看详情

立即学习“前端免费学习笔记（深入）”；

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 代码：

立即学习“前端免费学习笔记（深入）”；