百度前端技术学园

# 布局综合练习

# 课程目标

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

# 阅读

# 编码一

分别尝试使用 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 进行布局的场景和方法

# 总结

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

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

# 预告

下一节将是一个有真实设计稿的样式实战练习。

← 来做一个漂亮的网站 →