WEB前端教程：布局综合练习
首先对前几节的内容进行复习。通过大量练习，来学习布局的各种方式。
课程目标
首先对前几节的内容进行复习。通过大量练习，来学习布局的各种方式。
阅读
- 布局概述(opens new window)
- MDN 定位(opens new window)
- MDN 定位实战(opens new window)
- MDN Flexbox(opens new window)
- 学习 CSS 布局(opens new window)
- CSS 布局(三) 布局模型(opens new window)
- CSS 布局(四) float(opens new window)
- CSS 布局(五) 网页布局方式(opens new window)
- CSS 布局(六) 对齐方式(opens new window)
- 七种实现左侧固定，右侧自适应两栏布局的方法(opens new window)
- 圣杯布局(opens new window)
- 双飞翼布局(opens new window)
- 圣杯布局和双飞翼布局(opens new window)
- CSS 深入理解流体特性和 BFC 特性下多栏自适应布局(opens new window)
- 三种三栏网页宽度自适应布局方法(opens new window)
- Centering in CSS: A Complete Guide(opens new window)
编码一
分别尝试使用 float、position、flex 或者 grid 来实现如下需求：
- 实现一个两栏布局，左侧占 30%宽度，右侧占 70%宽度
- 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
- 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
- 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
- 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化
要求：
- 每一个需求都尽可能多地用多种方式来实现
编码二
参考设计稿 (opens new window)实现如下 HTML 页面及 CSS 样式：
- 设计稿分为头部，中间的 Banner ，主导航，内容区域，底部
- 头部区域为 100% 宽的一个深色背景，头部中间有一块 960px 的定宽居中区域，里面包括了左边的 Logo 和右上角导航
- Banner 为 100% 宽的区块，中间右下方有 banner 轮显的当前图片数字的示例，其中正在显示的图片对应的数字有特殊样式（注意不需要实现轮显 banner 的业务逻辑，只是按照设计稿做静态样式）
- 主导航区域，有一个 100%宽的灰色线条，线条之上，在中间 960px 区域是导航菜单，当前正在浏览页对应的菜单有特殊样式
- 主要内容区域，宽度为 960px，里面每个内容都有至少 80px 的 padding，每一个内容的宽度均为自适应，可以使用 flex 布局
提交
把你的代码提交到 Github，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。
自测问题
这两天的内容稍多，请反复确认你是否掌握了以下概念
- position 相关概念及使用 postion 进行布局的场景和方法
- Flexbox 相关概念及使用 Flexobx 进行布局的场景和方法
- grid 相关概念及使用 grid 进行布局的场景和方法
总结
找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
- 日期，今天的学习总用时，今天学习的目标是什么，是否达成
- 哪些东西今天了解得比较透彻，说说自己的理解
- 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
- 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-18 15:13
- 阅读 ( 484 )
- 分类：WEB前端开发
