博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
圣杯布局
阅读量:6939 次
发布时间:2019-06-27

本文共 1084 字,大约阅读时间需要 3 分钟。

CSS布局终极方案之--圣杯布局(兼容IE6+,现代浏览器)


经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

  1. 三列布局,中间宽度自适应,两边定宽

  2. 中间栏要在浏览器中优先展示渲染

  3. 允许任意列的高度最高

  4. 要求只用一个额外的DIV标签

  5. 要求用最简单的CSS、最少的HACK语句

效果图:

CSS 和 DOM 代码如下:

    
圣杯布局
头部

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

底部

转载地址:http://absnl.baihongyu.com/

你可能感兴趣的文章
mysql 查寻数据文件存放路径
查看>>
activemq的安装与使用
查看>>
SpringMVC系列(九)自定义视图、重定向、转发
查看>>
PAT 1029 Median
查看>>
分析内存java
查看>>
20050610:幸运奖你个头
查看>>
win下硬盘装ubuntu 算非用到wubi
查看>>
php memcache保存session的一个设置误区
查看>>
简单工厂模式
查看>>
nginx(一)
查看>>
mysql 5.7开启并行复制
查看>>
DataSnap侦听端口动态设置问题
查看>>
MVC 发布到IIS中的配置方法
查看>>
(二)位运算,计算机不会做加法
查看>>
Xcode 4.2.* 常用快捷键 + Mac下常用快捷键(带图)
查看>>
PHP中关于PDO的使用
查看>>
关于Apache配置虚拟主机后在局域网中让其他电脑访问
查看>>
IEnumerable、IEnumerator、IQuerabled的区别
查看>>
python工厂方式创建list
查看>>
python学习笔记1
查看>>