html圣杯布局,css圣杯布局和双飞翼布局
双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应。
圣杯布局
html结构
css
先写出大概的样式.article{ height: 300px; padding: 0 200px;
}.article .left{ width: 200px; height: 100px; background: blue; float: left;
}.article .right{ width: 200px; background: #ccc; height: 100px; float: right;
}.article .center{ background: yellow; width: 100%; height: 100%; float: left;
}
现在的布局是这样的
image.png
在.left中添加margin-left: -100%;
在.right中添加margin-left: -200px;
布局就变成了
image.png
最后,在.left中添加position: relative;
left: -100%;
在.right中添加position: relative;
right: -200px;
大功告成
image.png
完整代码html>
圣杯布局
.article{ height: 300px; padding: 0 200px;
} .article .left{ width: 200px; height: 100px; background: blue; float: left; position: relative; left: -200px; margin-left: -100%;
} .article .right{ width: 200px; background: #ccc; height: 100px; float: right; position: relative; right: -200px; margin-left: -100%;
} .article .center{ background: yellow; width: 100%; height: 100%; float: left;
}
双飞翼布局
双飞翼布局是在圣杯布局基础上改的
html结构改成了
css结构改成了.article{ height: 300px; overflow: hidden;
}.article .left{ width: 200px; height: 100px; background: blue; float: left; /*position: relative;
left: -200px;*/
margin-left: -100%;
}.article .right{ width: 200px; background: #ccc; height: 100px; float: left; /*position: relative;
right: -200px;*/
margin-left: -200px;
}.article .center{ background: yellow; width: 100%; height: 100%; float: left;
}.center .inner{ margin-left: 200px; margin-right: 200px;
}
页面是这样的
image.png
因为高度不一样所以会显得很难看,要想不固定高度,加上以下代码.center,.left,.right{ padding-bottom: 9999px; margin-bottom: -9999px;
}
大功告成
image.png
完整代码html>
双飞翼布局
.article{ height: 300px; overflow: hidden;
} .article .left{ width: 200px; height: 100px; background: blue; float: left; /*position: relative;
left: -200px;*/
margin-left: -100%;
} .article .right{ width: 200px; background: #ccc; height: 100px; float: left; /*position: relative;
right: -200px;*/
margin-left: -200px;
} .article .center{ background: yellow; width: 100%; height: 100%; float: left;
} .center .inner{ margin-left: 200px; margin-right: 200px;
} .center,.left,.right{ padding-bottom: 9999px; margin-bottom: -9999px;
}
作者:我竟无言以对_1202
链接:https://www.jianshu.com/p/cfed3eaa19fa
html圣杯布局,css圣杯布局和双飞翼布局相关推荐
- CSS中经典的双飞翼布局(
笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: ...
- css 列 布局,CSS二列三列布局
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法 二列&三列布局: image.png 二列布局的特征通常是侧栏固定宽度,主栏自适应宽度 三列布局的特征通常 ...
- html中grid布局,CSS:玩转grid布局
grid介绍 针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法.不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,是一个基于 ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- html添加靠左的图片,div 居左靠左布局 CSS居左靠左布局
DIV居左靠右显示篇 DIV靠右居左需要CSS样式单词为CSS浮动float,设置float:left即可实现DIV盒子居左显示. 小例: 为了观察DIV是否靠左显示,我们设置其css宽度为300px ...
- HTML中的div怎么左中右布局,CSS 之 div 左中右布局
无标题文档 #header{ width:780px;height:80px;background:#069;margin:0 auto; } #box { width:780px; margin:0 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
- 双飞翼HTML圣杯布局,Web前端:CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- [css] 圣杯布局 双飞翼布局
文章目录 三栏式布局 圣杯布局 方法1:使用float布局框架 , 用margin为负值 , position: relative定位 分析: 代码: 缺点 方法2:calc 方法3: flex布局 ...
最新文章
- deeplearning模型分析
- 首次证明:牵手就能同步脑电波,还能缓解疼痛
- MySQL 5.5单实例 编译安装
- Python 中的 sys.argv 用法
- JUnit4测试框架设计与实现
- 30年来我只坚持三件事
- Python的enumerater
- django-模型类字段类型
- 函数返回字符串指针C语言,C语言:利用指针和函数调用编写字符串拷贝函数strcpy...
- 2019 ChinaJoy:游戏出海成热点
- python从入门到精通需要多久-Python从入门到精通只需要一个月就够了!
- 现有产品的三种发展战略
- 13.节点操作上,下
- 杰奇小说2.3独家定制版淡绿唯美模板自动采集关关采集器带WAP
- js中this指向学习总结
- i310100f和i310105f有什么区别 i3 10100f和i3 10105f 选哪个好
- R 一行代码出Cox回归模型的表格
- 图片旋转90度解决的方法
- CSS实现DIV的水平与垂直居中
- android手机连nas,安卓手机照样行 NAS存储器大盘点_群晖 USB Station 2_移动存储新闻-中关村在线...
热门文章
- Backlight二三事(1)——pwm频率适配
- s7-200软件怎么测试,S7 200 测速程序是否正确请高手指导
- 微信支付(2)---测试用例
- Java从指定URL下载文件并保存到指定目录
- Android 开发 17 年 5 月份面试问题总结(二)
- RPA机器人有哪三大优势?
- JavaScript语言精粹--读书笔记三之replace()与正则
- 树莓派python3的opencv下载(编译失败第六步必看)
- import ... from和import {} from 的区别
- linux手写数字识别,mnist手写数字识别与图片预处理