div+css布局实例:一个简单的页面框架

日期:2009-08-24作者:woniu

字体大小: 小中大

一个简单的div+css页面布局框架，代码演示：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    zoom:1;
    display: inline-block;
    _height:1px;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
*+html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.container{
  margin:0 auto;
  margin-bottom:2px;
  width:810px;
}
.leftcnt{
  float:left;
  width:270px;
  height:300px;
  border:1px solid #B3D9FF;
}
.rightcnt{
  float:right;
  width:536px;
  height:300px;
}
.rightbox{
  float:right;
  width:270px;
  height:300px;
  border:1px solid #B3D9FF;
}
.middlebox{
  float:left;
  width:260px;
  height:148px;
  border:1px solid #B3D9FF;
}
.martop2{
  margin-top:2px;
}	
.adv{
  margin:0 auto;
  margin-bottom:2px;
  width:806px;
  padding:1px;
  border:1px solid #B3D9FF;
  height:100px;
}
</style>
</head>
<body>
<div class="adv">
	
</div>
<div class="clearfix container">
     <div class="leftcnt"></div>
     <div class="rightcnt">
      	  <div class="rightbox"></div>
      	  <div class="middlebox"></div>
      	  <div class="middlebox martop2"></div>
     </div>
</div>
<div class="adv">
	
</div>
<div class="clearfix container">
     <div class="leftcnt"></div>
     <div class="rightcnt">
      	  <div class="rightbox"></div>
      	  <div class="middlebox"></div>
      	  <div class="middlebox martop2"></div>
     </div>
</div>
<div class="adv">
	
</div>
<div class="clearfix container">
     <div class="leftcnt"></div>
     <div class="rightcnt">
      	  <div class="rightbox"></div>
      	  <div class="middlebox"></div>
      	  <div class="middlebox martop2"></div>
     </div>
</div>
<div class="adv">
	
</div>
<div class="clearfix container">
     <div class="leftcnt"></div>
     <div class="rightcnt">
      	  <div class="rightbox"></div>
      	  <div class="middlebox"></div>
      	  <div class="middlebox martop2"></div>
     </div>
</div>

</body>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 woniu 于 2009-08-24 02:55 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: div+css布局实例 css布局 div+css

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.