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的弹性盒模型没有涉及到,现在看来确实是自己 ...
随机推荐
- hdu 2825 Wireless Password(ac自己主动机&dp)
Wireless Password Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- Android系统匿名共享内存Ashmem（Anonymous Shared Memory）在进程间共享的原理分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6666491 在前面一篇文章Android系统匿 ...
- PHP学习笔记三十七【http】
<?php print_r($_SERVER); //$_SERVER预编译变量[数组]输出请求报文,注意大小写 echo "<br/>"; foreach($_ ...
- 我的django之旅（一）
我的django之旅(一) 标签(空格分隔):django web 1.检验我们的python和django版本 liao@spring ~ $ python --version Python 2.7 ...
- PHP--变量部分知识点
PHP全局变量 PHP全局变量作用域不同与C,在函数内部不可以使用全局变量,要在函数内部使用全局变量需要,global $var或者使用超全局变量数组$GLOBALS['var']. 静态变量 PHP ...
- mysql install
./scripts/mysql_install_db --user=mahao01 --basedir=/home/mahao01/local/mysql --datadir=/home/mahao0 ...
- Tomcat学习笔记 - 错误日志 - Tomcat安装版安装后第二次启动后闪退（转）-- javac不是内部或外部命令 -- 配置java环境教程
如果安装成功并且安装完成第一次启动是成功的,第二次就闪退的话,原因之一是没有配置java的环境.在网上找的配制方法有很多错误,测试javac命令时候会提示不是内部或外部命令,找到一个正确的教程.如下, ...
- struts2 0day漏洞
描述 Apache Struts2 近日出现一个0day漏洞,该漏洞在修补CVE-2014-0050和2014-0094两个安全漏洞处理不当,分别可以导致服务器受到拒绝服务攻击和被执行恶意代码. 漏洞 ...
- centos源码安装git
因为Centos上yum安装的话可能版本比较低,使用中会有一些难以预料的问题出现. 从源代码编译安装方法: #Centos执行: yum install curl-devel expat-devel ...
- 阿里巴巴集团2013实习生招聘技术类笔试题（B）
一.单向选择题 1.在常用的网络协议中,___B__是面向连接的.有重传功能的协议. A. IP B. TCP C. UDP D. DXP 2.500张骨牌整齐地排成一行,按顺序编号为1.2.3... ...