页面导航：首页 → 网络编程 → CSS/HTML → 正文内容

div+css排版的样例

发布：dxy 发布日期：2006-6-17 字体：[增加减小] 类型：转载

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 全选提示:你可先修改部分代码,再按运行]

Tags：div+css排版的样例