div+css排版的样例

307 阅读 0 评论 203 点赞

我是靠谱客的博主顺利火车，这篇文章主要介绍div+css排版的样例，现在分享给大家，希望可以做个参考。

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需刷新才能执行]