網頁設計中，HTML和CSS是必不可少的兩個工具。今天我們聊一聊如何使用HTML和CSS來制作一個簡單的答題卡。

首先，我們需要設計一個基礎框架，來展示我們的答題卡。下面是一個簡單的HTML代碼，基礎框架如下：

<div class="quiz-card">
<h2>問題一：</h2>
<div class="options">
<label><input type="radio" name="q1" value="a"> A </label>
<label><input type="radio" name="q1" value="b"> B </label>
<label><input type="radio" name="q1" value="c"> C </label>
<label><input type="radio" name="q1" value="d"> D </label>
</div>
</div>

在上面的代碼中，我們使用了<div>標簽來創建一個名為quiz-card的類，作為我們答題卡的主要區域。在里面，我們使用了<h2>標簽來放置問題的標題，使用<div>標簽和<label>標簽來放置問題的選項，其中每個選項都是一個單選按鈕（<input type="radio">）。

接下來，我們需要使用CSS來美化我們的答題卡。下面是一個簡單的CSS代碼，實現了一些常見的美化效果：

.quiz-card {
width: 500px;
background-color: #f5f5f5;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
h2 {
font-size: 20px;
margin-bottom: 10px;
}
.options {
display: flex;
flex-direction: column;
}
label {
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="radio"] {
display: none;
}
label:hover {
background-color: #f5f5f5;
}
input[type="radio"]:checked + label {
background-color: #00bfff;
color: #fff;
}

在上面的代碼中，我們使用了.quiz-card類來描述我們的答題卡，實現了寬度、背景顏色、邊框、圓角和陰影等效果。同時，我們使用了h2、.options、label和input[type="radio"]的不同樣式來實現了標題、問題選項和單選按鈕的美化效果。

總的來說，使用HTML和CSS來制作一個簡單的答題卡是非常容易的。我們可以通過靈活運用標簽和樣式來完成不同的設計需求，讓我們的答題卡更加美觀和實用。