学以致用,实现几个小demo

1.预览链接:

2.预览链接:

3.预览链接

4.预览链接:

5.预览链接

实现圣杯布局

思路:三者的包裹容器设置一个左右padding来装下左边的aside和ad,而main设置浮动,宽度为100%,这样他就处在中间并且宽度自适应了,将aside也设置为浮动,然后margin-left:-100%,他正好跑到了处在中间main的左上角,然后给他设置position:relative,他就正好处在浏览器左上角了,而ad设置为浮动,然后margin-left:-150px就回到了main的右上角,然后同理,设置position:relative就在浏览器右上角了
圣杯布局

实现双飞翼布局

思路:main设置浮动,宽度为100%,并且给它加一个子元素,给这个子元素设置一个左右margin,aside设置margin-left:-100%回到浏览器左侧,且设置为浮动,ad设置margin-left:adWidth,float:left,回到浏览器右侧

总结一下:双飞翼布局是利用main的子元素的左右margin,而圣杯布局是利用main的父元素的左右padding

双飞翼布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...
    web前端学习阅读 1,629评论 1 38
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,181评论 0 59
  • 我与你的沉默 远过我影子 和你影子的沉默 至少 影子是黑夜 藏着我们的歌 我们背离了所有的光 黑夜成全了我们 我向...
    孑然的瓜阅读 240评论 6 4
  • 在创建了一个实用的应用程序之后,我们可能想将其与他人分享。其中一种方式就是创建一个可以从网站上下载的二进制文件。 ...
    XLsn0w阅读 302评论 0 2