Fundamental Layout Comprehension

跳转到:

翻译正在进行中。

如果您已经完成了这个模块的学习,那么您将已经学习了今天进行CSS布局以及使用旧的CSS所需的基本知识。

任务需知:

在尝试此评估之前,您应该已经阅读了本模块中的所有文章。

任务目标:

测试您对本单元所涵盖的基本布局技能的理解与掌握应用。

项目简介

我们已经为你提供了一些原始的html、基本的css文件和图像——现在你需要设计一个跟下面图片相似的布局页面。

基本步骤

你可以在这下载基本的html css和图片素材 here.

将HTML文档和css保存到你自己计算机的目录中,并将图像添加到名为images的文件夹中,在浏览器中打开index.html文件应该会给您提供一个具有基本样式但没有布局的页面,该页面应该类似下面所示的图像。

此页面开始于浏览器在正常流中显示的布局的所有内容。

Your tasks

You now need to implement your layout. The tasks you need to achieve are:

  1. To display the navigation items in a row, with an equal amount of space between the items.
  2. The navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.
  3. The image that is inside the article should have text wrapped around it.
  4. The <article> and <aside> elements should display as a two column layout. The columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.
  5. The photographs should display as a two column grid with a 1 pixel gap between the images.

You will not need to edit the HTML in order to achieve this layout and the techniques you should use are:

  • Positioning
  • Float
  • Flexbox
  • CSS Grid Layout

There are a few ways in which you could achieve some of these tasks, and there often isn’t a single right or wrong way to do things. Try a few different approaches and see which works best. Make notes as you experiment, and you can always discuss your approach in the discussion thread for this exercise or in the #mdn IRC channel.

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

文档标签和贡献者

此页面的贡献者: littlemonkeycc
最后编辑者: littlemonkeycc,