本例通过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>

div+css实现双飞翼布局的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  4. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  5. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  6. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  7. div+css网页标准布局实例教程（二）

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  8. div+css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  9. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

随机推荐

  1. Oracle：Start with connect by prior 递归

    SELECT * from CONNECT BY {PRIOR列名1=列名2|列名1=PRIOR列名2} [START WITH]; Oracle的递归查询:     START WITH :描述开始 ...

  2. HttpWebRequest Post请求webapi

    1.WebApi设置成Post请求在方法名加特性[HttpPost]或者方法名以Post开头如下截图: 2.使用(服务端要与客户端对应起来)[单一字符串方式]:注意:ContentType = &qu ...

  3. centos6.5_64bit_tomcat7开机自启

    一.创建tomcat脚本 vim /etc/init.d/tomcat 将下面的内容拷到脚本里面 =================================================== ...

  4. ＨCNA管理设置文件系统FTP服务上传下载文件

    1.拓扑图 2.R2配置 The device is running! ###################################### <Huawei>sys Enter s ...

  5. COGS 146. [USACO Jan08] 贝茜的晨练计划

    ★☆   输入文件:cowrun.in   输出文件:cowrun.out   简单对比时间限制:1 s   内存限制:32 MB 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运 ...

  6. Wampserver由橙变绿的解决过程

    因为C盘的内存问题,就重装了win7系统,那么就面临着很对软件要重新进行安装,安装wampserver时,再次遇到了服务器的图标一直是橙色的而不变绿色,安装包地址: http://download.c ...

  7. sublim插件(待续)

    imesupport SublimeText3默认不支持输入法跟随光标,这在输入中文的时候看起来不方便. 进入SublimeText3在上面菜单栏里Perferences点击PackageContro ...

  8. UESTC 31 饭卡 card

    dp,答案容易想到是 凑出价格总和≤m-5 + 没被使用的最大价格. dp[i = 前i种价格][j = 价格总和] = 最大没使用的价格下标idx_m. dp[i-1][j]存在的话,则只要更新id ...

  9. 转：SSM框架——使用MyBatis Generator自动创建代码

    转:https://blog.csdn.net/zhshulin/article/details/23912615 这两天需要用到MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的 ...

  10. 2018.8.19 mybatis 环境搭建---配置mysql 。（Windows环境下面）

    安装mysql Install/Remove of the Service Denied!错误的解决办法 在windos 的cmd下安装mysql 在mysql的bin目录下面执行: mysqld - ...