html代碼段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF_8">
<link rel="stylesheet"href="exam.css"/>
<title>用CSS美化試卷</title>
</head>
<body>
<div id="mainbody">
<div class="header">統一建模語言理論測試</div>
<pre>
<div class="Title"> 考試科目：統一建模語言 時間：100分鐘 得分：
</div>
</pre>
<div class="input">
<p>
<label> 班級(必填):
<input /></label>
<label>學號(必填): <input/></label>
<label> 姓名(必填): <input/></label>
</p>
</div>
<br>
<div class="lump">
<p> <span>一 填空題（每空5分，共20分）</span></p>
<ol>
<li>
<label> UML的中文全稱是:<br> <input /></label>
</li>
<li>
<label>對象最突出的特征是：<br><input />
<input />
<input/></label>
</li>
</ol>
</div>
<br>
<div class="RadioSelection">
<p class="RadioSelectionTitle"><span>二 選擇題（每題10分）</span></p>
<ol>
<li>
<p>UML與軟件工程的關系是：()</p>
<input type="radio" value="A" name="SingleSelect" class="SingleSelect1"/>
<label >(A)UML 就是軟件工程</label> <br>
<input type="radio" value="B" name="SingleSelect" class="SingleSelect2"/>
<label >(B)UML 參與到軟件工程中軟件開發過程的幾個階段</label> <br>
<input type="radio" value="C" name="SingleSelect" class="SingleSelect3"/>
<label >(C)UML 與軟件工程無關</label> <br>
<input type="radio" value="D" name="SingleSelect" class="SingleSelect4"/>
<label >(D)UML 是軟件工程的一部分</label> <br>
</li>
<li>
<p>Java 語言支持:()</p>
<input type="radio" value="A" name="SingleSelect" id="SingleSelecta"/>
<label >(A)單繼承</label> <br>
<input type="radio" value="B" name="SingleSelect" id="SingleSelectb"/>
<label >(B)多繼承</label> <br>
<input type="radio" value="C" name="SingleSelect" id="SingleSelectc"/>
<label >(C)單繼承和多繼承都支持</label> <br>
<input type="radio" value="D" name="SingleSelect" id="SingleSelectd"/>
<label >(D)單繼承和多繼承都不支持</label> <br>
</li>
</ol>
</div>
<br>
<div class="CheckboxSelection">
<p class="CheckboxSelectionTitle"><span>三 多項選擇題（每題10分，共20分）</span></p>
<ol>
<li>
<p>用例的粒度分為以下哪三種()</p>
<input type="checkbox" />
<label >(A)概述級</label><br>
<input type="checkbox" />
<label >(B)需求級</label><br>
<input type="checkbox" />
<label >(C)用戶目標級</label><br>
<input type="checkbox" />
<label >(D)子功能級</label><br>
</li>
<li>
<p>類圖由以下哪三部分組成()</p>
<input type="checkbox" />
<label >(A)名稱(Name)</label><br>
<input type="checkbox" />
<label >(B)屬性(Attribute)</label><br>
<input type="checkbox" />
<label for="fc">(C)操作(Operation)</label><br>
<input type="checkbox" />
<label >(D)方法(Function)</label><br>
</li>
</ol>
</div>
<br>
<div class="judge">
<p class="judgeTitle"><span>四 判斷題（每題10分，共20分）</span></p>
<ol>
<li>
<p>用例圖只是用于和客戶交流和溝通的,用于確定需求()</p>
<input type="radio" value="True" name="Judge1" id="true1"/>
<label >True</label>
<input type="radio" value="False" name="Judge1" id="false1"/>
<label >False</label>
</li>
<li>
<p>在狀態圖中,終止狀態在一個狀態圖中允許有任意多個()</p>
<input type="radio" value="True" name="Judge2" id="true2"/>
<label >True</label>
<input type="radio" value="False" name="Judge2" id="false2"/>
<label >False</label>
</li>
</ol>
</div>
<br>
<div class="ShortAnswer">
<p class="ShortAnswerTitle"><span>五 簡答題（每題20分，共20分）</span></p>
<p>1. 簡述什么是模型以及模型的表現形式?</p>
<textarea class="textbox"></textarea>
</div>
</div>
</body>
</html>
CSS代碼
span {
line-height: 40px;
}
.header {
font-size: xx-large;
text-align: center;
color: red;
}
#mainbody {
width: 70%;
margin: auto;
}
.Title {
border: #ccc solid 1px;
font-size:20px;
text-align: center;
}
.input {
border: #ccc solid 1px;
text-align: center;
}
.lump {
border: #ccc solid 1px;
}
.lump p {
margin: 0;
padding: 0;
background-color: #cccccc;
height: 40px;
}
.RadioSelection {
border: #ccc solid 1px;
}
.RadioSelectionTitle {
margin: 0;
padding: 0;
background-color: #cccccc;
height: 40px;
}
.CheckboxSelection {
border: #ccc solid 1px;
}
.CheckboxSelectionTitle {
margin: 0;
padding: 0;
background-color: #cccccc;
height: 40px;
}
.judge {
border: #ccc solid 1px;
}
.judgeTitle {
margin: 0;
padding: 0;
background-color: #cccccc;
height: 40px;
}
.ShortAnswer {
border: #ccc solid 1px;
}
.ShortAnswerTitle {
margin: 0;
padding: 0;
background-color: #cccccc;
height: 40px;
}
.textbox {
width: 80%;
height: 80px;
}
輸出樣式
Paste_Image.png
Paste_Image.png
作業感悟：要繼續努力學習相關內容，歡迎大家提供意見，指出不足喲！
