一、任务目标
预期效果图
二、任务分解
- 先是看了Bootcss 用其中可以设置的样式改变了一下，主要是
input的样式、table的样式、还有button的样式 - 用
border设置边框的样子
三实现
- 代码：
<!DOCTYPE html>
<html lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>统一建模语言测试题</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
.panel {
border: 1px solid;
}
.title {
border: 1px solid;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form>
<header>
<center><h3>统一建模语言理论测试</h3></center>
<table class="table">
<tr class="active">
<td><label>考试科目:统一建模语言</label></td>
<td><label>时间：100分钟</label></td>
<td><label>得分:</label></td>
</tr>
<tr class="active form-inline">
<td>
<label for="className">班级（必填）：</label>
<input class="form-control" type="text" id="className">
</td>
<td><label for="studentNumber">学号（必填）：</label>
<input class="form-control" type="text" id="studentNumber">
</td>
<td>
<label for="studentName">姓名（必填）：</label>
<input class="form-control" type="text" id="studentName">
</td>
</tr>
</table>
</header>
<section class="panel">
<header class="title">
<h3>一、填空题（每空5分，共20分）</h3>
</header>
<ol>
<li>
<label>UML的中文全称是：</label>
<div class="input-group">
<input class="form-control" type="text">
</div>
</li>
<li>
<label>对象最突出的特征是：</label>
<div class="form-inline">
<input class="form-control" type="text">
<input class="form-control" type="text">
<input class="form-control" type="text">
</div>
</li>
</ol>
</section>
<section class="panel">
<header class="title">
<h3>二、选择题（每题10分，共20分）</h3>
</header>
<ol>
<li>
<label>UML与软件工程的关系是</label>
<div>
<input type="radio" value="A">(A)UML就是软件工程
</div>
<div>
<input type="radio" value="B">(B)UML参与到软件工程中软件开发过程的几个阶段
</div>
<div>
<input type="radio" value="C">(C)UML与软件工程无关
</div>
<div>
<input type="radio" value="D">(D)UML是软件工程的一部分
</div>
</li>
<li>
<label>JAVA语言支持</label>
<div>
<input type="radio" value="A"> (A)单继承
</div>
<div>
<input type="radio" value="B"> (B)多继承
</div>
<div>
<input type="radio" value="C"> (C)单继承和多继承都支持
</div>
<div>
<input type="radio" value="D"> (D)单继承和多继承都不支持
</div>
</li>
</ol>
</section>
<section class="panel">
<header class="title">
<h3>三、多选题（每题10分，共20分）</h3>
</header>
<ol>
<li>
<label>用例的粒度分为以下那三种。</label>
<div>
<input type="checkbox" value="A"> (A)概述级
</div>
<div>
<input type="checkbox" value="B"> (B)需求级
</div>
<div>
<input type="checkbox" value="C"> (C)用户目标级
</div>
<div>
<input type="checkbox" value="D"> (D)子功能级
</div>
</li>
<li>
<label>类图由以下哪三部分组。</label>
<div>
<input type="checkbox" value="A"> (A)名称(Name)
</div>
<div>
<input type="checkbox" value="B"> (B)属性(Attribute)
</div>
<div>
<input type="checkbox" value="C"> (C)操作(Operation)
</div>
<div>
<input type="checkbox" value="D"> (D)方法(Function)
</div>
</li>
</ol>
</section>
<section class="panel">
<header class="title">
<h3>四、判断题（每题10分，共20分）</h3>
</header>
<ol>
<li>
<label>用例图只是用于和客户交流和沟通的，用于确定需求。</label>
<input name="radio1" type="radio" value="T">T
<input name="radio1" type="radio" value="F">F
</li>
<li>
<label>在状态图中，终止状态在一个状态图中允许有任意多个。</label>
<input name="radio2" type="radio" value="T">T
<input name="radio2" type="radio" value="F">F
</li>
</ol>
</section>
<section class="panel">
<header class="title">
<h3>五、简答题(每题20分，共20分)</h3>
</header>
<ol>
<li>
<label>简述什么是模型以及模型的表现形式？</label>
<textarea class="form-control" rows="8"></textarea>
</li>
</ol>
</section>
<center>
<button class="btn btn-info" type="button">计算分数</button>
</center>
</form>
</body>
</html>
- 效果图：
实际效果图
（四）总结
- 这个作业任务用时较长，主要是不太想用CSS去写，感觉有点麻烦，这是需要改进的地方，以后的任务中要认真对待每一个作业，学什么用什么
- 从卓越女生论坛上面学到了不应该用
<br>,而是用<div>包起来，就像分离出一个个组件那样
