技能测试:图片和表格元素
该任务的目的是帮助你检查对我们在本课程Images, Media and Form elements(图像,媒体及表格元素)中了解的一些值和单位的理解。
任务一
在此任务中,你有一张溢出盒子的图像。我们希望图像缩小到适合盒子的大小,而没有多余的空白,并不介意某些图像是否被裁剪。
在下面的例子中看看你能否能符合上面的图片
备注:为了为了评估或进一步完成任务,请下载此任务的起点,以便在你自己的编辑器或在线编辑器中工作。
任务二
在此任务中,你会获得一个简单的表格。你的任务是对该表单的外观进行以下更改:
- 使用属性选择器定位.myform 中的**搜索 (search)**字段和按钮。
- 使表单字段和按钮使用与表单其余部分相同的文本大小。
- 给表单字段和按钮设置 10 像素的内边距。
- 为按钮提供紫色背景,白色前景,无边框和 5px 的圆角。
尝试更改下面的实时代码以重新创建图像中显示的示例:
备注:为了为了评估或进一步完成任务,请下载此任务的起点,以便在你自己的编辑器或在线编辑器中工作。
评价以及更多帮助
你可以在上面提到的交互式编辑器中练习这些示例。
如果你希望对自己的工作进行评估,或者遇到困难并希望寻求帮助,请执行以下操作:
- 将你的工作上传到在线共享编辑器中,例如 CodePen, jsFiddle, Glitch.。你可以自己编写代码,也可以使用以上部分中链接到的起点文件。
- 在MDN Discourse forum Learning category. “学习”类别中写一篇帖子,要求评估帮助。你的帖子应包括:
- 描述性标题,例如“Assessment wanted for Images skill test 1”。
- 你已经尝试过的内容以及你希望我们做什么的详细信息,例如 如果你陷入困境并需要帮助,或者需要评估。
- 指向你要评估或需要帮助的示例的链接(如上面的步骤 1 中所述)。这是很好好习惯 - 如果看不到代码,很难帮助存在问题的人。
- 指向实际任务或评估页面的链接,因此我们可以找到你需要帮助的问题。