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
作业感悟：要继续努力学习相关内容，欢迎大家提供意见，指出不足哟！
