一、任務(wù)目標(biāo)
預(yù)期效果圖
二、任務(wù)分解
- 先是看了Bootcss 用其中可以設(shè)置的樣式改變了一下，主要是
input的樣式、table的樣式、還有button的樣式 - 用
border設(shè)置邊框的樣子
三實(shí)現(xiàn)
- 代碼：
<!DOCTYPE html>
<html lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>統(tǒng)一建模語言測試題</title>
<link rel="stylesheet">
<style>
.panel {
border: 1px solid;
}
.title {
border: 1px solid;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form>
<header>
<center><h3>統(tǒng)一建模語言理論測試</h3></center>
<table class="table">
<tr class="active">
<td><label>考試科目:統(tǒng)一建模語言</label></td>
<td><label>時(shí)間：100分鐘</label></td>
<td><label>得分:</label></td>
</tr>
<tr class="active form-inline">
<td>
<label for="className">班級(jí)（必填）：</label>
<input class="form-control" type="text" id="className">
</td>
<td><label for="studentNumber">學(xué)號(hào)（必填）：</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與軟件工程的關(guān)系是</label>
<div>
<input type="radio" value="A">(A)UML就是軟件工程
</div>
<div>
<input type="radio" value="B">(B)UML參與到軟件工程中軟件開發(fā)過程的幾個(gè)階段
</div>
<div>
<input type="radio" value="C">(C)UML與軟件工程無關(guān)
</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)概述級(jí)
</div>
<div>
<input type="checkbox" value="B"> (B)需求級(jí)
</div>
<div>
<input type="checkbox" value="C"> (C)用戶目標(biāo)級(jí)
</div>
<div>
<input type="checkbox" value="D"> (D)子功能級(jí)
</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>在狀態(tài)圖中，終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)。</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>簡述什么是模型以及模型的表現(xiàn)形式？</label>
<textarea class="form-control" rows="8"></textarea>
</li>
</ol>
</section>
<center>
<button class="btn btn-info" type="button">計(jì)算分?jǐn)?shù)</button>
</center>
</form>
</body>
</html>
- 效果圖：
實(shí)際效果圖
（四）總結(jié)
- 這個(gè)作業(yè)任務(wù)用時(shí)較長，主要是不太想用CSS去寫，感覺有點(diǎn)麻煩，這是需要改進(jìn)的地方，以后的任務(wù)中要認(rèn)真對待每一個(gè)作業(yè)，學(xué)什么用什么
- 從卓越女生論壇上面學(xué)到了不應(yīng)該用
<br>,而是用<div>包起來，就像分離出一個(gè)個(gè)組件那樣
