zoukankan      html  css  js  c++  java
  • 实现可扩展性的页面布局

    前面有一篇文章讲过《css实现两列布局,一列固定宽度,一列宽度自适应方法》,主要是讲实现一列固定宽度,一列宽度自适应的几种方法。

    下面我在总结一下一般的三种扩展布局,这儿所示的扩展布局很常规,有的童鞋会说使用column或者flex啥的布局不是很方便吗,但是你也要看它的支持程度吧,比如你在手机端使用,那当然很好,那我要兼容IE8,IE9呢?

    1.左右结构,左边100%;右边宽度固定

    css代码:

    #header{height:80px; background:#CCC;}
    #center{overflow:hidden; zoom:1;}
    #main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
    #main{height:200px; margin-left:210px; background:#999;}
    #sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
    #footer{height:50px; margin-top:10px; background:#CCC;}

    HTML代码:

    <div id="header"></div>
    <div id="center">
        <div id="main_wrapper">
            <div id="main"></div>
        </div>
        <div id="sidebar"></div>
    </div>
    <div id="footer"></div>

    2.左右结构,左边固定,右边100%

    css代码:

    #header{height:80px; background:#CCC;}
    #center{overflow:hidden; zoom:1;}
    #sidebar{float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
    #main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
    #main{height:200px; margin-left:210px; background:#999;}
    #footer{height:50px; margin-top:10px; background:#CCC;}

    HTML代码:

    <div id="header"></div>
    <div id="center">
        <div id="sidebar"></div>
        <div id="main_wrapper">
            <div id="main"></div>
        </div>
    </div>

    3.左中右结构,左边固定,右边固定,中间100%

    css代码:

    #header{height:80px; background:#CCC;}
    #center{overflow:hidden; zoom:1;}
    #sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
    #main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
    #main {margin-left:438px; background:#999; height:200px;}
    #sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
    #footer{height:50px; margin-top:10px; background:#CCC;}

    HTML代码:

    <div id="header"></div>
    <div id="center">
        <div id="sidebar-l">这里是左边</div>
        <div id="main-wrapper">
            <div id="main">这里是中间</div>
        </div>
        <div id="sidebar-r">这里是右边</div>
    </div>
    <div id="footer"></div>
  • 相关阅读:
    aspnet自定义控件Treeview基本用法
    .net4 wpf App 使用log4net 错误:The type or namespace name 'log4net' could not be found (are you missing a using directive or an assembly reference?)
    asp_UpdatePanel PostBack返回后执行Javascript
    JqueryUI dialog model和asp_UpdatePanel 例子
    Asp.net中使用mshtml
    Windows 2008 R2使用WLAN
    AJAXToolkit_ ModalPopupExtender弹出窗中 使用分页方法
    Ajax.BeginForm MVC3 使用
    WPF错误 Set connectionId threw an exception
    高亮显示当前行
  • 原文地址:https://www.cnblogs.com/moqiutao/p/6858526.html
Copyright © 2011-2022 走看看