zoukankan      html  css  js  c++  java
  • 响应式布局之浮动圣杯布局(双飞翼布局)—-自适应宽度布局

    前端开发中自适应布局在实际应用中越来越普遍,特别是随着更多高级浏览器的出现html5和css3得到了更好的应用。

    圣杯布局有个好处,完全符合前端开发中渐进增强的理念,由于浏览器解析是从DOM的上至下,这样圣杯布局可以把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析。

    下面的demo能够解决实际应用中绝大多数的自适应布局问题了,有兴趣的coder们可以研究下,代码如下:

    左边固定,右边自适应(双飞翼布局的实现):demoA html部分:

            contentaside
    

    demoA css部分:

    .wrap{ 100%; float:left}
    .content{ height:300px;background:green; margin-left:200px}
    .right{ 200px; height:300px; background:red; float:left; margin-left:-100%}
    

    左边和右边固定,中间自适应(双飞翼布局的实现):demoB html部分:

            contentasideaside
    

    demoB css部分:

    .wrap{ 100%; float:left}
    .content{ height:300px;background:green; margin-left:200px;margin-right:200px}
    .left{ 200px; height:300px; float:left; background:yellow; margin-left:-100%}
    .right{ 200px; height:300px; background:red; float:left; margin-left:-200px}
    

     

    设置head的内容:

    <head>

    <meta http-equiv="pragma" content="no-cache">    

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    </head> 

    HTML禁用缓存问题​
    

    打开邮箱

    mailto:

    renyuhost@126.com">打开邮箱

    打开QQ

    http://wpa.qq.com/msgrd?v=3&uin=1018829833&site=qq&menu=yes

    ">打开QQ

  • 相关阅读:
    GNU风格 汇编语法总结(转)
    CPSR和SPSR(转)
    C语言调用汇编实现字符串对换
    ubuntu如何跑arm程序
    Shell编程之函数调用
    arm汇编--ubuntu12.04 安装arm-linux交叉编译环境
    linux关于bashrc与profile的区别(转)
    Shell如何传递字符串
    打印指针指向的地址值
    在CentOS 6.4中支持exfat格式的U盘
  • 原文地址:https://www.cnblogs.com/fengyingwang/p/7591213.html
Copyright © 2011-2022 走看看