技能测试:图片和表格元素

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

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

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

任务一

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

An image in a box

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

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

任务二

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

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

A single line form

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

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

评价以及更多帮助

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

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

  1. 将你的工作上传到在线共享编辑器中,例如 CodePen, jsFiddle, Glitch.。你可以自己编写代码,也可以使用以上部分中链接到的起点文件。
  2. MDN Discourse forum Learning category. “学习”类别中写一篇帖子,要求评估帮助。你的帖子应包括:
  • 描述性标题,例如“Assessment wanted for Images skill test 1”。
  • 你已经尝试过的内容以及你希望我们做什么的详细信息,例如 如果你陷入困境并需要帮助,或者需要评估
  • 指向你要评估或需要帮助的示例的链接(如上面的步骤 1 中所述)。这是很好好习惯 - 如果看不到代码,很难帮助存在问题的人。
  • 指向实际任务或评估页面的链接,因此我们可以找到你需要帮助的问题。