用 CSS 寫出來的各種框

CSS 是用于編寫網頁樣式的語言，可以幫助我們創建各種漂亮的頁面布局。在 CSS 中，我們可以使用各種盒子(box)樣式來創建各種框，例如文本框、表格框、下拉框、單選框、復選框等。本文將介紹如何使用 CSS 創建各種框。

1. 文本框(Text Box)

文本框是一種常見的網頁元素，用于顯示文本。在 CSS 中，我們可以使用 `input[type="text"]` 類來創建一個文本框，其中 `type="text"` 表示該元素只顯示文本，`input[type="password"]` 類則用于創建一個密碼框。以下是一個簡單的示例：

```html

<input type="text" id="myText">

在上面的代碼中，我們使用 `id` 屬性來為該元素指定唯一的標識符，使用 `type="text"` 類來創建一個文本框，該文本框的樣式包括邊框和內邊距，以及文本顏色。

2. 表格框(Table Box)

表格框用于創建表格。在 CSS 中，我們可以使用 `table` 類來創建一個表格框，其中 `table` 表示該元素為表格，`border-collapse` 屬性用于設置表格邊框和內邊距的合并方式，`width` 屬性用于設置表格寬度。以下是一個簡單的示例：

```html

<table>

<tr>

<td>第一行</td>

<td>第二行</td>

</tr>

<tr>

<td>第三行</td>

<td>第四行</td>

</tr>

</table>

在上面的代碼中，我們使用 `table` 類來創建一個表格框，其中 `border-collapse` 屬性用于設置表格邊框和內邊距的合并方式，該表格的寬度為 200 像素。

3. 下拉框( Drop-down Box)

下拉框是一種可點擊打開的對話框，用于顯示一系列選項。在 CSS 中，我們可以使用 `select` 類來創建一個下拉框，其中 `name` 屬性用于設置下拉框中的選項名稱，`value` 屬性用于設置下拉框中的選項值。以下是一個簡單的示例：

```html

<select name="myList">

<option value="1">選項 1</option>

<option value="2">選項 2</option>

<option value="3">選項 3</option>

</select>

在上面的代碼中，我們使用 `select` 類來創建一個下拉框，其中 `name="myList"` 表示該元素的名稱為下拉框，`value` 屬性用于設置下拉框中的選項值，該下拉框中的三個選項分別為 1、2 和 3。

4. 單選框(Single-選 Box)

單選框是一種只有一個選項的對話框，用于選擇某個值。在 CSS 中，我們可以使用 `input[type="radio"]` 類來創建一個單選框，其中 `type="radio"` 表示該元素為單選框，`name` 屬性用于設置單選框中的選項名稱，`value` 屬性用于設置單選框中的選項值。以下是一個簡單的示例：

```html

<input type="radio" name="myOption" value="1">

<label for="myOption">選項 1</label>

在上面的代碼中，我們使用 `input[type="radio"]` 類來創建一個單選框，其中 `type="radio"` 表示該元素為單選框，`name="myOption"` 用于設置單選框中的選項名稱，`value` 用于設置單選框中的選項值，該單選框中有兩個選項，分別為 1 和 2。

5. 復選框(複數選框)

復選框是一種有兩個選項的對話框，用于選擇多個值。在 CSS 中，我們可以使用 `input[type="checkbox"]` 和 `input[type="radio"]` 類來創建一個復選框。