挑战：设计一个家居色彩搭配搜索应用
我们 CSS 基础 模块的最后一个挑战，是一个“家居色彩搭配搜索应用”的用户界面模型。这个应用的构想是让用户输入一个颜色，然后检索一系列变体以及示例色彩搭配方案。你的任务是为提供的表单、表格和按钮控件添加样式，并确保图像按预期显示。
注意： 本挑战中使用的着色图像改编自 Flickr 上提供的原图：Chic Living Room，由 Houseology Interiors 在 CC BY-NC 2.0 许可下发布。
起始点
首先，点击下方任一代码面板中的 Play 按钮，在 MDN Playground 中打开提供的示例。然后，按照 项目简报 部分的说明，为页面添加适当的样式。
html
<section>
<h1>Home color search</h1>
<form>
<div>
<label for="color">Color to search for:</label>
<input type="text" id="color" name="color" value="pink" />
</div>
<div>
<label for="results-per-page">Results per page:</label>
<input
type="text"
id="results-per-page"
name="results-per-page"
value="4" />
</div>
<div>
<button type="button">Submit</button>
</div>
</form>
</section>
<hr />
<section>
<h2>Search results</h2>
<table>
<caption>
Sample colors and color schemes
</caption>
<thead>
<tr>
<th scope="col">Color</th>
<th scope="col">Raw color</th>
<th scope="col">Tags</th>
<th scope="col">Sample color scheme</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pink</td>
<td><code>rgb(255 192 203)</code></td>
<td>pink, pale, light</td>
<td>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-pink.png"
alt="Image of living room in a pink color scheme" />
</td>
</tr>
<tr>
<td>Baker-Miller pink</td>
<td><code>rgb(255 145 175)</code></td>
<td>pink, pale, bright</td>
<td>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-baker-miller-pink.png"
alt="Image of living room in a Baker-Miller pink color scheme" />
</td>
</tr>
<tr>
<td>Hotpink</td>
<td><code>rgb(255 105 180)</code></td>
<td>pink, bright, vivid</td>
<td>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-hotpink.png"
alt="Image of living room in a hotpink color scheme" />
</td>
</tr>
<tr>
<td>Fuchsia</td>
<td><code>rgb(255 0 255)</code></td>
<td>pink, medium, bright</td>
<td>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-fuchsia.png"
alt="Image of living room in a fuchsia color scheme" />
</td>
</tr>
</tbody>
</table>
<div class="controls">
<button disabled>Previous</button>
<p>Showing page 1 of 20</p>
<button>Next</button>
</div>
</section>
css
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica", "Arial", sans-serif;
}
body {
margin: 0 10px;
}
hr {
margin: 3em 0;
}
h2 {
margin-top: 0;
}
/* Prev/next control layout */
.controls {
display: flex;
padding: 10px 0;
justify-content: space-between;
align-items: center;
}
/* Form and button styling */
form div {
display: flex;
align-items: center;
gap: 2em;
margin-bottom: 1em;
}
label {
text-align: right;
flex: 1;
}
input {
flex: 3;
}
/* Table styling */
table img {
width: 100%;
height: 150px;
}
项目简介
请按照以下步骤完成项目，调整内容窗格的大小并添加必要的装饰。
添加表单重置
首先，为 <button> 和 <input> 元素添加一些“重置”样式，以便在不同浏览器中获得一致的初始状态。
具体而言：
- 让它们继承页面其余部分的字体系列。
- 将它们的字体大小设置为
100%。 - 移除它们的所有内边距和外边距。
样式化表单输入
为 <input> 元素设置
2px的实线边框，颜色为#999999。10px的内边距。5px的圆角。
样式化按钮
为 <button> 元素设置
- 无边框。
- 背景色为
black，文字颜色为white。 5px的圆角。- 垂直内边距为
10px，水平内边距为2em。 - 鼠标悬停或获得焦点时，背景色为
#666666。 - 禁用时，背景色为
#aaaaaa。
样式化表格
现在你应该按照本模块前面学到的最佳实践，为表格添加一些样式，再加上一些额外的功能。
具体而言：
- 为表格设置固定布局，宽度为
100%，并合并边框。 - 表格的顶部和底部边框应为
1px厚，实线，颜色为#999999。 - 表格的表头单元格和普通单元格应有
0.6em的内边距，并且其内容应在单元格顶部垂直对齐。 - 表格的表头单元格应有一个底部边框，厚度为
1px，实线，颜色为#999999。 - 所有表格行的宽度都应为
20%，但第四行除外，其宽度应为40%。 - 在表格主体中，有四行。每行中的第二个单元格包含一个
rgb()颜色的文本。为这些单元格中的每一个设置与其文本相对应的背景颜色。 - 创建斑马条纹：为偶数行（在表格主体内部）设置背景色为
#eeeeee。 - 为标题设置
1em的内边距，斜体字体样式，以及1px的字母间距。
修复图像显示
此时，表格中的图像存在一个问题——我们将每个图像的宽度设置为其表格单元格容器宽度的 100%，高度设置为 150px，因为我们不希望表格行过高。然而，这扭曲了图像的宽高比，使其看起来有些压扁。
我们希望你为图像添加样式，使其
- 以其固有的宽高比显示，但裁剪掉一部分图像，使其仍然适合
<img>元素的大小。 - 显示图像的底部，但裁剪掉图像的顶部。
提示和技巧
- 您不需要以任何方式修改 HTML。
示例
完成的项目应如下所示
点击此处显示解决方案
一个可能的解决方案是
css
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica", "Arial", sans-serif;
}
body {
margin: 0 10px;
}
hr {
margin: 3em 0;
}
h2 {
margin-top: 0;
}
/* Prev/next control layout */
.controls {
display: flex;
padding: 10px 0;
justify-content: space-between;
align-items: center;
}
/* Form and button styling */
form div {
display: flex;
align-items: center;
gap: 2em;
margin-bottom: 1em;
}
label {
text-align: right;
flex: 1;
}
/* Solution: Add a form reset */
button,
input {
font-family: inherit;
font-size: 100%;
padding: 0;
margin: 0;
}
input {
flex: 3;
/* Solution: Style the form inputs */
border: 2px solid #999999;
padding: 10px;
border-radius: 5px;
}
/* Solution: Style the buttons */
button {
background-color: black;
border: none;
color: white;
border-radius: 5px;
padding: 10px 2em;
}
button:hover,
button:focus {
background-color: #666666;
}
button:disabled {
background-color: #aaaaaa;
}
/* Table styling */
table img {
width: 100%;
height: 150px;
/* Solution: Fixing the image display */
object-fit: cover;
object-position: bottom;
}
/* Solution: Style the table */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
th,
td {
vertical-align: top;
padding: 0.6em;
}
th {
border-bottom: 1px solid #999999;
}
tr {
width: 20%;
}
tr :nth-of-type(4) {
width: 40%;
}
/* Solution: Provide background colors for the "Raw color" cells */
tr:nth-of-type(1) td:nth-of-type(2) {
background-color: pink;
}
tr:nth-of-type(2) td:nth-of-type(2) {
background-color: rgb(255 145 175);
}
tr:nth-of-type(3) td:nth-of-type(2) {
background-color: hotpink;
}
tr:nth-of-type(4) td:nth-of-type(2) {
background-color: magenta;
}
tbody tr:nth-child(odd) {
background-color: #eeeeee;
}
caption {
padding: 1em;
font-style: italic;
letter-spacing: 1px;
}