CSS 圣杯布局 / 双飞翼布局的实现
时间:2019-04-15
本文章向大家介绍CSS 圣杯布局 / 双飞翼布局的实现,主要包括CSS 圣杯布局 / 双飞翼布局的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局,
这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了,
就是两边定宽, 中间自适应 的 布局
1 , 圣杯布局
<!--三栏布局--> <header>三栏布局</header> <div class="container"> <div class="center column">center</div> <div class="left column">left</div> <div class="right column">right</div> </div> <footer>footer</footer>
首先HTML结构是这样的,因为要保证中间的结构先渲染, 所以 center 要放在 最前面 。
*{ margin: 0; padding: 0; } body{ min-width: 700px; } header , footer{ background-color: antiquewhite; text-align: center; } footer{ clear: both; } .container{ height: 200px; } .container .column{ float: left; position: relative; height: 100%; } .center{ width: 100%; background-color: tomato; } .left{ width: 200px; background-color: aqua; } .right{ width: 200px; background-color: chartreuse; }
先让它们浮动, 并给left 和 right 一个 固定 宽度, center宽度100%,
footer清除浮动流, 结果变成上面这样 。
然后我们要把 left 和 right 放上去
先把left 放上去 :
.left{ width: 200px; background-color: aqua; margin-left: -100%; }
加上 一个 margin-left 为 负的自己的宽度 , 变成了这样:
我们可以看到 center的文字被 left 盖住了 , 所以给container加一个padding
.container{ height: 200px; padding: 0 200px; }
变成了这样:
由于加了padding, 内容区域变小, left 也跟过来了, 所以要给left设置一个left:
.left{ width: 200px; background-color: aqua; margin-left: -100%; left: -200px; }
这样left 就到最左边了, center文字也出来了, 同理right
.right{ width: 200px; background-color: chartreuse; margin-left: -100%; right: -100%; }
最终效果:
2 双飞翼布局(始于淘宝的UED)
和圣杯布局差不多, 不同之处在于它们处理中间部分被两边盖住的方法不同
双飞翼布局给center加了一个inner center ,而不是在最外层加container
HTML:
<header>双飞翼布局</header>
<div class="center column">
<div class="inner-center">
center
</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
<footer>footer</footer>
然后 给 inner-center 加margin (只列出关键代码) :
.center .inner-center{ margin-left: 200px; margin-right: 200px; height: 100%; background-color: tomato; } .left{ width: 200px; background-color: aqua; margin-left: -100%; } .right{ width: 200px; background-color: chartreuse; margin-left: -200px; }
最终效果和圣杯布局一样。。。。。。
- 13(01)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- thymeleaf模板引擎调用java类中的方法(附源码)
- 由hugepage设置导致的数据库事故(r4笔记第28天)
- 判断js引擎是javascriptCore或者v8
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- 同样的sql执行结果不同的原因分析 (r4笔记第27天)
- 情感分析的新方法,使用word2vec对微博文本进行情感分析和分类
- 垂直属性
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)
- 13(02)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答
- Java开源博客My-Blog之mysql容器重复初始化的严重bug修复过程
- 负margin的原理以及应用
- 关于exp/imp的总结学习(r4笔记第26天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 《剑指offer》04:替换空格
- 《剑指offer》05: 从尾到头打印链表
- 《剑指offer》第六天:重建二叉树
- Android | 《看完不忘系列》之Glide
- Android | 资源冲突覆盖的一些思考
- 如何获取流式应用程序中checkpoint的最新offset
- Spark之离线统计热点城市信息
- 使用OpenCV实现图像增强
- typescript基础篇(4):函数
- 这样的奇技淫巧,劝你不用也罢
- 一文详解设备ID的那些事儿
- Ansible搭建hadoop-3.1.3高可用
- Android | xml和view的那些事
- Android | Glide细枝篇
- 从源代码编译安装 MonoDevelop 记录