zoukankan      html  css  js  c++  java
  • DIV+CSS页面布局

    页面布局设计

    一、三行模式或三列模式

    特点:把整个页面水平、垂直分成三个区域。

    三行模式:将页面分成头部、主体及页脚三部分

    三列模式:将页面分成左、中、右三个部分

    在CSS文件里:

    1.三行模式代码

    #header{ 100%; height:120px; background:#223344;}

    #main{ widrh:100%; height:500px; background:#553344;}

    #footer{ 100%; height:40px; background:#993344;}

    2.三列模式代码

    #left{ 30%; height:700px;background:#223344; float:left;}

    #center{ widrh:50%; height:700px; background:#553344;float:left;}

    #fright{ 20%; height:700px; background:#993344;float:left;}

    二、    三行两列、三行三列模式

    特点:先将整个页面水平分成三个区域,再将中间区域分成两列或三列。

    三行两列模式:

    1.DIV结构

    <div id="header" class="">header</div>

    <div id="main" class="">

        <div id="left" class="">left</div>

        <div id="right" class="">right</div>

    </div>

    <div id="footer" class="">footer</div>

    2.CSS结构

    #header{ 100%; height:120px; background:#99ff00;}

    #main{ widrh:100%; height:400px; background:#99ff99;}

    #left{ 30%; height:100%;float:left; background:#999999;}

    #fright{ 70%; height:100%; float:left; background:#553344;}

    #footer{ clear:both; 100%; height:80px; background:#66ff66;}

    三行三列模式:

    1.DIV结构

    <div id="header" class="">header</div>

    <div id="main" class="">

        <div id="left" class="">left</div>

        <div id="center" class="">center</div>

        <div id="right" class="">right</div>

    </div>

    <div id="footer" class="">footer</div>

    2.CSS结构

    #header{ 100%; height:120px; background:#99ff00;}

    #main{ widrh:100%; height:400px; background:#99ff99;}

    #left{ 30%; height:100%;float:left; background:#999999;}

    #center{ 40%; height:100%;float:left; background:#FF3344;}

    #fright{ 30%; height:100%; float:left; background:#553344;}

    #footer{ clear:both; 100%; height:80px; background:#99ff66;}

  • 相关阅读:
    [LUOGU] P3275 [SCOI2011]糖果
    [BZOJ] 2287: 【POJ Challenge】消失之物
    [BZOJ] 2131: 免费的馅饼
    [JZOJ] 5835. Prime
    [JZOJ] 5837.Omeed
    UF_CAMGEOM_ask_custom_points 封装缺陷
    NX Open 切削层加载
    NX Open 图层说
    c++ Dll调用
    VC操作Excel文件编程相关内容总结
  • 原文地址:https://www.cnblogs.com/gly1120/p/7739172.html
Copyright © 2011-2022 走看看