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>統(tǒng)一建模語(yǔ)言理論測(cè)試</h3>
<ul class="description">
<li>考試科目：統(tǒng)一建模語(yǔ)言</li>
<li>時(shí)間：100分鐘</li>
<li>得分：</li>
</ul>
<ul class="personalInfo">
<li>班級(jí)（必填）：<input></li>
<li>學(xué)號(hào)（必填）：<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">對(duì)象最突出的特征是：</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與軟件工程的關(guān)系是：</div>
<ul class="radioType">
<li><input type="radio" name="softProject">(A)UML就是軟件工程</li>
<li><input type="radio" name="softProject">(B)UML參與到軟件工程中軟件開發(fā)過(guò)程的幾個(gè)階段</li>
<li><input type="radio" name="softProject">(C)UML與軟件工程無(wú)關(guān)</li>
<li><input type="radio" name="softProject">(D)UML是軟件工程的一部分</li>
</ul>
</li>
<li>
<div class="question-title">Java語(yǔ)言支持：</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">
三感论、多項(xiàng)選擇題(每題10分绅项，共20分)
</div>
<ol>
<li>
<div class="question-title">用例的粒度分為以下哪三種：</div>
<ul class="selectType">
<li><input type="checkbox" name="multiSelect1">(A)概述級(jí)</li>
<li><input type="checkbox" name="multiSelect1">(B)需求級(jí)</li>
<li><input type="checkbox" name="multiSelect1">(C)用戶目標(biāo)級(jí)</li>
<li><input type="checkbox" name="multiSelect1">(D)子功能級(jí)</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">在狀態(tài)圖中芳绩，終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)掀亥。</span>
<input name="No2" type="radio"><input name="No2" type="radio">
</li>
</ol>
</div>
<div class="question-block">
<div class="title">
五、簡(jiǎn)答題(每題20分示括，共20分)
</div>
<ol>
<li>
<div class="question-title">簡(jiǎn)述什么是模型以及模型的表現(xiàn)形式铺浇？</div>
<textarea class="textArea"></textarea>
</li>
</ol>
</div>
</div>
<div class="footer">
<button>計(jì)算分?jǐn)?shù)</button>
</div>
</form>
</body>
</html>```
####2、效果圖：
####3垛膝、實(shí)現(xiàn)過(guò)程：
- 第一部門試卷抬頭鳍侣，標(biāo)題用h3丁稀，居中，試卷說(shuō)明用無(wú)序列表倚聚，靠左對(duì)齊线衫；
- 試卷內(nèi)容統(tǒng)一用.question-block .title兩個(gè)類選擇器，標(biāo)題字體加粗惑折；
- 問(wèn)題統(tǒng)一用 .question-title選擇器授账，加粗；
- 提交按鈕居中惨驶。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
