技能测试：图片和表格元素 - 学习 Web 开发 编辑

该任务的目的是帮助您检查对我们在本课程Images, Media and Form elements(图像，媒体及表格元素）中了解的一些值和单位的理解。

注意:您可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如CodePen, jsFiddle,  Glitch 之类的在线工具来完成任务可能会更加有所帮助。

如果你遇到困难，联系我们获得帮助 — 参见页面底部的评价以及更多帮助

任务一

在此任务中，您有一张溢出盒子的图像。 我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。

在下面的例子中看看你能否能符合上面的图片

为了为了评估或进一步完成任务，请下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

任务二

在此任务中，您会获得一个简单的表格。 您的任务是对该表单的外观进行以下更改：

• 使用属性选择器定位.myform中的搜索(search)字段和按钮。
• 使表单字段和按钮使用与表单其余部分相同的文本大小。
• 给表单字段和按钮设置10像素的内边距。
• 为按钮提供紫色背景，白色前景，无边框和5px的圆角。

尝试更改下面的实时代码以重新创建图像中显示的示例：

为了为了评估或进一步完成任务，请下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

评价以及更多帮助

您可以在上面提到的交互式编辑器中练习这些示例。

如果您希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：

1. 将您的工作上传到在线共享编辑器中，例如 CodePen, jsFiddle, Glitch.。 您可以自己编写代码，也可以使用以上部分中链接到的起点文件。
2. 在MDN Discourse forum Learning category. “学习”类别中写一篇帖子，要求评估帮助。 您的帖子应包括：

• 描述性标题，例如“Assessment wanted for Images skill test 1”。
• 您已经尝试过的内容以及您希望我们做什么的详细信息，例如 如果您陷入困境并需要帮助，或者需要评估。
• 指向您要评估或需要帮助的示例的链接（如上面的步骤1中所述）。 这是很好好习惯-如果看不到代码，很难帮助存在问题的人。
• 指向实际任务或评估页面的链接，因此我们可以找到您需要帮助的问题。