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

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

阅读

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布局

你可能感兴趣的:(HTML)