HTML特殊布局--------双飞翼布局
今天看到以前写的一篇布局的例子分享给大家,双飞翼布局。
什么是双飞翼布局??
1.三列布局,中间宽度自适应,两边固定宽度;
2.中间栏在浏览器中优先展示渲染;
双飞翼布局的原理:
中间的盒子定100%的宽 float:left; 两边的盒子都float:left,定固定的宽;左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽;
以下是例子:
HTML特殊布局--------双飞翼布局的更多相关文章
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- css布局-双飞翼布局
<div class="header">Header</div> <div class="bd"> <div clas ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 【布局】圣杯布局&双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
随机推荐
- Firefox实用插件记录
之前总结过一个软件推荐的小文,用来记录一直以来在软件开发过程中遇到的各种实用的软件.后来发现里面越来越多的记录了Firefox的插件,所以今天决定单独抽出一个页面来记录Firefox的插件.因为平时大 ...
- 思考题:用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......)
思考题: 用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......) 简答: 一.用例解释: 在软件工程中,用例是一种在开 ...
- mysql主从复制-异步复制
一.创建复制账号: 在Master的数据库中建立一个备份帐户:每个Slave使用标准的MySQL用户名和密码连接master. 进行复制操作的用户会授予REPLICATION SL ...
- hdu2571 命运 简单DP
简单dp 状态方程很好想,主要是初始化.... 代码: #include<iostream> #include<cstdlib> #include<cstdio> ...
- RowSet的使用
ResultSet是使用Jdbc编程的人入门和常用的操作数据库的类,自 JDK1.4开始,易于使用RowSet接口被引入.RowSet 接口扩展了标准java.sql.ResultSet接口.RowS ...
- 主java程序猿知识体系结构
zuoxiaolong博客园<浅谈程序猿书箱的选择,你会如何选择自己的爱书呢>一文,链接如下:http://www.cnblogs.com/zuoxiaolong/p/life19.htm ...
- 001---Hibernate简介( 开源O/R映射框架)
该系列教程是使用hibernate3,hibernate4和3有区别(集成spring,使用等),请注意 001---Hibernate简介(开源O/R映射框架) ORM(Object Relatio ...
- 开涛spring3(6.5) - AOP 之 6.5 AspectJ切入点语法详解
6.5.1 Spring AOP支持的AspectJ切入点指示符 切入点指示符用来指示切入点表达式目的,,在Spring AOP中目前只有执行方法这一个连接点,Spring AOP支持的Aspect ...
- Android框架式编程之BufferKnife
配置 compile 'com.jakewharton:butterknife:(insert latest version)' annotationProcessor 'com.jakewharto ...
- JS Event事件流(冒泡机制、捕获机制、事件绑定)
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...