布局流程和布局结构

Posted 2021-02-12 fanbao

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

一、布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作html结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

二、常用的布局结构

2.1 一列固定宽度且居中型

最普通的，最为常用的结构

HTML代码：

<div class="doc">
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main"></div>
    <div class="footer"></div>
</div>

CSS代码：

.doc{
    width: 80%;
    background-color: #ECEBEE;
    margin: 0 auto;
}
.top{
    height: 100px;
    background-color: yellow;
}
.banner{
    height: 40px;
    background-color: blue;
}
.main{
    height: 500px;
    background-color: green;
}
.footer{
    height: 200px;
    background-color: grey;
}

2.2 两列左窄右宽型
HTML代码：

<div class="doc">
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="main_left clear"></div>
        <div class="main_right clear"></div>
    </div>
    <div class="footer"></div>
</div>

CSS代码：

.doc{
    width: 80%;
    background-color: #ECEBEE;
    margin: 0 auto;
}
.clear {
    clear: both;
    float: none;
    height: 0;
    overflow: hidden
}
.top{
    height: 100px;
    background-color: yellow;
}
.banner{
    height: 40px;
    background-color: blue;
}
.main{
    height: 500px;
    background-color: green;
}
.main_left{
    float: left;
    height: 500px;
    width: 35%;
    background-color: #1CAEE8;
}
.main_right{
    float: right;
    height: 500px;
    width: 65%;
    background-color: ##ACF341;
}
.footer{
    height: 200px;
    background-color: grey;
}

2.3 通栏平均分布型
HTML代码

<div class="doc">
    <div class="top"></div>
    <div class="banner inner"></div>
    <div class="main inner clear">
        <div class="main_list"></div>
        <div class="main_list"></div>
        <div class="main_list"></div>
        <div class="main_list"></div>
    </div>
    <div class="footer"></div>
</div>

CSS代码

.doc{
    width: 100%;
    background-color: #ECEBEE;
    margin: 0 auto;
}
.inner{
    width: 80%;
    margin: 0 auto;
}
.clear {
    clear: both;
    float: none;
    height: 0;
    overflow: hidden
}
.top{
    height: 100px;
    background-color: yellow;
}
.banner{
    height: 60px;
    background-color: blue;
}
.main{
    height: 500px;
    background-color: green;
}
.main_list{
    float: left;
    height: 500px;
    width: 24%;
    background-color: #1CAEE8;
    border: 2px solid red;
}
.footer{
    height: 200px;
    background-color: grey;
}