CSS布局方案之圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title> <style type="text/css">
body {background-color: #ffffff; font-size:14px;}
#hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
.bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
.main {background-color: #03a9f4; color:#ffffff;}
.aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
p {margin:0; padding:20px; text-align: center;} /* 左侧栏固定宽度，右侧自适应 */
.bd-lft {
zoom:1;
overflow:hidden;
padding-left:210px;
}
.bd-lft .aside {
float:left;
width:200px;
margin-left:-100%; /*= -100%*/ position:relative;
left:-210px; /* = -parantNode.paddingLeft */
_left: 0; /*IE6 hack*/
}
.bd-lft .main {
float:left;
width:100%;
} /* 右侧栏固定宽度，左侧自适应 */
.bd-rgt {
zoom:1;
overflow:hidden;
padding-right:210px;
}
.bd-rgt .aside {
float:left;
width:200px;
margin-left:-200px; /* = -this.width */ position:relative;
right:-210px; /* = -parantNode.paddingRight */
}
.bd-rgt .main {
float:left;
width:100%;
} /* 左中右 三栏自适应 */
.bd-3-lr {
zoom:1;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-1 {
float: left;
width:200px;
margin-left: -100%; position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-2 {
float: left;
width:200px;
margin-left: -200px; position:relative;
right: -210px;
} /* 都在左边，右侧自适应 */
.bd-3-ll {
zoom:1;
overflow:hidden;
padding-left:420px;
}
.bd-3-ll .main {
float:left;
width:100%;
}
.bd-3-ll .aside-1 {
float: left;
width:200px;
margin-left: -100%; position:relative;
left: -420px;
_left: 0px; /*IE6 hack*/
}
.bd-3-ll .aside-2 {
float: left;
width:200px;
margin-left: -100%; position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
} /* 都在右边，左侧自适应 */
.bd-3-rr {
zoom:1;
overflow:hidden;
padding-right:420px;
}
.bd-3-rr .main {
float:left;
width:100%;
}
.bd-3-rr .aside-1 {
float: left;
width:200px;
margin-left: -200px; position:relative;
right: -210px;
}
.bd-3-rr .aside-2 {
float: left;
width:200px;
margin-left: -200px; position:relative;
right: -420px;
} </style> </head>
<body> <div id="hd">头部</div> <div class="bd-lft">
<div class="main">
<p>主内容栏自适应宽度</p>
</div> <div class="aside">
<p>侧边栏固定宽度</p>
</div>
</div> <div class="bd-rgt">
<div class="main">
<p>主内容栏自适应宽度</p>
</div> <div class="aside">
<p>侧边栏固定宽度</p>
</div>
</div> <div class="bd-3-lr">
<div class="main">
<p>主内容栏自适应宽度</p>
</div> <div class="aside-1">
<p>侧边栏1固定宽度</p>
</div> <div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-ll">
<div class="main">
<p>主内容栏自适应宽度</p>
</div> <div class="aside-1">
<p>侧边栏1固定宽度</p>
</div> <div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-rr">
<div class="main">
<p>主内容栏自适应宽度</p>
</div> <div class="aside-1">
<p>侧边栏1固定宽度</p>
</div> <div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div> <div id="ft">底部</div> </body>
</html>
CSS布局方案之圣杯布局的更多相关文章
- css实现三栏水平布局双飞翼与圣杯布局
作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- 【布局】圣杯布局&双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- css两列等高布局
布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
随机推荐
- 计划任务中使用NT AUTHORITY\SYSTEM用户和普通管理员用户有什么差别
原文地址:http://www.ynufe.edu.cn/metc/Article/ShowArticle.asp?ArticleID=805 系统管理员会碰到这种问题,为什么在更改系统登录用户pas ...
- LDA-线性判别分析（二）
本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...
- SQLLoader6(一个或多个数据文件按条件导入不同的表)
测试一1.创建表: SQL), col2 )); 表已创建. SQL), col2 )); 表已创建. SQL> COMMIT; 提交完成. 2.数据文件:test.txt A A A B B ...
- magic Ajax使用以及注意事项
以下是引用片段:一.概述 现在Ajax技术正如火如荼的在Internet上发展着.而面对我们之前开发的ASP.NET1.1的Web项目,类似于下拉框等联动也需要啪啪啪的不断刷新,的确影响到了用户 ...
- 基础命名空间：序列化_自定义序列化 System.Runtime.Serialization
( (From Msdn) 自定义序列化是控制类型的序列化和反序列化的过程,通过控制序列化,可以确保序列化兼容性.换而言之,在不中断类型核心功能的情况下,可在类型的不同版本之间序列化和反序列化. 重 ...
- oracle 两个时间相减
oracle 两个时间相减默认的是天数 oracle 两个时间相减默认的是天数*24 为相差的小时数 oracle 两个时间相减默认的是天数*24*60 为相差的分钟数 oracle 两个时间相减默认 ...
- eclipse中默认的提示键
Alt+/:代码提示 Ctrl+/:注释/取消注释 Ctrl+D:删除光标所在行 Ctrl+K:将光标停留在变量上,按Ctrl+K键可以查找到下一个同样的变量 Shift+Ctrl+K:和Ctrl+K ...
- vs2010中的外部依赖项的含义
vs2010中的项目下拉列表下面有外部依赖项,里面显示的文件是你程序中显示包含的头文件所包含的的头文件.比如,你的main函数里面包含了windows.h头文件,而windows.h头文件又包含其他头 ...
- npm install Error：EPROTO: protocol error, symlink '../mime/cli.js' -> '/vagrant/src/nodejs/node_modules/express/node_modules/send/node_modules/.bin/mime'
我在ubuntu上使用npm安装依赖是出现下面错误: npm ERR! Linux 3.13.0-101-genericnpm ERR! argv "/usr/bin/nodejs" ...
- FSG压缩壳和ImportREC的使用 - 脱壳篇05
FSG压缩壳和ImportREC的使用 - 脱壳篇05 让编程改变世界 Change the world by program FSG这个壳可以说是有点儿不守妇道,尼玛你说你一个压缩壳就实现压缩功能得 ...