版心和布局流程

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

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

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

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

3、制作HTML结构。

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

三、常见格式。

1、 一列固定宽度且居中，最普通的，最为常用的结构。

示例：

<html>
    <head>
        <style>
            .top,
            .banner,
            .main,
            .footer {
                width: 900px;
                background-color:#eee;
                border:1px dashed #ccc;
                margin: 0 auto;
            }
            .top {
                height:80px;
            }
            .banner {
                height:120px;
                margin: 5px auto; #上下间距5px,左右居中
            }
            .main {
                height:500px;
            }
            .footer {
                height:100px;
                margin: 5px auto 0;
            }
        </style>
    </head>
    <body>
        <div class="top">TOP</div>
        <div class="banner"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </body>
</html>
View Code

2、两列左窄右宽型，比如小米官网。

3、通栏平均分布型。

 

 

posted @ 2018-08-31 16:19  会开车的好厨师  阅读(948)  评论(0)    收藏  举报