div+css排版的样例

更新时间：2006年06月17日 00:00:00 作者：

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需再刷新一下页面才能执行]

您可能感兴趣的文章:

div+css排版的样例

详解CSS不受控制的position fixed
大家都知道，position:fixed在日常的页面布局中非常常用，在许多布局中起到了关键的作用。但是，在许多特定的场合，指定了position:fixed的元素却无法相对于屏幕视口进行定位。这是为何呢？
2021-05-05
利用CSS控制SELECT中的OPTION是否不允许选
利用CSS控制SELECT中的OPTION是否不允许选...
2006-09-09
HTML中link标签属性详解
在HTML中，link标签是一个自闭合元素，通常位于文档的head部分。它用于建立与外部资源的关联，如样式表、图标等。link标签具有多个属性，其中rel和href是最常用的，文中有详细的代码示例，感兴趣的同学可以参考阅读
2023-05-05
使用#default#userdata组件实现的可记忆内容的编辑器
使用#default#userdata组件实现的可记忆内容的编辑器...
2006-08-08
对display:inline;与float:left;的认识
对display:inline;与float:left;的认识...
2006-09-09
文字应用css滤镜集锦
文字应用css滤镜集锦...
2006-08-08
CSS制作树状目录教程
CSS制作树状目录教程...
2006-09-09
样式表CSS布局经验
样式表CSS布局经验...
2006-09-09
利用CSS，链接下划线也玩自定义
利用CSS，链接下划线也玩自定义...
2006-09-09
关于居中布局和IE双倍边距bug
关于居中布局和IE双倍边距bug...
2006-09-09

div+css排版的样例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具