1、代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
border: 1px solid red;
font-size: 16px;
}
.header{
margin: auto 50px;
}
.header h3{
padding-top: 10px;
text-align: center;
}
.description, .personalInfo{
height: 40px;
line-height: 40px;
border: 1px solid beige;
}
.description li, .personalInfo li{
list-style: none;
display: inline;
width: 33.33%;
float: left;
}
.body{
margin: auto 50px;
line-height: 28px;
}
.question-title{
line-height: 35px;
font-weight: bold;
}
.question-block{
border-radius: 3px;
border: 1px solid beige;
margin-top: 10px;
}
.question-block .title{
height: 40px;
line-height: 40px;
font-size: 17px;
background-color: ghostwhite;
font-weight: bold;
}
.radioType{
padding: 0;
margin: 0;
}
.radioType li{
list-style: none;
}
.selectType{
padding: 0;
margin: 0;
}
.selectType li{
list-style: none;
}
.textArea{
width: 95%;
height: 60px;
}
.footer{
margin: auto 50px;
line-height: 40px;
text-align: center;
vertical-align:middle;
}
.footer button{
background-color: lightblue;
height: 25px;
font-size: 14px;
}
</style>
</head>
<body>
<form class="container">
<div class="header">
<h3>统一建模语言理论测试</h3>
<ul class="description">
<li>考试科目：统一建模语言</li>
<li>时间：100分钟</li>
<li>得分：</li>
</ul>
<ul class="personalInfo">
<li>班级（必填）：<input></li>
<li>学号（必填）：<input></li>
<li>姓名（必填）：<input></li>
</ul>
</div>
<div class="body">
<div class="question-block">
<div class="title">
一、填空题(每空5分，共20分)
</div>
<ol>
<li>
<div class="question-title">UML的中文全称是：</div><div><input></div>
</li>
<li>
<div class="question-title">对象最突出的特征是：</div><div><input> <input> <input></div>
</li>
</ol>
</div>
<div class="question-block">
<div class="title">
二、选择题(每题10分，共20分)
</div>
<ol>
<li>
<div class="question-title">UML与软件工程的关系是：</div>
<ul class="radioType">
<li><input type="radio" name="softProject">(A)UML就是软件工程</li>
<li><input type="radio" name="softProject">(B)UML参与到软件工程中软件开发过程的几个阶段</li>
<li><input type="radio" name="softProject">(C)UML与软件工程无关</li>
<li><input type="radio" name="softProject">(D)UML是软件工程的一部分</li>
</ul>
</li>
<li>
<div class="question-title">Java语言支持：</div>
<ul class="radioType">
<li><input type="radio" name="javaSurport">(A)单继承</li>
<li><input type="radio" name="javaSurport">(B)多继承</li>
<li><input type="radio" name="javaSurport">(C)单继承和多继承都支持</li>
<li><input type="radio" name="javaSurport">(D)单继承和多继承都不支持</li>
</ul>
</li>
</ol>
</div>
<div class="question-block">
<div class="title">
三、多项选择题(每题10分，共20分)
</div>
<ol>
<li>
<div class="question-title">用例的粒度分为以下哪三种：</div>
<ul class="selectType">
<li><input type="checkbox" name="multiSelect1">(A)概述级</li>
<li><input type="checkbox" name="multiSelect1">(B)需求级</li>
<li><input type="checkbox" name="multiSelect1">(C)用户目标级</li>
<li><input type="checkbox" name="multiSelect1">(D)子功能级</li>
</ul>
</li>
<li>
<div class="question-title">类图由以下哪三部分组成：</div>
<ul class="selectType">
<li><input type="checkbox" name="multiSelect2">(A)名称(Name)</li>
<li><input type="checkbox" name="multiSelect2">(B)属性(Attribute)</li>
<li><input type="checkbox" name="multiSelect2">(C)操作(Operation)</li>
<li><input type="checkbox" name="multiSelect2">(D)方法(function)</li>
</ul>
</li>
</ol>
</div>
<div class="question-block">
<div class="title">
四、判断题(每题10分，共20分)
</div>
<ol>
<li>
<span class="question-title">用例图只是用于和客户交流和沟通的，用于确定需求。</span>
<input name="No1" type="radio"><input name="No1" type="radio">
</li>
<li>
<span class="question-title">在状态图中，终止状态在一个状态图中允许有任意多个。</span>
<input name="No2" type="radio"><input name="No2" type="radio">
</li>
</ol>
</div>
<div class="question-block">
<div class="title">
五、简答题(每题20分，共20分)
</div>
<ol>
<li>
<div class="question-title">简述什么是模型以及模型的表现形式？</div>
<textarea class="textArea"></textarea>
</li>
</ol>
</div>
</div>
<div class="footer">
<button>计算分数</button>
</div>
</form>
</body>
</html>```
####2、效果图：
####3、实现过程：
- 第一部门试卷抬头，标题用h3，居中，试卷说明用无序列表，靠左对齐；
- 试卷内容统一用.question-block .title两个类选择器，标题字体加粗；
- 问题统一用 .question-title选择器，加粗；
- 提交按钮居中。
网友评论