`
fuhao_987
  • 浏览: 63966 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

圣杯布局的实践

阅读更多
原文地址:http://www.alistapart.com/articles/holygrail
实践了一下;
<div id=”header”></div>
<div id=”container”>
		<div id=”center”></div>
     <div id=”left”></div>
     <div id=”right”></div>
</div>
<div id=”footer”></div>

CSS:
        body{min-width:550px;margin:0px;padding:0px}
	#container{
		padding-left:200px;
		padding-right:150px;
	}
	#container .column{
		position:relative;
		float:left;
	}
	#center{
		width:100%;
		background:#ccc;
	}
	#left{
		width:200px;
		background:red;
		margin-left:-100%;
		right:200px;
	}
	#right{
		width:150px;
		background:blue;
		margin-right:-150px;
	}
	#footer{
		clear:both;
		background:#000;
	}
        /*** IE6 Fix***/
	* html #left{left:150px;}
	/*** IE7 Fix***/
	*:first-child+html #left{left:150px}


这样能实现最简单的三栏布局,并且三栏的高度自适应,根据里面的内容来定。最后是对IE6和IE7的修复.

如果想实现三栏一样高,并且加上padding,使得页面更加美观,那么需要这样写css。
body{min-width:630px;margin:0px;padding:0px}
	#container{padding-left:200px;padding-right:190px;overflow:hidden;}
	#container .column{padding-bottom:20010px;margin-bottom:-20000px;
position:relative;float:left;}
	#center{padding:10px 20px;width:100%;background:#ccc;}
	#left{width:180px;padding:0 10px;background:red;margin-left:-100%;right:240px;}
	#right{width:130px;padding:0 10px;background:blue;margin-right:-190px;}
	#footer{clear:both;background:#000;}
    /*** IE6 Fix***/
	* html #left{left:150px;}
	* html body{overflow:hidden;}
	* html #footer-wrapper{
		float:left;
		position:relative;
		width:100%;
		padding-bottom:10010px;
		margin-bottom:-10000px;
		background:#fff
	}
	/*** IE7 Fix***/
	*:first-child+html #left{}
	*:first-child+html body{overflow:hidden;position:relative}
	*:first-child+html #footer-wrapper{
		float:left;
		position:relative;
		width:100%;
		padding-bottom:10010px;
		margin-bottom:-10000px;
		background:#fff;
	}


ie6,ie7下总是有很多问题需要单独解决。。
这也只是实践 ,还有很多问题没搞明白,最后IE7的修复是自己实践的结果。
分享到:
评论

相关推荐

    common-css-layout:圣杯布局&&双飞翼布局&&BFC布局

    "common-css-layout"这个主题涉及到三种常见的CSS布局模式:圣杯布局(Holy Grail Layout)、双飞翼布局以及BFC(Block Formatting Context)布局。这三种布局方式在不同场景下有各自的优缺点,掌握它们能帮助开发者...

    21种经典的CSS布局

    10. **圣杯布局**:这种布局将页面分为三部分:左侧栏、右侧栏和主要内容,且在页面加载时始终保持两侧栏的宽度不变。 11. **双飞翼布局**:双飞翼布局是一种解决圣杯布局问题的变体,通过负margin和浮动元素实现,...

    practice.rar

    本资源"practice.rar"包含了四种经典的布局方案的代码示例,分别是圣杯布局、双飞翼布局、Flex布局以及定位布局。由于CALC方法在此处未被提及,我们不会对其进行详细讨论。以下是对这四种布局方式的详细介绍: 1. *...

    css版式布局 网页布局

    6. 圣杯布局:两侧固定宽度,中间内容区自适应。 7. 菜单下拉布局:常用于导航菜单,鼠标悬停时显示子菜单。 8. 滑动面板布局:用于创建可滑动的内容区域。 9. 弹出窗口布局:用于对话框、表单或通知。 10. ... ...

    圣杯:用于构建网格的Sass mixins

    在前端开发领域,布局设计是至关重要的,而“圣杯布局”(Holy Grail Layout)是一种常见的网页布局...通过研究和实践圣杯布局的Sass实现,开发者可以提升自己的布局设计能力,并更好地适应不断变化的前端开发环境。

    CSS+DIV网页布局技术教程.rar

    - 三栏布局:包括圣杯布局和双飞翼布局 - 自适应导航栏:菜单在不同屏幕尺寸下的表现 - 图片响应式处理:使用`max-width: 100%`和`object-fit` 6. **优化与性能** - CSS Reset:消除浏览器默认样式差异 - CSS ...

    Div+CSS 布局大全

    - 创建常见的网页布局,如两列布局(固定宽度+自适应宽度)、三列布局(圣杯布局、双飞翼布局)等。 - 优化导航栏、轮播图、悬浮按钮等常见组件的Div+CSS实现。 以上是Div+CSS布局大全中涉及的核心知识点,掌握...

    《css效果图收集》一些好看的css效果图

    6. **浮动定位实现圣杯布局**:圣杯布局是一种经典的网页布局模式,旨在实现三栏布局,两侧栏宽度固定,中间栏宽度自适应。CSS的浮动(float)和负边距(negative margin)技术常用于实现这种布局,尽管现代布局方法...

    html/css教程

    这个教程可能会涵盖流体布局、网格系统、响应式设计以及一些常见的布局模式,如“圣杯布局”和“双飞翼布局”。掌握DIV+CSS布局技巧是提升网页设计专业性的关键步骤,因为这能让你创建出既美观又适应不同屏幕尺寸的...

    DIV+CSS

    1. **网页布局**:例如,常见的布局模式有“圣杯布局”和“双飞翼布局”,都是基于DIV+CSS实现的复杂网页结构。 2. **交互设计**:通过CSS动画和过渡效果,可以为网页元素添加动态效果,提升用户体验。 **七、学习...

    前端面试题面试常见问题集合.pdf_面试资料下载

    6. **圣杯布局和双飞翼布局**:这两种布局都是为了实现页面的三列布局,中间内容区域宽度自适应,两侧固定宽度。圣杯布局通过左右两侧的负margin实现,双飞翼布局则通过设置左右两侧的margin-left为负值实现。 7. *...

    HTML开发入门学习笔记分享.docx

    9. 其他布局方式包括960栅格系统,适用于响应式设计的圣杯布局、双飞翼布局,瀑布流布局常用于电商展示,WIN8-Grid类似Windows 8的网格布局,自适应布局和弹性布局关注移动端适配,而响应式布局则是根据设备屏幕尺寸...

    CSS 特效+实例 供大家学习

    10. **CSS布局技巧**:如圣杯布局、双飞翼布局等经典布局模式的实现。 通过学习和实践这些CSS特效和实例,你可以掌握如何创建美观、动态且响应式的网页。记得不断尝试、修改和优化代码,将理论知识转化为实际操作...

    Android-SimpleRecyclerView一个RecyclerView扩展用于轻松构建列表更多功能

    3. **多种布局管理器**:RecyclerView默认提供了线性布局和网格布局,但SimpleRecyclerView可能扩展了更多布局,如瀑布流布局、圣杯布局等,以满足不同设计需求。 4. **动画支持**:在添加、删除或更新列表项时,...

    前端面试宝典V3.0.pdf

    - 双飞翼布局和圣杯布局是实现页面响应式和灵活布局的高级技巧,通常用于创建主内容区域和侧栏。 5. CSS选择器与优先级: - 选择器优先级由ID选择器、类选择器、标签选择器和内联样式决定,权重计算决定了哪些...

    css实现两栏固定中间自适应的方法

    圣杯布局是一种经典的三栏布局解决方案,它确保了中间栏始终充满可用宽度。中间栏被放在最前面,外部有一个包裹容器。CSS代码如下: ```css #container { position: relative; } .center_wrap, .left, .right ...

    面试考点全面总结(自己总结的)1

    - **圣杯布局与双飞翼布局**:这两种布局方法均适用于左右固定宽度、中间自适应宽度的布局需求。它们通常采用负边距来实现。 - **浮动元素的清除**: - 可以使用 `:after` 伪类来清除浮动。例如,通过在父元素中...

    grail-css:简单,没有胡扯CSS助手,重置和实用程序

    【描述】"圣杯CSS" 的概念源自于经典的前端布局模式——"圣杯布局",它旨在解决页面中主要内容区域与侧边栏的对齐问题,实现三列布局,并保持内容区域的垂直居中。grail-css 提供了类似的理念,但更专注于提供基础...

    塔罗牌功能以与牌面意义布阵方法.doc

    布阵方式多种多样,每一种布局都有其特定的解读方式和适用场景。例如,最为常见的“凯尔特十字”布阵方式,适用于深入探究问题的各个方面,包括问题的本质、目前的状况、过去的影响、潜在的挑战、未来的可能性以及...

Global site tag (gtag.js) - Google Analytics