软件开发培训班 >> 编程开发 >> CSS

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>

技术文章快速查找

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建