- ul ol li study
html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<ul>
<li>JaveScript
<ol>
<li>第一章
<ul type="square">
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul type="square">
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul type="square">
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul type="square">
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
</body>
</html>
preview:
list.PNG
- table study
html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<table border="1" cellpadding="5">
<caption>購(gòu)物車(chē)</caption>
<tr>
<th rowspan="2">名稱(chēng)</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th></tr>
<tr>
<th>重量</th>
<th>單價(jià)</th></tr>
<tr>
<th>蘋(píng)果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td></tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td></tr>
<tr>
<th colspan="3">總價(jià)</th>
<td>27元</td></tr>
</table>
</body>
</html>
preview:
table.PNG
- html and css
html code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form>
<h1>統(tǒng)一建模語(yǔ)言理論測(cè)試</h1>
<div class="topContent" id="div1">
<span>考試科目：統(tǒng)一建模語(yǔ)言</span>
<span>時(shí)間：100分鐘</span>
<span>得分：</span>
</div >
<div class="topContent" id="div2">
<span>
班級(jí)（必填）：
<input type="text"/>
</span>
<span>
學(xué)號(hào)（必填）：
<input type="text"/>
</span>
<span>
姓名（必填）：
<input type="text"/>
</span>
</div>
<div class="middleContent">
<div class="title">
一缎玫、填空題（每空5分蛇受，共20分）
</div>
<div class="content" id="fill">
<p>
1.UML的中文全稱(chēng)是：
</p>
<p> <input type="text"/></p>
<p>
2.對(duì)象最突出的特征是：</p>
<p> <input type="text"/><input type="text"/><input type="text"/></p>
</div>
</div>
<div class="middleContent">
<div class="title">
二、選擇題（每題10分闪水，共20分）
</div>
<div class="content" id="select">
<p>1.UML與軟件工程的關(guān)系是： </p>
<input type="radio" name="select1" value="A1"/>(A)UML就是軟件工程</br>
<input type="radio" name="select1" value="B1"/>(B)UML參與軟件工程中軟件開(kāi)發(fā)過(guò)程的幾個(gè)階段</br>
<input type="radio" name="select1" value="C1"/>(C)UML與軟件工程無(wú)關(guān)</br>
<input type="radio" name="select1" value="D1"/>(D)UML是軟件工程的一部分</br>
<p>2.Java語(yǔ)言支持： </p>
<input type="radio" name="select2" value="A2"/>(A)單繼承</br>
<input type="radio" name="select2" value="B2"/>(B)多繼承</br>
<input type="radio" name="select2" value="C2"/>(C)單繼承和多繼承都支持</br>
<input type="radio" name="select2" value="D2"/>(D)單繼承和多繼承都不支持</br>
</div>
</div>
<div class="middleContent">
<div class="title">
三、多項(xiàng)選擇題（每題10分孕索，共20分）
</div>
<div class="content" id="mutiselect">
<p>1.用例的粒度分為以下哪三種： </p>
<input type="checkbox" name="check1" value=""/>(A)概述級(jí)</br>
<input type="checkbox" name="check2" value=""/>(B)需求級(jí)</br>
<input type="checkbox" name="check3" value=""/>(C)用戶(hù)目標(biāo)級(jí)</br>
<input type="checkbox" name="check4" value=""/>(D)子功能級(jí)</br>
<p>2.類(lèi)圖由以下哪三部分組成： </p>
<input type="checkbox" name="check5" value=""/>(A)名稱(chēng)（Name）</br>
<input type="checkbox" name="check6" value=""/>(B)屬性（Attribute）</br>
<input type="checkbox" name="check7" value=""/>(C)操作（Operation）</br>
<input type="checkbox" name="check8" value=""/>(D)方法（Function）</br>
</div>
</div>
<div class="middleContent">
<div class="title">
二澎办、判斷題（每題10分，共20分）
</div>
<div class="content" id="judge">
<p>1.用例圖只是和客戶(hù)交流和溝通煌茬，用于確定需求。
<input type="radio" name="select3" value="yes1"/>√
<input type="radio" name="select3" value="no1"/>×
</p>
<p>2.在狀態(tài)圖中彻桃，終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)坛善。
<input type="radio" name="select4" value="yes2"/>√
<input type="radio" name="select4" value="no2"/>×
</p>
</div>
</div>
<div class="middleContent">
<div class="title">
五、簡(jiǎn)答題（每題20分邻眷，共20分）
</div>
<div class="content" id="answer">
<p>1.簡(jiǎn)述什么是模型以及模型的表現(xiàn)形式眠屎？</br></br>
<textarea id="textarea"></textarea>
</p>
</div>
</div>
<p>
<input type="submit" value="計(jì)算分?jǐn)?shù)" id="submit"/></p>
</form>
</body>
</html>
CSS Code:
h1{
text-align:center;
}
div{
width:1000px;
margin:0 auto;
border:#C0C0C0 solid thin;
font-size:8pt;
}
.topContent{
height:40px;
margin-bottom:15px;
}
.middleContent{
margin-bottom:15px;
}
.content{
padding-bottom:15px;
}
#div1 span{
line-height:40px;
padding-right:200px;
padding-left:10px;
}
#div2 span{
line-height:40px;
padding-right:90px;
padding-left:10px;
}
#div2 input{
width:120px;
}
.title{
background-color:#E8E8E8;
height:40px;
font-weight:bold;
font-size:13pt;
line-height:40px;
}
#fill p{
margin-left:20px;
height:15px;
color:black;
}
#fill input{
margin-left:10px;
}
.content p{
margin-left:20px;
font-weight:bold;
}
.content input{
margin-left:30px;
font-weight:thin;
}
#textarea{
height:80px;
width:900px;
margin-left:10px;
}
#submit{
width:70px;
height:30px;
color:white;
background-color:#3366FF;
margin-left:900px;
text-align:center;
}
preview:
picture 1
picture 2
