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>
div+css实现双飞翼布局的更多相关文章
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- DIV+CSS列表式布局（同意图片的应用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
- div+css网页标准布局实例教程（二）
五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
随机推荐
- Struts2_HelloWorld_2
设置 tomcat 的位置 (jre:并不是jdk) 打开 struts2目录:apps 示例程序docs 文档lib 类库src 源码 打开 apps 目录下的 struts2-blank.war ...
- Linux文件种类与扩展名
一.文件种类 1)普通文件:ls -al第一个字符为[-]的 纯文本文件(ASCII) 二进制文件(binary):Linux中的可执行文件 数据格式文件(data):特定格式的文件,如:Linux登 ...
- MySQL入门很简单: 6 视图
1. 视图含义作用 视图是虚拟的表,是从数据率中一个或多个表中导出来的表: 数据库中只存放了视图的定义,没有存放视图中的数据,数据在原先的表中: 一旦表中的数据发生变化,显示在视图中的数据也会发生 ...
- NutDao配置多数据源
首先,我必须声明,这是一个非常简单的方法,很多小菜没做出来,是因为把nutz想得太复杂 数据源(或者是数据库连接池),在Nutz.Ioc看来,是一个普通的Bean,没任何特别之处. 再强调一点,除了$ ...
- VMware 12安装Mac OS X 10.11
去年写了一篇安装Mac OS X 10.10的文章,看到大家都想体验OS X,大多数都能成功,但也在其中发现了一些问题,所以更新一下,希望对大家有所帮助. 1048VMware 11安装Mac O ...
- 递归函数之阶乘和字符串反转－基于R和Python
Python课第五周开始讲函数了.递归函数.递归在python中不能超过900多层,否则报错内存溢出什么的.同样在R中递归太深也会报错,阈值和python中大概一样,900多次就报错了. error ...
- HTML5 input date 移动端 IOS 不支持问题
1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...
- maven中import scope依赖方式解决单继承问题的理解
在maven多模块项目中,为了保持模块间依赖的统一,常规做法是在parent model中,使用dependencyManagement预定义所有模块需要用到的dependency(依赖) <d ...
- Python基础之字符串(str)常用操作
1.字符串常用的方法 len()返回字符串的长度 ##Python3 >>> print(len('ab12我')) 5 ##Python2 >>> print(l ...
- 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...