SEO参考：DIV+CSS三行两列经典布局

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SEO参考:XHTML之经典三行两列布局 - seobbs.net</title> 
<style type="text/css"> 
body { 
background: #999; 
text-align: center; 
color: #333; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
}

#header { 
margin-right: auto; 
margin-left: auto; 
padding: 0px; 
width: 776px; 
background: #EEE; 
height: 60px; 

text-align: left; 
} 

#contain { 
margin-left: auto; 
margin-right: auto; 
width: 776px; 
} 
#mainbg { 
float: left; 
padding: 0px; 
width: 776px; 
background: #60A179; 
} 
#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; 
margin-right: auto; 
margin-left: auto; 
padding: 0px; 
width: 776px; 
background: #EEE; 
height: 60px; 
} 
.text {margin:0px;padding:20px;} 
</style> 
</head> 
<body> 
<div id="header">header</div> 
<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 
<div class="text"><p>核心内容</p>
<p>核心内容</p><p>核心内容</p>
<p>核心内容</p>
<p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p><p>核心内容</p>
</div> 
</div> 
<div id="left"> 
<div class="text">left</div> 
</div> 
</div> 
</div> 
<div id="footer">footer</div> 
</body> 
</html> 
Posted on 2007-07-03 17:18  李通通  阅读(570)  评论(0)    收藏  举报