div+css排版的样例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

div+css排版的样例

<!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";  lang="gb2312"> <head> <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312"  /> <meta  http-equiv="Content-Language"  content="gb2312"  /> <meta  content="all"  name="robots"  /> <meta  name="Author"  content="huobazi@aspxboy.com  ,活靶子"  /> <meta  name="Copyright"  content="www.AspxBoy.Com,自由版权,任意转载."  /> <meta  name="Description"  content="www.AspxBoy.Com"  /> <meta  name="Keywords"  content="www.AspxBoy.Com,活靶子,huobazi"  /> <title>  Div布局  </title> <style> body{text-align:center;margin:0;padding:0}/*text-align:center是ie中必须要有的*/div {                 height:200px;                 color:red;   } .title {                 margin:0  auto;                 width:776px;                 background-color:#abcdef; } .middle {                 margin:0  auto;                 width:776px; } .left {                 float:left;                 clear:right;                 width:20%;                 background-color:#eeefff; } .center {                 float:left;                 clear:right;                 width:50%;                 background-color:#CCC000; } .right {                                  float:left;                 clear:right;                 width:30%;                 background-color:#fff000; } .both {                 clear:both;                   width:100%;                 background-color:#666999;   } .footer {                                 margin:0  auto;                 width:776px;                 clear:both;                   background-color:#000fff;   } </style> </head> <body> <div  class="title">顶部</div> <div  class="middle">                 <div  class="left">左侧</div>                 <div  class="center">中部</div>                 <div  class="right">右侧</div>                 <div  class="both">全行</div>                 <div  class="left">左侧</div>                 <div  class="center">中部</div>                 <div  class="right">右侧</div>                 <div  class="both">全行</div>                 <div  class="left">左侧</div>                 <div  class="center">中侧</div>                 <div  class="right">右侧</div> </div> <div  class="footer">底部</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]