CSS布局

单列布局

html中,header需要包裹在一个提供背景色的header-container的容器中,footer也需要包裹在一个提供背景色的footer-container的容器中,然后header和footer分别设置Margin:0 auto水平居中,然后设置max-width等于内容区的max-width

单列布局

三栏布局

  1. 圣杯布局
    html中,主内容放在最前,侧边栏放在之后,给他们分别设置浮动,然后侧边栏那设置分别设置负margin放到主内容两侧,然后给包裹容器设置padding,预留出两侧留给侧边栏的位置,最后给侧边栏设置relative,分别移动到左侧和右侧
    圣杯布局

  2. 三栏布局

html中,侧边栏放在前面,主内容放在侧边栏之后,侧边栏设置浮动属性,一左一右,内容在设置margin留出左右侧侧边栏空间
三栏布局

  1. 双飞翼布局

html中,主内容放在最前,保证优先渲染,侧边栏放到主内容之后,主内容和侧边栏分别设置浮动,按照圣杯布局的css设置把侧边栏放到对应的位置,然后,给主内容再嵌套一个div,设置此div的左右margin,留出侧边栏的位置
双飞翼布局

实现如下效果

风景如画效果

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

推荐阅读更多精彩内容

  • CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...
    web前端学习阅读 1,614评论 1 38
  • 目录 常用居中垂直居中水平居中垂直水平居中 单列布局 双列&三列布局 常用居中 垂直居中 单行文本垂直居中 图片垂...
    听城阅读 449评论 1 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 前言 因为要在团队内作一次技术分享,想了几个题目,最后还是决定系统总结一下我在CSS布局这方面的知识。一是这个题目...
    Samhanx阅读 638评论 0 6
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,164评论 0 59