css布局-双飞翼布局
<div class="header">Header</div>
<div class="bd">
<div class="main">
<div class="inner">
Main
</div>
</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
body{padding:;margin:}
.header,.footer{width:100%;background:#666;height:30px;clear:both;}
.left{background:#E79F6D;width:150px;float:left;margin-left:-100%;}
.main{background:#D6D6D6;width:100%;float:left;}
.right{background:#77BBDD;width:190px;float:left;margin-left:-190px;}
.inner{margin-left:150px;margin-right:190px;}
增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是双飞翼布局。
DOM结构:main内层增加了一个div
css布局-双飞翼布局的更多相关文章
- div+css实现双飞翼布局
本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- css的双飞翼布局
双飞翼布局的大概意思就是左右两边的内容是固定的,大小是固定的, 而中间的布局的随着页面的大小变化而自动变化的. 通过代码来解析: 1.四个div,也可以使用section,其中main,left.ri ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 【布局】圣杯布局&双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...
- HTML特殊布局--------双飞翼布局
今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...
随机推荐
- iOS中获取本地通讯录联系人以及汉字首字母排序
iOS中获取手机通讯录中的联系人信息: /*** 加载本地联系人*/ - (void)loadLocalContacts { //新建一个通讯录类 ABAddressBookRef addressBo ...
- 南京邮电大学java程序设计作业在线编程第六次作业
王利国的的 "Java语言程序设计第6次作业(2018)" 详细 主页 我的作业列表 作业结果详细 总分:100 选择题得分:60 1. Java中所有类的父类是(). A.Fa ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- java实习面试题(阿里一面)
1.抽象类和接口的不同点: 抽象类可以有构造函数,接口中不能有构造函数: 抽象类中可以有普通成员变量,但是接口中不能有普通成员变量: 抽象类中可以包含非抽象的普通方法,但是接口中必须是抽象方法:(jd ...
- memocache工作原理
1 Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的 ...
- Webapck项目开发基本构建及配置
1.创建项目文件夹 myapp 手动创建myapp,或mkdir myapp 2.cd myapp 3.npm init (初始化项目) 4.一路回车(关于项目信息的填写,可以不写,一路回车即可) 可 ...
- zxg项目准备的技术资料
bootstrap工具大全:http://www.w3cplus.com/source/the-best-bootStrap-resources.html ubuntu-安装aptana3 http ...
- Linq小整理
Linq(Language Integrated Query)中文翻译为语言集成查询 (1)源起 .net的设计者在类库中定义了一系列的扩展方法 来方便用户操作集合对象 这些扩展方法构成了LINQ的查 ...
- PHP内核之旅-2.SAPI中的Cli
PHP 内核之旅系列 PHP内核之旅-1.生命周期 PHP内核之旅-2.SAPI中的Cli 一.SAPI是什么? 1.1 理解SAPI (1)SAPI是PHP框架的接口层.有很多种服务器的SAPI的实 ...
- C# Dispose模式详细分析
C#Dispose模式 目的: 为了及时释放宝贵的非托管资源和托管资源,并且保证资源在被gc回收的时候可以正确释放资源,同时兼顾执行效率 必须遵循的事实: 1 托管资源释放: 由另一线程的gc进行释放 ...