本例通过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. Java—继承

    继承 继承是类与类的一种关系,是一种“is a”的关系.注意:java中的继承是单继承,一个类只有一个父类. 继承的好处:子类拥有父类的所有属性和方法(private修饰的无效),实现代码的复用 语法 ...

  2. 数据仓库是什么？OLTP和OLAP是什么？

    数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented).集成的(Integrate).相对稳定的(Non-Volatile).反映历史变化(Time Varian ...

  3. Spring Cloud学习路线

    学习本学习路线学习完,大家将会对微服务.Spring Cloud.Docker.Kubernetes有一个系统.全面的认识.通过学习,将能掌握相关的知识体系,并能够投入到项目实战中去. 本学习路线采用 ...

  4. OpenGL学习 Our First OpenGL Program

    This shows you how to create the main window with the book’s application framework and how to render ...

  5. ffmpeg 安装和参数介绍

    0.说明: 1).configure,这一步一般用来生成 Makefile,为下一步的编译做准备,你可以通过在 configure 后加上参数来对安装进行控制,比如代码:./configure –pr ...

  6. Second last week for the second last semester!

    This week, I focused more on the final project, such as H335(Computer structure, still confused with ...

  7. selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH. 错误处理方法

    首次使用selenium webdriver,webdriver.Firefox() 报错selenium.common.exceptions.WebDriverException: Message: ...

  8. POJ-2151 Check the difficulty of problems---概率DP好题

    题目链接: https://vjudge.net/problem/POJ-2151 题目大意: ACM比赛中,共M道题,T个队,pij表示第i队解出第j题的概率 问 每队至少解出一题且冠军队至少解出N ...

  9. [pytorch] Pytorch入门

    Pytorch入门 简单容易上手,感觉比keras好理解多了,和mxnet很像(似乎mxnet有点借鉴pytorch),记一记. 直接从例子开始学,基础知识咱已经看了很多论文了... import t ...

  10. grep的使用

    http://www.eguidedog.net/linux-tutorial/05-grep.php grep apple fruitlist.txt:在fruitlist.txt中查找apple字 ...