知道<div>是定义一个块的了，那么就可以用<div>来页面布局了。可以分别将<div>定义成头部，左边菜单，中间正文，底部标签这几栏。只有修改这些定义过ID的<div>那一块的内容就会跟着被修改，是不是很炫酷？
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<title>div样式</title>
<meta charset = "utf-8">
<!-- 使用CSS样式来控制div布局 -->
<style type="text/css">
/*定义全局的div布局*/
div#global{
/*设置宽度，设置百分比可以根据浏览器自适应宽度*/
width: 100%;
/*设置高度，950px是设置是实体高度，不能自适应的*/
height: 800px;
/*设置背景颜色，方便区分布局*/
background-color: silver;
}
/*定义头部布局，前面的div可以不用写，#号前面默认有个id，凡事定义了id的标签，都可以用#号来表示*/
#heading{
width: 100%;
height: 100px;
background-color: #BB80F7;
}
#content_menu{
width: 20%;
height: 700px;
background-color: #C5E9F3;
/*定义浮动，不定义的话，界面会乱*/
float: left;
}
#content_body{
width: 80%;
height: 700px;
background-color: #F7575d;
float: right;
}
#floor{
/*删除浮动，不然会被其他的浮动给遮住*/
clear: both;
height: 100px;
background-color: #8080FF
}
</style>
</head>
<body>
<!-- 在这里控制全局的页面，定义div的id是"global" -->
<div id="global">
<div id="heading">我是头部的布局</div>
<div id="content_menu">我是正文部分，我想去左边的菜单呆着</div>
<div id="content_body">我是正文部分</div>
<div id="floor">我在最下面，抢不到沙发，坐个地板可以吧</div>
</div>
</body>
</html>
| 
