zoukankan      html  css  js  c++  java
  • 布局流程和布局结构

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

    “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为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{
         100%;
        background-color: #ECEBEE;
        margin: 0 auto;
    }
    .inner{
         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;
         24%;
        background-color: #1CAEE8;
        border: 2px solid red;
    }
    .footer{
        height: 200px;
        background-color: grey;
    }
  • 相关阅读:
    [转]在Windows 7 X64系统中安装SharePoint 2010
    使用CUBE和ROLLUP对数据进行汇总
    SQL Server、Oracle数据库排序空值null问题解决办法
    解释传统与敏捷方法最贴切的故事:大象与猴子
    3个简单的问题教会你如何做人、做事、做学问
    DOS命令行方式使用FTP实战练习
    SQL四种语言:DDL,DML,DCL,TCL
    如何对软件需求进行测试
    Windows中的句柄(handle)
    软件静默安装参数
  • 原文地址:https://www.cnblogs.com/fanbao/p/10503974.html
Copyright © 2011-2022 走看看