blob: bd0ea5662f843d9a6e183696838c0179ee3545fe (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: Fundamental Layout Comprehension
slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
---
<div>{{LearnSidebar}}</div>
<p class="summary">如果您已经完成了这个模块的学习，那么您将已经学习了今天进行CSS布局以及使用旧的CSS所需的基本知识。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">任务需知:</th>
<td>
<p>在尝试此评估之前，您应该已经阅读了本模块中的所有文章。</p>
</td>
</tr>
<tr>
<th scope="row">任务目标:</th>
<td>
<p>测试您对本单元所涵盖的基本布局技能的理解与掌握应用。</p>
</td>
</tr>
</tbody>
</table>
<h2 id="项目简介">项目简介</h2>
<p>我们已经为你提供了一些原始的html、基本的css文件和图像——现在你需要设计一个跟下面图片相似的布局页面。<img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
<h3 id="基本步骤">基本步骤</h3>
<p>你可以在这下载基本的html css和图片素材 <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">here</a>.</p>
<p>将HTML文档和css保存到你自己计算机的目录中，并将图像添加到名为images的文件夹中，在浏览器中打开index.html文件应该会给您提供一个具有基本样式但没有布局的页面，该页面应该类似下面所示的图像。</p>
<p>此页面开始于浏览器在正常流中显示的布局的所有内容。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
<h3 id="目标">目标</h3>
<p>你需要实现你自己的布局。下面是你应该完成的目标：</p>
<ol>
<li>在一行中显示导航选项，并且选项之间拥有相同的空间。</li>
<li>导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。</li>
<li>文章内的图片应该被文本包围。</li>
<li>{{htmlelement("article")}} 与 {{htmlelement("aside")}} 元素应该为双列布局。它们的列尺寸应该是弹性的，以便在浏览器窗口收缩得更小的时候能够变窄。</li>
<li>照片应该以有 1px 间隔的两列网格显示出来。</li>
</ol>
<p>在实现布局的过程中你不需要修改 HTML，下面是你应该使用的技术：</p>
<ul>
<li>Positioning</li>
<li>Float</li>
<li>Flexbox</li>
<li>CSS Grid Layout</li>
</ul>
<p>你能够用好几种方法来实现这些目标，完成一件事的方法并不只有一个。尝试不同的方式，并且看看哪个最有效。尝试之后写下笔记，你可以在本练习的帖子中或者 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 频道讨论你实现它们的方式。</p>
<h2 id="评估">评估</h2>
<p> </p>
<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> 或 <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> 的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>
<p> </p>
|
