css中的圣杯布局和双飞翼布局
圣杯布局
布局要求：
三列布局，中间自适应，两边定宽
中间栏要在浏览器优先渲染
允许任意列的高度最高
用最简单的CSS、最少的HACK语句
解释说明：
1.min-width:700px是为了当页面缩小到指定的700px的时候，页面内容宽度不再随着浏览器缩小。是为了电脑的正常浏览效果
2.注意到container设置的值0 220px 0 200px,上 右 下 左，所以left 设置widh:200px,right设置width:220px
3.设置min-height:300px，是让三列看起来没那么的矮
4.浮动的情况下，定义负边距会使div向上移动，margin-left:-100%会使移动到最左则，然后再加上left：-200px，正好使left归位。right原理相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.header,.footer{
float: left;
width: 100%;
background: #f60;
height: 40px;
line-height: 40px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
}
.left,.middle,.right{
position: relative;
float: left;
min-height: 300px;
}
.middle{
width: 100%;
background: #1a5acd;
}
.left{
width: 200px;
background: #f00;
margin-left: -100%;
left: -200px;
}
.right{
width: 220px;
background: #0f0;
margin-left: -220px;
right:-220px;
} </style>
</head>
<body>
<div class="header">
<h4>头部</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>这是页面中间内容</p>
</div>
<div class="left">
<h4>left</h4>
<p>这是页面左侧内容</p>
</div>
<div class="right">
<h4>right</h4>
<p>这是页面右面的内容</p>
</div>
</div>
<div class="footer">
<h4>尾部</h4>
</div>
</body>
</html>
双飞翼布局：
经过淘宝工程师针对圣杯布局改良后得出双飞翼布局
去掉相对布局，只需要浮动和负边距
解释说明：双飞翼布局得到的效果试图与圣杯布局一样，只不过是写法不太一样，主要是没有用container包括中间三部分，相对定位也没用到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
min-width:700px;
}
.header,.footer{
width: 100%;
float: left;
height: 40px;
background: #ddd;
text-align: center;
line-height: 40px;
}
.left,.right,.middle{
float: left;
min-height: 300px;
}
.middle{
width: 100%;
min-height:300px;
}
.middle-inner{
margin-left: 200px;
margin-right: 220px;
background: red;
min-height:300px; }
.left{
width: 200px;
background: #0F0;
margin-left: -100%;
}
.right{
width: 220px;
background: blue;
margin-left: -220px;
}
</style>
</head>
<body>
<div class="header">
<h4>头部</h4>
</div>
<div class="middle">
<div class="middle-inner">
<h4>middle</h4>
<p>这是页面中间内容</p>
</div>
</div>
<div class="left">
<h4>left</h4>
<p>这是页面左侧内容</p>
</div>
<div class="right">
<h4>right</h4>
<p>这是页面右面内容</p>
</div>
<div class="footer">
<h4>尾部</h4>
</div>
</body>
</html>
css中的圣杯布局和双飞翼布局的更多相关文章
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS_圣杯布局和双飞翼布局
参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...
随机推荐
- Oracle 12c 创建用户
本文转载自 http://blog.itpub.net/29047826/viewspace-1453577/,侵删. 12c推出了可插拔库,管理用户也分为两种:本地用户和公用用户.本地用户是指在 ...
- python 多线程与GIL
GIL 与 Python 线程的纠葛 GIL 是什么?它对 python 程序会产生怎样的影响?我们先来看一个问题.运行下面这段 python 代码,CPU 占用率是多少? # 请勿在工作中模仿,危险 ...
- Integer 与 int -- 自动装箱（autoboxing）与自动拆箱（unboxing）
转载于 http://www.ticmy.com/?p=110 jdk1.5引入了自动装箱(autoboxing)与自动拆箱(unboxing),这方便了集合类以及一些方法的调用,同时也使初学者对其感 ...
- SQL语句映射文件(1)resultMap
SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyBAtis配置文件mappers标签中引用,例如: ...
- 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png
在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还 ...
- Spring与SpringMVC的关系
在此鉴于你已经了解过Spring的相关知识,简单描述一下Spring与Spring的关系 在框架的使用中,Spring类似于一个具有多种特性,也可以说是多种功能模块的应用平台,(特性就比如IoC,AO ...
- 六：SpringCloud-Config
十:SpringCloudConfig分布式配置中心 1. 概述 1.1 分布式系统面临的 配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中会出现大量的 ...
- 10、List、Set
List接口 List接口的特点 *A:List接口的特点: a:它是一个元素存取有序的集合. 例如,存元素的顺序是11.22.33.那么集合中,元素的存储就是按照11.22.33的顺序完成的). b ...
- 【原】spring boot source 1.5 中不支持 diamond 运算符
最近要开发新的项目,就花了几天时间看了下spring boot的相关资料,然后做了一个demo,不得不说开发效率确实很快,几行注解就完成了事务,aop,数据库等相关配置:但由于先前习惯了spring ...
- Zookeeper配置要点必看
注意点 zookeeper需要在各个节点的机器上搭建,它的启动也要在各个节点的$ZOOKEEPER_HOME/bin 下启动. 环境搭建 下载安装包并解压. 在$ZOOKEEPER_HOME/conf ...