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;
    }
  • 相关阅读:
    snmp安装zabbix
    〖Demo〗-- 用Django实现Video页面分类查询
    〖Python〗-- Django的ORM性能优化建议
    〖Web〗-- 新特性之WebSocket
    〖Python〗-- 数据结构
    〖缓存〗-- Memcached 与 Redis
    〖算法〗-- NB二人组:堆排序、归并排序
    〖算法〗-- 快速排序 、希尔排序、计数排序
    〖算法〗-- 排序lowB三人组:冒泡排序、选择排序、 插入排序
    〖算法〗-- 递归、二分查找、列表查找
  • 原文地址:https://www.cnblogs.com/fanbao/p/10503974.html
Copyright © 2011-2022 走看看