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, . ...
随机推荐
- 微信-小程序-开发文档-服务端-接口调用凭证：auth.getAccessToken
ylbtech-微信-小程序-开发文档-服务端-接口调用凭证:auth.getAccessToken 1.返回顶部 1. auth.getAccessToken 本接口应在服务器端调用,详细说明参见服 ...
- 杂项：CSS3
ylbtech-杂项:CSS3 1.返回顶部 1. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型.列表模块. ...
- 装hadoop的第一步，装ubuntu并换源并装jdk
如何装ubuntu,这个自己百度.具体安装网站:http://www.ubuntu.com 我安装的是ubuntu Server版本的,然后是全英文安装.所以它的源自动定位到美国 下面是如何换源的,第 ...
- 『BASH』——Hadex's brief analysis of "Lookahead and Lookbehind Zero-Length Assertions"
/*为节省时间,本文以汉文撰写*/ -前言- 深入学习正则表达式,可以很好的提高思维逻辑的缜密性:又因正则应用于几乎所有高级编程语言,其重要性不言而喻,是江湖人士必备的内功心法. 正则表达式概要(ob ...
- 20140316 window live write 插件 推荐代码高亮插件 构造函数只能用初始化成员列表方式的例子
1.window live write 插件:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html 2.推荐代码高亮插件:W ...
- 《DSP using MATLAB》Problem 8.42
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- mybatis 处理CLOB/BLOB类型数据
BLOB和CLOB都是大字段类型. BLOB是按二进制来存储的,而CLOB是可以直接存储文字的. 通常像图片.文件.音乐等信息就用BLOB字段来存储,先将文件转为二进制再存储进去.文章或者是较长的文字 ...
- jwt、oauth2和oidc等认证授权技术的理解
前言 jwt.oauth2.oidc等,都是和认证授权相关的规范或者解决方案,因此要理解他们,就需要从业务场景的适用性一步步的分析和认识. 一.认证授权业务场景理解 就个人目前的理解来看,一个好的软件 ...
- CSIC_716_20191108【文件的操作，以及彻底解决编码问题的方案】
关于编码的问题: 在平时编写代码,涉及到打开文件时,常常遇到字符编码的报错, 通过总结,得出以下规律 如果在操作过程中涉及到调用文本文档,一定要在文本文档开头申明编码方式(# coding:XXXX ...
- 关于TMDS
https://en.wikipedia.org/wiki/Transition-minimized_differential_signaling TMDS,Transition Minimized ...