blob: 98ef5fb5b08d3e3cf5ff2bf5c3785135649288eb (
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
|
---
title: 技能测试：图片和表格元素
slug: Learn/CSS/Building_blocks/Images_tasks
translation_of: Learn/CSS/Building_blocks/Images_tasks
---
<div>{{LearnSidebar}}</div>
<p>该任务的目的是帮助您检查对我们在本课程<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, Media and Form elements</a>(图像，媒体及表格元素）中了解的一些值和单位的理解。</p>
<div class="blockIndicator note">
<p><strong>注意</strong>:您可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a> 之类的在线工具来完成任务可能会更加有所帮助。<br>
<br>
如果你遇到困难，联系我们获得帮助 — 参见页面底部的<a href="#评价以及更多帮助">评价以及更多帮助</a></p>
</div>
<h2 id="任务一">任务一</h2>
<p>在此任务中，您有一张溢出盒子的图像。 我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。</p>
<p><img alt="An image in a box" src="https://mdn.mozillademos.org/files/17143/mdn-images-object-fit.png" style="height: 384px; width: 746px;"></p>
<p>在下面的例子中看看你能否能符合上面的图片</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}</p>
<div class="blockIndicator note">
<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/object-fit-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p>
</div>
<h2 id="任务二">任务二</h2>
<p>在此任务中，您会获得一个简单的表格。 您的任务是对该表单的外观进行以下更改：</p>
<ul>
<li>使用属性选择器定位.myform中的<strong>搜索(search)</strong>字段和按钮。</li>
<li>使表单字段和按钮使用与表单其余部分相同的文本大小。</li>
<li>给表单字段和按钮设置10像素的内边距。</li>
<li>为按钮提供紫色背景，白色前景，无边框和5px的圆角。</li>
</ul>
<p><img alt="A single line form" src="https://mdn.mozillademos.org/files/17144/mdn-images-form.png" style="height: 120px; width: 1254px;"></p>
<p>尝试更改下面的实时代码以重新创建图像中显示的示例：</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}</p>
<div class="blockIndicator note">
<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/form-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p>
</div>
<h2 id="评价以及更多帮助">评价以及更多帮助</h2>
<p>您可以在上面提到的交互式编辑器中练习这些示例。</p>
<p>如果您希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：</p>
<ol>
<li>将您的工作上传到在线共享编辑器中，例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a>.。 您可以自己编写代码，也可以使用以上部分中链接到的起点文件。</li>
<li>在<a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. “学习”类别中写一篇帖子，要求评估帮助。 您的帖子应包括：</li>
</ol>
<ul>
<li>描述性标题，例如“<strong>Assessment wanted for Images skill test 1”</strong>。</li>
<li>您已经尝试过的内容以及您希望我们做什么的详细信息，例如 <strong>如果您陷入困境并需要帮助</strong>，或者<strong>需要评估</strong>。</li>
<li>指向您要评估或需要帮助的示例的链接（如上面的步骤1中所述）。 这是很好好习惯-如果看不到代码，很难帮助存在问题的人。</li>
<li>指向实际任务或评估页面的链接，因此我们可以找到您需要帮助的问题。</li>
</ul>
|
