-
双飞翼布局
2017-02-23 19:14:57双飞翼布局在面试中碰到了这样一题,非常有意思,但也非常基础,然而我却忘了。。。忘了。。。。。。
需求:仅用html+css写出中间内容区域宽度自适应,两边宽度固定的布局,并且要求中间的内容区域要先被渲染。
很明显这是一个经典的三列布局,也就是圣杯布局中的一种,但是注意最后的一个需求,要求中间内容要先被渲染,也就是说我们要将中间的块放到最前面,让其先被浏览器渲染,这种布局方式叫‘双飞翼’,最先是由玉伯提出的,啊~多么优秀的工程师思维啊,不愧是玉伯,在淘宝这种拥有巨量请求的网站,让主题内容先渲染使用户优先看到,这直接就使用户体验提升了不止一个档次,不过淘宝一般两侧也是放广告,笑。。。听说后来玉伯走了,流言调侃:不会是因为让当时的广告没先出来吧,哈哈这只是笑话调侃下而已,大家不要较真~下面开始代码
//doubleWingsLayout.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ width:100%; margin:0; padding:0; } .container{ margin-left:150px; margin-right:200px; } .center{ width:100%; background-color: orangered; height:200px; float: left; } .left{ width:150px; height:180px; float: left; background-color: darkseagreen; margin-left: calc(-100% - 150px); } .right{ width:200px; height:190px; float: right; background-color: cornflowerblue; margin-right:-200px; } </style> </head> <body> <div class="container"> <div class="center">左侧内容</div> <div class="left">主体内容</div> <div class="right">右侧内容</div> </div> </body> </html>
两边的margin值就是两个翼,很形象有木有 0 0,原理的话大家看css的代码就能看懂的了~
收藏数
1,478
精华内容
591
-
hadoop自动化运维工具Ambari应用实践
-
pyinstaller-4.2-py3-none-any.whl
-
Redis数据库入门与使用
-
三维地图GIS大数据可视化
-
去除AutoCAD 教育版戳记 VB.net 源码
-
C4D OC4.0.rar
-
小学校园信息网页模板
-
婚礼婚庆海报介绍网页模板
-
【2021】UI自动化测试Selenium3
-
第3章 入门程序、常量、变量
-
TCP连接状态详解及TIME_WAIT过多的解决方法
-
PHP支付宝微信支付配置教程
-
Jmeter使用
-
ThreadPoolExecutor应用
-
JavaEE框架(Maven+SSM)全程实战开发教程(源码+讲义)
-
SM2椭圆曲线公钥密码算法第1部分:总则.pdf
-
你需要知道的那些go语言json技巧
-
紫色浪漫美容社区网页模板
-
2021-01-22
-
算法导论(基础知识)——编程大牛的必经之路