CSS 技能测试：图片和表格元素

发表于
在 MDN 文档学习 CSS 的记录

题目链接

任务一

题目要求：

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

HTML 代码：

1
2
3
<div class="box">
  <img src="balloons.jpg" alt="balloons">
</div>

CSS 代码：

1
2
3
4
5
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

任务二

题目要求：

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

HTML 代码：

1
2
3
4
5
6
7
<form method="post" action="" class="myform">
  <div>
    <label for="fldSearch">Keywords</label>
    <input type="search" id="fldSearch" name="keywords">
    <input type="submit" name="btnSubmit" value="Search">
  </div>
</form>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.myform {
  border: 2px solid #000;
  padding: 5px;
}
.myform input[type="search"],
.myform input[type="submit"]{
  font-size: inherit;
  padding: 10px;
}
.myform input[type="submit"]{
  color: white;
  background-color: rebeccapurple;
  border: none;
  border-radius: 5px;
}