zoukankan      html  css  js  c++  java
  • div+css实现双飞翼布局

    本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头;下:footer尾;中:内容,将内容分为了三个结构,左中右

    下图是效果图

    我们来看下代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
         <!-- 整体div,设置整个页面占屏幕的比例,并居中 -->
    .container{ width: 70%; margin: auto; }
         <!-- 中间内容,这里设置隐藏是配合该div中的其它元素(div)根据某div高度增长而增长 --> .content{ overflow: hidden; }
         <!-- 设置如同种左中右三个布局左浮动;最小高度;其它两个div根据某一个div的高度而变化,这样舍得本例内容左中右三个div等高,如本例中,左中右,左div被内容撑高,那么中右两个div都将与左div等高 --> .content .middle,.content .left,.content .right
    { float: left; min-height: 200px; margin-bottom: -100000px; padding-bottom: 100000px; }
         <!-- 设置内容中间部分的宽 --> .content .middle
    { background: blueviolet; width: 100%; }

         <!-- 设置内容中间部分距middle容器左右的距离
          这里多嵌套一个名为inner的div,主要是因为如果不使用这种方式,直接在middle中使用padding或margin,会将容器撑大,这样将非常不好控制,多嵌套一个div,将规避这类问题
         --> .content .middle .inner
    { padding-left: 100px; padding-right: 100px; }

         <!-- 固定宽度,设置负边距,使得该布局移动到上一行,这里距左负百分之百,而且在总布局中使用了左浮动,会将该布局移动到上一行最左边 -->
    .content .left{ background: burlywood; width: 100px; margin-left: -100%; }

         <!-- 固定宽度,设置负边距,使得该布局移动到上一行,这里距左负自身像素,而且在总布局中使用了左浮动,会将该布局移动到上一行最右边 -->
    .content .right{ background: brown; width: 100px; margin-left: -100px; } header{ height: 100px; background: greenyellow; } footer{ height: 100px; background: darkolivegreen; } </style> </head> <body> <div class="container"> <header></header> <div class="content"> <div class="middle"> <div class="inner"> 中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中 </div> </div> <div class="left"> 左左左左左左左左左左左左左左左左 </div> <div class="right"></div> </div> <footer></footer> </div> </body> </html>
  • 相关阅读:
    微信“为盲胞读书”项目上线“团体领读”新功能
    神秘代码让iPhone微信闪退的解决方法
    [腾讯首季业绩数据]微信支付用户数持续上升
    [民间调查]小学生微信使用情况的调查 90%小学高年级学生用微信
    O2O模式成功案例分享 汲取精华化为己用
    太原警方通过微博提醒您手机丢失如何保微信安全
    百度富媒体展示允许自定义站点Logo/简介等
    网页出现scanstyles does nothing in Webkit / Mozilla的解决方法
    安卓微信新版内测 可分享小视频/可设微信字体大小
    微信电脑版微信1.1 for Windows更新 可@人/转发撤回消息/可播小视频
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8288360.html
Copyright © 2011-2022 走看看