(1)版心

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

(2)布局流程

为了提高网页制作的效率，布局时通常要遵循一定的布局流程：

  1. 确定页面的版心(可视区)
  2. 分析页面中的行模块,以及每个行模块中的行列表。
  3. 制作HTML结构。
  4. CSS初始化，然后开始运用和种子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
①一列固定宽度且居中的布局：



代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {
            padding: 0;/*内边距*/
            margin: 0;/*外边距*/
        }
        /* 相同的样式,用并集选择器: */
        .top, .banner, .main, .footer {
            width: 960px;
            text-align: center;/*文字居中对齐*/
            margin: 0 auto;/*可以让盒子居中对齐,保证左右auto就可以了*/
            margin-bottom: 10px;
            border: 1px dashed #ccc;
        }
        .top {
            height: 80px;
            background-color: pink;
        }
        .banner {
            height: 120px;
            background-color: purple;
        }
        .main {
            height: 500px;
            background-color: skyblue;     
        }
        .footer {
            height: 150px;
            background-color: rgb(63, 20, 20);
        }
    </style>
</head>

<body>
    <div class="top">昨夜雨疏风骤</div>
    <div class="banner">浓睡不消残酒</div>
    <div class="main">人生天地间</div>
    <div class="footer">忽如远行客.</div>
</body>

</html>

②两列左窄右宽型：

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {
            padding: 0;
            margin: 0;
        }

        .top, .banner, .main, .footer {
            width: 960px;
            margin: 0 auto;
            border: 1px dashed #ccc;
            text-align: center;
            background-color: #eee;
            margin-bottom: 8px;
        }

        .top {
            height: 80px;
        }

        .banner {
            height: 150px;
        }

        .main {
            height: 500px;
        }

        .left {
            width: 360px;
            height: 500px;
            background-color: pink;
            float: left;
        }

        .right {
            width: 592px;
            height: 500px;
            background-color: skyblue;
            float: right;
        }

        .footer {
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

③通栏平均分布型:

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .top {
            height: 60px;
            background-color: #000;
        }

        .banner {
            width: 960px;
            height: 400px;
            background-color: skyblue;
            margin: 20px auto;
            border-radius: 15px;
        }

        .main {
            width: 960px;
            height: 200px;
            margin: 0 auto;
        }

        .main ul li {
            width: 240px;
            height: 200px;
            background-color: pink;
            float: left;
            /* 浮动:让多个块级li,一行显示 */
        }

        .main ul li:nth-child(even) {
            background-color: #000;
        }

        .main ul li:nth-child(odd) {
            background-color: #fff;
        }

        .footer {
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>