html-圣杯布局
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css">
*{
margin: ;
padding: ;
}
body{
min-width: 600px;
}
#content{
padding: 0 200px;
}
#header,#footer{
height: 20px;
text-align: center;
border: 1px solid deeppink;
background: gray;
}
#content .middle{
float: left;
width: %;
background: pink;
/*padding: 0 200px;*/
}
#content .left{
position: relative;
left: -200px;
margin-left: -%;
float: left;
width: 200px;
background: yellow;
}
#content .right{
position: relative;
right: -200px;
margin-left: -200px;
float: left;
width: 200px;
background: yellow;
} .clearfix{
*zoom: ;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
<div class="middle">
<h4>middle</h4>
<!--<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>-->
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
中间加入无限增高
<!--
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
-->
<!--
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style type="text/css">
*{
margin:;
padding:;
} body{
min-width:600px;
}
#content{
overflow: hidden;
padding: 200px; }
#header, #footer{ height: 20px;
text-align: center;
border: 1px solid deeppink;
background: gray;
}
#content .middle, #content .left, #content .right{ padding-bottom: 10000px;
margin-bottom:-10000px;
}
#content .middle{
float: left;
width: %;
background: pink;
/*padding: 0 200px;*/
}
#content .left{ background: yellow;
position: relative;
float: left;
width: 200px;
/*100%提升一层*/
margin-left: -%;
/*根据父级左右padding 200px; 让他据左边 */
left:-200px;
}
#content .right
{
background:yellow;
position: relative;
float: left;
width:200px;
/*-200px提升一层*/
margin-left: -200px;
right: -200px;
} .clearfix{
zoom: ;
}
.clearfix:after{
content:"";
display: block;
clear:both;
} </style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
<div class="middle">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
html-圣杯布局的更多相关文章
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 前端css：“圣杯布局”
昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
随机推荐
- gulp 安装与使用
一.Gulp 是基于node.js 流(stream)的一个前端自动化构建工具,可以使用它构建自动化工作流程,简化我们工作量,让我们把重点放在功能的开发上,从而提高我们的开发效率和工作质量 我们可以用 ...
- idea使用问题
1. 问题: 突发断电导致idea的play项目错误,无法识别build.sbt,build.sbt文件报错,Cannot resolve symbol 解决方案: For anyone having ...
- 华东交通大学2018年ACM“双基”程序设计竞赛 C. 公式题 (2) (矩阵快速幂)
题目链接:公式题 (2) 比赛链接:华东交通大学2018年ACM"双基"程序设计竞赛 题目描述 令f(n)=2f(n-1)+3f(n-2)+n,f(1)=1,f(2)=2 令g(n ...
- 手机网站Meta的使用
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...
- Sublime Text Build 3207 x64 无法安装Package Control和插件
两个问题的解决方法: 以下都是问题的解决,在本人电脑成功解决,还有就是在虚拟机上也成功解决,可以自行尝试下 . 测试电脑为win7-64位 问题1 : 安装Package Control失败 解决问题 ...
- liunx crontab 参数代表含义
* * * * * (下面的字体对应) 分钟 小时 几号 月份 星期几 星号(*):代表所有可能的值,例如month字段如果是星号,则表示在满足其它字段的制约条件后每月都执行该命令操作. 逗号(,): ...
- SpringMVC(day1搭建SpringWebMvc项目)
MVC和webMVC的区别 Model(模型) 数据模型,提供要展示的数据,因此包含数据和行为,行为是用来处理这些数据的.不过现在一般都分离开来:Value Object(数据) 和 服务层(行为). ...
- 搭建jeecg-boot项目运行
实验版本: 2.0.2(发布日期:20190708) 项目地址:https://github.com/zhangdaiscott/jeecg-boot 说明文档:http://jeecg-boot.m ...
- vue点击跳转拨号界面
<a :href="'tel:' + VipInfo.HotelPhone" style="text-decoration:none;color:black;opa ...
- C9 vs 三星
我还是更喜欢 C9, 可惜当年的牛B人物 LemonNation 不在了,C9 赢 三星 一局的机会都没有了. 伟大的 LemonNation ,软件工程学硕士, 2014年,LemonNation ...