div是HTML中塊級(jí)元素的一種,它可以用來(lái)將一個(gè)文檔分隔成不同區(qū)域,并使用CSS在這些區(qū)域中添加樣式。在CSS中,我們可以使用div來(lái)創(chuàng)建樣式類,以便在整個(gè)網(wǎng)站中使用相同的樣式屬性。
下面展示一個(gè)簡(jiǎn)單的div CSS試卷,這個(gè)試卷包含了基本的HTML結(jié)構(gòu)和CSS樣式。
<div class="quiz">
<h2>HTML和CSS Quiz</h2>
<p>請(qǐng)回答以下問(wèn)題:</p>
<ol>
<li>
<p>HTML是什么意思?</p>
<input type="radio" name="html" value="a"><label><span>Hypertext Markup Language</span></label><br>
<input type="radio" name="html" value="b"><label><span>High Tech Markup Language</span></label><br>
<input type="radio" name="html" value="c"><label><span>Hyper Tech Markup Language</span></label>
</li>
<li>
<p>CSS是什么意思?</p>
<input type="radio" name="css" value="a"><label><span>Cascading Style Sheets</span></label><br>
<input type="radio" name="css" value="b"><label><span>Computer Style Sheets</span></label><br>
<input type="radio" name="css" value="c"><label><span>Cascading Sheet System</span></label>
</li>
</ol>
<button>提交</button>
</div>
.quiz {
margin: 20px;
padding: 20px 40px;
background-color: #f6f6f6;
border: 1px solid #ddd;
}
h2 {
margin-bottom: 20px;
font-size: 24px;
}
ol {
margin-left: 0;
padding-left: 20px;
list-style-type: decimal;
}
li {
margin-bottom: 20px;
font-size: 16px;
}
input[type="radio"] {
margin-right: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
在上面的代碼中,我們使用了div元素來(lái)創(chuàng)建一個(gè)包含quiz類的區(qū)域,并為這個(gè)區(qū)域添加樣式。我們還使用了h2、p、ol和li元素來(lái)創(chuàng)建HTML文檔結(jié)構(gòu),以便在這個(gè)區(qū)域中顯示問(wèn)題和答案。最后,我們?yōu)閕nput和button元素添加CSS樣式,以便使它們看起來(lái)更漂亮。