简单div+css布局之二_html/css_WEB-ITnose-HTML-Tutorial-php.cn

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

WBOY

Freigeben： 2016-06-24 12:32:00

Original

1083 Leute haben es durchsucht

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

left-top.gif right-top.gif

right.gif left-bottom.gif

right-bottom.gif

实例 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

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

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

实例 4 代码：

固定宽度相对定位