CSS選擇題目界面設計

/* HTML代碼 */
<div class="quiz">
<h2>CSS選擇題</h2>
<p class="question">1. CSS是用來做什么的？</p>
<ul class="answers">
<li>A. 做飯</li>
<li>B. 寫文章</li>
<li>C. 布局網頁</li>
<li>D. 畫畫</li>
</ul>
<button class="next">下一題</button>
</div>
/* CSS代碼 */
.quiz {
margin: 50px auto;
width: 800px;
text-align: center;
}
.question {
font-size: 30px;
margin-bottom: 30px;
}
.answers {
list-style: none;
margin: 0;
padding: 0;
}
.answers li {
font-size: 24px;
margin-bottom: 10px;
padding: 10px 0;
border: 1px solid #ccc;
border-radius: 10px;
}
.answers li:hover {
background-color: #eee;
}
.next {
font-size: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
}
.next:hover {
background-color: #3e8e41;
}

本文介紹了一個基本的CSS選擇題目界面樣式，該界面包括一個題目、四個選項和一個下一題按鈕。在HTML中使用div標簽作為整體容器，內部采用h2標簽顯示標題，p標簽顯示題目，ul和li標簽顯示選項，button標簽顯示下一題按鈕。

在CSS中，整體容器設置了垂直居中、居中對齊，題目設置了字體大小和底部間距，選項使用了列表樣式，間距、圓角和邊框大小也做了調整，并且鼠標放在選項上時會觸發背景顏色的變化。下一題按鈕設置了字體大小、內部填充、背景顏色、字體顏色等樣式，并且在鼠標放上面時也會改變背景顏色。

這是一個簡單的CSS選擇題目界面樣式，如果您需要實現更復雜的樣式效果，可以根據實際需求進行調整。同時，在編寫CSS樣式時，也需要注重代碼的可讀性和規范性，這樣可以更好地維護和修改代碼。