# 4 練習

## 1 介面 - Alerts

檔名建議：`alert.html`

說明：

* 藍色背景色 `#cce5ff`，邊框 1px 實線，邊框顏色 `#b8daff`。
* 紅色背景色 `#f8d7da`，邊框 1px 實線，邊框顏色 `#f5c6cb`。
* 內距(padding)：上下 5px、左右 10px。
* 圓角(border-radius)：5px。
* 藍色、紅色分別是一個 `div` 區塊即可。

結果示意圖：

![](/files/-LosNBqgeOcG9mGHfEZk)

提供 html：

```markup
<div class="alert">
  這是一般的文字訊息
</div>

<div class="alert -error">
  這是警告的文字訊息
</div>
```

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/BaBPPvB>" %}

## 2 介面 - Button 按鈕

檔名建議：`button.html`

說明：

* 請用 button 標籤( `type="button"` )製作。
* 文字大小 1rem、文字顏色 `#007bff`。邊框 1px 實線、邊框顏色 `#007bff`。
* 按鈕圓角(border-radius) `.25rem`。
* 按鈕內距(padding)：`.375rem .75rem` 。
* 滑鼠移過：文字顏色 `#FFF`。背景顏色 `#007bff`。
* 滑鼠移過游標(cursor)變成： `pointer`。

結果示意：

{% embed url="<https://youtu.be/XXBss3TP3H0>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/abojayR>" %}

## 3 介面 - Breadcrumb 麵包屑

檔名建議：`breadcrumb.html`

說明：

* 最外層 `div`，裡面請用 `ol` 標籤製作。
* 連結文字顏色 `#007bff`，滑鼠移過後變成 `#0056b3`。
* 提示：斜線可用 `::before` 來創造，顏色為 `#aaa`。
* div 背景色為 `#e9ecef`，內距上下 5px、左右 10px。圓角 5px。

結果示意圖：

![](/files/-LosW41Mmg37MYZN-EIb)

提供 html：

```markup
<div class="breadcrumb">
  <ol class="breadcrumb_list">
    <li><a href="#">首頁</a></li>
    <li><a href="#">分類頁</a></li>
    <li>商品頁</li>
  </ol>
</div>
```

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/JjPBBgZ>" %}

## 4 介面 - 直向圖文編排

檔名建議：`text_vertical.html`

說明：

* 圖片路徑：<https://picsum.photos/id/729/500/300>
* 圖片點擊開新分頁連至外站(任意網址皆可)。
* 最外層用 article 標籤製作。寬度 300px。
* 標題「農夫耕種的照片」用 h1 標籤製作。
* 標題文字大小 1.2rem。

結果示意圖：

![直向圖文編排](/files/-LosnOvChT8YZl5LQjlS)

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/eYOjLxL>" %}

## 5 介面 - 文繞圖

檔名建議：`text_float.html`

說明：

* 圖片路徑：<https://picsum.photos/id/729/500/300>
* 圖片點擊開新分頁連至外站(任意網址皆可)。
* 最外層用 article 標籤製作。寬度 500px。
* 標題「農夫耕種的照片」用 h1 標籤製作。
* 標題文字大小 1.2rem。
* 提示1：比照「直向圖文編排」，在結構上只加了一個「圖片簡述的文字」，其餘結構完全不會變，只調整樣式。
* 提示2：連結區塊(灰框部份)設定成向左的浮動(float)。

結果示意圖：

![橫向圖文編排](/files/-LostMiVpQf8y-S7fdOK)

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/JjPBmYP>" %}

## 6 介面 - Pagination 分頁

檔名建議：`pagination.html`

說明：

* 列表使用 ul 標籤。
* 框線顏色：`#dee2e6`。
* 文字顏色：`#dee2e6`。
* 滑鼠移過：背景色變成 `#e9ecef`；文字顏色變成 `#0056b3`。
* 假設在第1頁：那 1 的樣式，預設要與滑鼠移過時的狀態一樣。

結果示意：

{% embed url="<https://youtu.be/dZDItSmea2w>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/wvwyKEP>" %}

## 7 介面 - 用 CSS 做三角形

檔名建議：`arrow_left.html`

說明：

* 假設是用 span 標籤做，可將四個邊框都設定成不同顏色，然後設定 10px 的實線(solid)，display 設定成 inline-block，寬高都設定 0。即可清礎看到箭頭。
* 顏色的完全透明，有一個關鍵字叫 `transparent`。

結果示意：

![用 CSS 做向左的箭頭](/files/-LoxevT8ElPSYEj5-5cO)

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/MWgOLLX>" %}

## 8 介面 - 按鈕 tooltip

檔名建議： `button_tooltip.html`

說明：

* 設定 tooltip 不要斷行：`white-space: nowrap`。

提供 html 結構：

```markup
<button type="button" class="btn">這是按鈕文字這是按鈕文字<span class="tooltip">這是提示文字</span></button>
```

結果示意：

{% embed url="<https://youtu.be/-29-BrljG78>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/PoYdjGB>" %}

## 9 介面 - Popover

檔名建議：`popover.html`

說明：

* popover 的背景色 `#fed`。邊框顏色 `rgba(0,0,0,.3)`。
* 三角形旋轉 45deg：`transform: rotate(45deg)`。
* 利用 `::before` 來做三角形。

提供 html 結構：

```markup
<label class="popover_label">
  <input type="text" placeholder="輸入帳號">
  <span class="popover">
    僅能輸入英文字母、數字、底線(_)。
  </span>
</label>
```

結果示意：

{% embed url="<https://youtu.be/GaWAvOf4izE>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/VwZxLNG>" %}

## 10 介面 - Input Group

檔名建議：`input_group.html`

說明：

* placeholder 文字設定為「輸入 Email」。
* :focus 狀態時，背景色改成 `hsla(200, 80%, 90%, 1)`。

提供 html：

```markup
<div class="input_group">
  <label>@</label>
  <input type="text" placeholder="輸入 Email">
</div>
```

結果示意：

{% embed url="<https://youtu.be/XkhaR4a6Qew>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/LYPdyYj>" %}

## 11 介面 - List Group 列表群組

檔名建議：`list_group.html`

說明：

* 請用 ul 標籤來製作。
* 邊框顏色：`#ccc`。

結果示意：

![](/files/-LoxsnfiXC5JXKwme1Bq)

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/OJLogEq>" %}

## 12 介面 - Progress 進度條

檔名建議： `progress.html`

說明：

* 進度條的背景色為 `#e9ecef`。圓角(border-radius) 8px。
* 有進度的顏色背景為 `#007bff`。

結果示意：

![進度條](/files/-Lp1ZFLSEhOyKbC6VQFw)

提供 html：

```markup
<div class="progress_bar">
  <span class="progress" style="width: 20%;"></span>
</div>
  
<div class="progress_bar">
  <span class="progress" style="width: 70%;"></span>
</div>
```

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/gOYBapo>" %}

## 13 介面 - 使用圖片客製化列表項目符號

檔名建議：`list_item_custom_img.html`

說明：

使用 ul 標籤完成下圖排版，將項目符號客製化：

![](/files/-LyMllhgn4hSVWdiGbL2)

圖片路徑：

<https://alldata.sgp1.digitaloceanspaces.com/images/checkmark.png>

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/zYxjMJw>" %}

## 14 效果 - 影片第一屏滿版

檔名建議：`video_first_screen.html`

提供 html：

```markup
<div class="video_placeholder">
  <video id="the_video" muted loop autoplay playsinline>
    <source src="https://alldata.sgp1.digitaloceanspaces.com/videos/sample.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<div class="other_contents">
  這是底部內容
</div>
```

呈現結果：

{% embed url="<https://youtu.be/ojgjMnhgpXI>" %}

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/rNNoVaP>" %}

## 15 介面 - 雙態開關(checkbox)

直接提供參考作法：

{% embed url="<https://codepen.io/carlos411/pen/WxojBK>" %}

## 其它參考(需要 JS 程式)

### 1 介面 - Modal 彈出視窗

或稱做 lightbox(燈箱)，直接提供參考做法：

{% embed url="<https://codepen.io/carlos411/pen/wvwYKXN>" %}

### 2 介面 - Tab 頁籤

直接提供參考做法：

{% embed url="<https://codepen.io/carlos411/pen/WNeJQzp>" %}

### 3 效果 - 使用 scrollTo() 函式，點擊按鈕，頁面滑到最上方

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/dyywPBP>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/4.-ban-mian-ou-kuai-shi-zuo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.