技能测试：图片和表单元素 - Web 开发入门

任务 1

在此任务中，您有一个图片溢出了容器。我们希望图片能够缩放到适合容器内，而不会有任何额外的空白，但如果图片被裁剪一部分也没关系。请更新 CSS 以实现此目的。

您的最终结果应如下面的图片所示

An image in a box

html

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

css

.box {
  border: 5px solid black;
  width: 400px;
  height: 200px;
}

img {
  /* Add styles here */
}

点击此处显示解决方案

图片被裁剪一部分也没关系。使用 object-fit: cover 是最佳选择，您还需要将宽度和高度设置为 100%。

css

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

任务 2

在此任务中，您有一个基础表单。

完成任务

使用属性选择器来定位 .my-form 中的搜索字段和按钮。
使表单字段和按钮使用与表单其他部分相同的文本大小。
为表单字段和按钮设置 10px 的内边距。
为按钮设置 rebeccapurple 的背景色，白色前景，无边框，以及 5px 的圆角。

您的最终结果应如下面的图片所示

A single line form

html

<form action="" class="my-form" method="post">
  <div>
    <label for="fldSearch">Keywords</label>
    <input id="fldSearch" name="keywords" type="search" />
    <input name="btnSubmit" type="submit" value="Search" />
  </div>
</form>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.my-form {
  border: 2px solid black;
  padding: 5px;
}

点击此处显示解决方案

这是任务的示例解决方案

css

.my-form {
  border: 2px solid black;
  padding: 5px;
}

.my-form input[type="search"] {
  padding: 10px;
  font-size: inherit;
}

.my-form input[type="submit"] {
  padding: 10px;
  font-size: inherit;
  background-color: rebeccapurple;
  color: white;
  border: 0;
  border-radius: 5px;
}

任务 3

我们的第二个表单样式评估是相当自由的，您在此有很多灵活性。您的 CSS 需要满足下面描述的要求。

完成任务

添加一些轻量级的“重置”设置，以使字体、内边距、外边距和尺寸一开始更加一致，如规范化表单行为中所述。
在此基础上，为输入框和按钮添加一些漂亮的、一致的样式。
使用某种布局技术使输入框和标签整齐地对齐。

<form>
  <h2>Edit your preferences</h2>
  <ul>
    <li>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
    </li>
    <li>
      <label for="website">Website:</label>
      <input type="url" id="website" name="website" />
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="tel" id="phone" name="phone" />
    </li>
    <li>
      <label for="food">Favorite food:</label>
      <select name="food" id="food">
        <option>Salad</option>
        <option>Curry</option>
        <option>Pizza</option>
        <option>Fajitas</option>
      </select>
    </li>
    <li>
      <button>Update preferences</button>
    </li>
  </ul>
</form>

css

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
  width: 500px;
}

/* Don't edit the code above here! */

/* Add your code here */

点击此处显示解决方案

您最终的 CSS 可能看起来像这样

css

/* ... */
/* Don't edit the code above here! */

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

li:last-of-type {
  margin-top: 30px;
}

label {
  flex: 0 40%;
  text-align: right;
  padding-right: 10px;
}

input,
select {
  flex: auto;
  height: 2em;
}

input,
select,
button {
  display: block;
  padding: 5px 10px;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

select {
  padding: 5px;
}

button {
  margin: 0 auto;
  padding: 5px 20px;
  line-height: 1.5;
  background: #eeeeee;
}

button:hover,
button:focus {
  background: #dddddd;
}

帮助改进 MDN

了解如何贡献

此页面最后修改时间为 2025年10月13日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题