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

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

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

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

任务一

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

An image in a box

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

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

任务二

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

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

A single line form

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

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

评价以及更多帮助

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

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

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