WEB前端教程：布局综合练习

首先对前几节的内容进行复习。通过大量练习，来学习布局的各种方式。

课程目标

首先对前几节的内容进行复习。通过大量练习，来学习布局的各种方式。

分别尝试使用 float、position、flex 或者 grid 来实现如下需求：

要求：

参考设计稿 (opens new window)实现如下 HTML 页面及 CSS 样式：

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

把你的代码提交到 Github，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

这两天的内容稍多，请反复确认你是否掌握了以下概念

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等