您的位置：首页 > Web前端 > CSS

一个CSS上中下三行三列结构的Div布局

2013-04-29 08:21 681 查看

[html] view
plaincopy print ?

<!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" />

<title>上中下三行三列结构的Div布局</title>

<style>

body{text-align:center;margin:0;padding:0}

div

{

height:200px;

}

.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航