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

div+css布局实例

2006-07-27 16:29 405 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<base href="<%=basePath%>" />
<title>调查问卷图形分析</title>
<style>
body{
text-align: center;
}
#container{margin: 0px outo;
background: #ffffff no-repeat;
padding:10px 10px 10px 10px;
boarder-right: #cccccc 1px solid;
boarder-left: #cccccc 1px solid;
boarder-buttom: #cccccc 1px solid;
boarder-top: #cccccc 1px solid;
width: 85%;
height: 100%;
text-align:center;
}
#headcon{margin:0px outo;
background: #cccccc;
padding: 10px 10px 10px 10px;
text-align:left;
}
#bodycon{margin:0px outo;
height:100px;
background: #909090;
}
#bodyleft{
float: left;
width: 20%;
background: navy;
color: blue;
}
#bodycenter{
float: left;
width: 60%;
background: lime;
color: green;
}
#bodyright{
float: left;
width: 20%;
background: aqua;
color: black;
}
#footcon{margin:0px outo;
background: #cccccc;
text-shadow: #000000;
color: #080;
height: 40%;
}
</style>
</head>

<body>
<div id="container">
<div id="headcon">
head
</div>
<div id="bodycon">
body
<div id="bodyleft">
bodylef
</div>
<div id="bodycenter">
bodycenter
</div>
<div id="bodyright">
bodyright
</div>
</div>
<div id="footcon">
foot
</div>
</div>
</body>
</html>

布局css模型

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: