シンプルな div+css レイアウト 2_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

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

查看详细信息

ページ ヘッダー 3 & lt; p & gt;これは、レイアウト ボックスに表示されるサンプルとして使用されます。 & lt;/Div class = "FOOTER" & LT; /P & LT;/Div & LT; & DIV & LT; l

シンプルな div+css レイアウト 2_html/css_WEB-ITnose

Page Header

Page Content

Page Content1

Page Side

Page Side3

Page Side2

Page Footer

Page Header

Page Content

Page Contentb

Page Content1

Page Side

Page Side2

Page Side3

Page Footer

Page Header1

Page Side1

Page Header3

Page Side2

Page Header5

Page Side3

ページ ヘッダー 3

ページヘッダー 3