典型的三行二列居中高度自适应布局

&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;header&lt;/div&gt;
&lt;div id="contain"&gt;
&lt;div id="mainbg"&gt;
&lt;div id="right"&gt;
&lt;div
class="text"&gt;right&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="left"&gt;
&lt;div class="text"&gt;left&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;footer&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

body{

background:#999;

text-align:center;

color: #333;

font-family:arial,verdana,sans-serif;

}

#header{

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;

text-align:left;

} #contain{

margin-right: auto;

margin-left: auto;

width: 776px;

} #mainbg{

width:776px;

padding: 0px;

background: #60A179;

float: left;

}

#right{

float: right;

margin: 2px 0px 2px 0px;

padding:0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left{

float: left;

margin: 2px 2px 0px 0px;

padding: 0px;

background: #F2F3F7;

width: 200px;

text-align:left;

}

#footer{

clear:both;

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;}

.text{margin:0px;padding:20px;}

</style>

</head>

<body>

<div id="header">header</div>

<div

class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

</div>

</div>

<div id="footer">footer</div>

</body>

</html>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复