用 CSS 樣式做一個選項卡

隨著 Web 開發的不斷進步，人們對網頁設計的要求也越來越高。其中，選項卡(選擇題卡)是一種常見的網頁布局方式，常用于產品宣傳、考試題目、投票等場景。今天，我們將通過使用 CSS 樣式來創建一個選項卡網頁。

首先，我們需要準備一個 HTML 文件，其中包括選項卡的頭部和主體部分。在這個文件中，我們將創建一個名為“ choices”的列表，其中包含我們要選擇的答案。每個選項將占據一個單獨的標簽，例如：

<li>選項 1</li>

<li>選項 2</li>

<li>選項 3</li>

<li>選項 4</li>

</ul>

接下來，我們需要創建一個 CSS 樣式文件，用于控制選項卡的布局和樣式。在這個文件中，我們將使用一個偽元素“<div>”來創建選項卡的背景和邊框，并使用 CSS 樣式來調整選項卡的內容和樣式。

body {

background-color: #F0F0F0; /* 背景顏色 */

margin: 0; /* 邊框寬度 */

#choices {

display: flex; /* 將選項卡布局為 Flex 布局 */

flex-wrap: wrap; /* 允許選項卡被滾動到底部 */

justify-content: space-between; /* 使選項之間的間距居中 */

align-items: center; /* 使選項之間的間距對齊 */

#choices li {

list-style-type: none; /* 消除選項之間的間距 */

padding: 0 5px; /* 選項的邊距為 5 像素 */

#choices li:last-child {

padding-right: 0; /* 使最后一個選項的右側邊距為 0 */

#choices li p {

font-size: 18px; /* 字體大小為 18 像素 */

margin: 0; /* 文字的內邊距為 0 */

上述代碼中，我們使用 CSS 樣式將選項卡布局為 Flex 布局。通過使用 Flex，我們可以使選項卡之間的間距居中，并允許選項卡被滾動到底部。我們還使用 CSS 樣式來調整選項卡的內容和樣式，使每個選項看起來一樣。

現在，我們可以將上述代碼保存為 CSS 文件，并使用瀏覽器打開它。這將看到一個選項卡網頁，其中包含一個列表，其中包含我們要選擇的答案。我們可以使用 JavaScript 或其他技術來使這個網頁更有趣，例如添加一個按鈕，讓用戶點擊來選擇答案。

總之，使用 CSS 樣式可以創建一個美觀、易于使用和靈活的選項卡網頁。通過使用 Flex，我們可以使選項卡布局更加靈活，并調整選項卡的內容和樣式。希望本文能夠幫助您創建一個漂亮的選項卡網頁！