在网页开发中，经常会有将网页切分为不同的局部块，然后再在不同的快中显示不同的内容，如：顶部块、主题内容块、侧边栏信息快、底部信息块等。

使用DIV可以将网页切成不同的块，然后使用CSS样式表定义各不同块的具体显示。一般将div布局与CSS样式分不同文件编写，div切割在html文件中实现，然后将独立的CSS样式表文件加载到html文件中。

下面以源代码及效果图的方式，展示一个简单的网页布局案例。

最终效果图：

182836889.png

说明：将网页分成了上中下三部分，上面顶部（红色），中间部分（×××）又分为左边的主体内容（蓝色）和右边的侧边栏（灰色）两个子块，下面是底部（绿色）。边缘暗红色的是背景，背景可以指定颜色或是设置背景图片。


要想将网页切割成这样的块，需要在html中使用div标签定义，本例定义块代码如下：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="this is a web station for alone.">
    <meta name="keywords" content="perfect,home,blog,web,station">
    <title>我的个人站点</title>
    <!-- 在html文件中使用link标签添加为这个文件定制的CSS样式表 -->
    <link rel="stylesheet" type="text/css" href="myweb.css" />
    </head>
    <body>
        <!-- 定义顶部块，并为这个块设定一个名称为head的id值 -->
        <div id="head">
            <h1>这里是顶部栏</h1>
        </div>
        <!-- 定义主体容器块，并为这个块设定一个名称为container的id值 -->
        <div id="container">
            <!-- 在contarner块中定义两个子块，然后分别为这两个块设定名称为main、siderbar的class类 -->
            <div class="main"><h1>这里是主体内容部分</h1></div>
            <div class="sidebar"><h1>这里是侧边栏</h1></div>
        </div>
        <!-- 定义底部块，并为这个块设定一个名称为bottom的id值 -->
        <div id="bottom"><h1>这里是底部</h1></div>
    </body>
</html>

说明：

1.使用上面的代码，虽然可以将页面切成不同的块，但是默认的块没有大小、颜色之分，根本看不出来。

2.为每个div元素设定了一个id或class属性来标识，每个属性值代表对应的元素，在CSS样式表中使用。id值必须唯一，一个id值代表一个元素。但class值可以重复，一个class值表示同名的一类元素。

为了在网页中清晰的分辨各块，需要定义一个CSS样式表myweb.css来定义不同块及元素的显示。

下面的myweb.css文件对上面的html文件里各部分定义了如何显示：

/*在css文件中，默认的html元素可以直接使用名称，这里定义了整个网页body部分的颜色，
是十六进制的RGB表示方法，即图片周边的暗红色。也可以使用哪个url()的方式为body部分
设置背景图片*/
body{
    background-color: #551122;
<!-- background-p_w_picpath: url("../bj.jpg");-->
}
/*html元素的id属性使用#开头。width、herght表示宽与高，大小使用像素表示。
margin表示显示方式，默认靠左，auto设置为居中显示，并设定背景颜色为red*/
#head{
    width: 960px;
    height: 80px;
    margin: auto;
    background-color: red;
}
#container{
    width: 960px;
    height: 500px;
    margin: auto;
    background-color: yellow;
}
/*html元素定义class属性使用点.开头。float设置该块的漂浮属性，在container内向左移,
另一个快siderbar在container内向右移*/
.main{
    float: left;
    width: 700px;
    height: 500px;
    background-color: blue;
}
/*因为main和siderbar在container内，所以两个块的宽度之和不应该超过container的宽度*/
.sidebar{
    float: right;
    width: 240px;
    height: 500px;
    background-color: gray;
}
/*底部块的id值，大小及颜色、居中显示*/
#bottom{
    width: 960px;
    height: 100px;
    background-color: green;
    margin: auto;
}
/*重新定义h1元素的显示，由于h1默认有边距margin-top将顶部间距设为0，
text-align为设置字体的显示位置属性：center是居中显示，font-size定义大小*/
h1{
    margin-top: 0px;
    text-align: center;
    color: white;
    font-size: 35px;
}
/*定义bottom中的h1显示方式，其他的h1字体颜色为white，此处h1颜色为red，大小也改变。
当多处定义了同一个元素时，最精确的生效*/
#bottom h1{
    margin-top: 0px;
    text-align: center;
    color: red;
    font-size: 50px;
}

说明：

1.在css样式表中，html的默认元素可以直接使用，元素的id使用“#”+“id值”表示，元素的class使用“.”+“class值”表示；

2.CSS可用的属性值太多，可以根据手册查询，此处只根据需要使用了宽度、高度、颜色、显示位置等属性；

3.在html中h1...h7有默认的显示形式，可以在CSS中改变其显示属性，并且可以使用精确定位的方式设置不同地方的h1有不同的显示。

根据以上内容，就可以使用Div+CSS为自己的网页布局了。