基础布局理解

如果您已经完成了本模块，那么您已经掌握了当前 CSS 布局以及旧版 CSS 的基本知识。本任务将通过开发一个使用各种技术的简单网页布局来测试您的某些知识。

先决条件 在尝试本评估之前，您应该已经完成本模块中的所有文章。
目标 测试对 CSS 布局方法的理解，包括 flexbox、网格、浮动和定位。

起点

您可以从这里下载 HTML、CSS 和一套六张图像。

将 HTML 文档和样式表保存到计算机上的目录中，并将图像添加到名为 images 的文件夹中。在浏览器中打开 index.html 文件应该会显示一个具有基本样式但没有布局的页面，这应该与下面的图像类似。

Starting point of the layout task. The elements are not laid out neatly. There is a website title, above a black nav bar with 5 links flush left, followed by the blog post title and post content. Between the blog title and blog content there is a photo that is flush left.

此起点包含浏览器在正常流中显示的布局的所有内容。

或者，您可以使用在线编辑器，例如CodePen、JSFiddle 或 Glitch。如果您使用在线编辑器，则需要上传图像并替换 src 属性中的值以指向新图像位置。

注意：如果您遇到困难，可以联系我们中的任何一个沟通渠道。

项目简要

您已获得一些原始 HTML、基本 CSS 和图像 — 现在您需要为设计创建一个布局。

您的任务

您现在需要实现您的布局。您需要完成的任务是

  1. 将导航项目以一行显示，项目之间留有等量的空间。
  2. 导航栏应随着内容滚动，当它到达视窗顶部时应固定在视窗顶部。
  3. 文章中的图像应该有文本环绕在它周围。
  4. <article> 和 <aside> 元素应该显示为两列布局。列应为灵活大小，因此如果浏览器窗口缩小，列将变窄。
  5. 照片应该显示为两列网格，图像之间留有 1 像素的间隙。

提示和技巧

您无需编辑 HTML 即可实现此布局，您应该使用的技术是

  • Flexbox
  • 网格
  • 浮动
  • 定位

您可以通过多种方式完成其中一些任务，而且通常没有单一正确或错误的方式。尝试几种不同的方法，看看哪种效果最好。在您尝试的过程中做笔记。

示例

以下屏幕截图显示了设计完成的布局示例

Finished layout task website. The elements are laid out neatly. There is a website title, above a black nav bar containing 5 equally spaced links. Below the nav bar, there are two sections. On the left there is a blog post: A blog post title followed by the post content. The blog content wraps around a photo that is flush left. On the right side there is a 'photography' title about a group of images laid out in a two-image wide grid.