One of the simple div css layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

left-top.gif right-top.gif

right.gif left-bottom.gif

right-bottom.gif

p1

实例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 这是一行文本，这里作为样例，显示在布局框中

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

p2

实例2 代码：

固定宽度 相对定位 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{ position:relative; margin-left:62px; width:260px; float:left; } #content1{ position:relative; top:20px; width:497px; float:left; } #side{ /*position:absolute;*/ width:260px; float:left; } #side2{ width:497px; }

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

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

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

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

查看详细信息

="main"> This is a line of text, here as a sample, displayed in the layout box

This is a line of text, here as a sample, Displayed in the layout box View details

🎜>

Page Footer This is a line of text, here as a sample, displayed in the layout box

This is a line of text, here as a sample, Displayed in the layout box View details

🎜 >