学习前端布局的干货及实践

来源于百度前端技术学院的整理，如若侵权必删。

阅读

MDN 定位
MDN 定位实战
MDN Flexbox
学习CSS布局
CSS布局(三) 布局模型
CSS布局(四) Float
CSS布局(五) 网页布局方式
CSS布局(六) 对齐方式
七种实现左侧固定，右侧自适应两栏布局的方法
圣杯布局
双飞翼布局
圣杯布局和双飞翼布局
CSS深入理解流体特性和BFC特性下多栏自适应布局
三种三栏网页宽度自适应布局方法

编码

分别尝试使用Float、Position或者Flexbox来实现如下需求：

实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化
要求：

每一个需求都尽可能多地用多种方式来实现

编码

参考如下设计稿实现HTML页面及CSS样式：链接: https://pan.baidu.com/s/1IndqG9nanVhKxwysibZZRg 密码: vfs6

设计稿描述：

设计稿分为头部，中间的Banner，主导航，内容区域，底部
头部区域为100%宽的一个深色背景，头部中间有一块960px的定宽居中区域，里面包括了左边的Logo和右上角导航
Banner为100%宽的区块，中间右下方有banner轮显的当前图片数字的示例，其中正在显示的图片对应的数字有特殊样式（注意不需要实现轮显banner的业务逻辑，只是按照设计稿做静态样式）
主导航区域，有一个100%宽的灰色线条，线条之上，在中间960px区域是导航菜单，当前正在浏览页对应的菜单有特殊样式
主要内容区域，宽度为960px，里面每个内容都有至少80px的padding，每一个内容的宽度均为自适应，可以使用flex布局