測試你的技能：影像和表單元素

此技能測試的目的是評估您是否理解如何在 CSS 中處理 影像、媒體和表單元素等特殊元素。

注意：您可以在此頁面上的互動式編輯器中或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以聯絡我們，我們的 溝通渠道。

任務 1

在此任務中，您有一個影像，它溢位了框。我們希望影像縮小以適合框內，沒有任何額外的空白，但我們不介意影像的一部分被裁剪。

最終結果應與以下影像類似

An image in a box

嘗試更新以下即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行工作。

任務 2

在此任務中，您有一個簡單的表單。您的任務是進行以下更改

  • 使用屬性選擇器來定位 .myform 內的搜尋欄位和按鈕。
  • 使表單欄位和按鈕使用與表單其餘部分相同的文字大小。
  • 為表單欄位和按鈕提供 10 畫素的填充。
  • 為按鈕提供 rebeccapurple 背景、白色前景色、無邊框和 5 畫素的圓角。

最終結果應與以下影像類似

A single line form

嘗試更新以下即時程式碼以重新建立完成的示例

下載此任務的起點 以在您自己的編輯器或線上編輯器中進行工作。