- 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>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th></tr>
<tr>
<th>重量</th>
<th>单价</th></tr>
<tr>
<th>苹果</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">总价</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>统一建模语言理论测试</h1>
<div class="topContent" id="div1">
<span>考试科目：统一建模语言</span>
<span>时间：100分钟</span>
<span>得分：</span>
</div >
<div class="topContent" id="div2">
<span>
班级（必填）：
<input type="text"/>
</span>
<span>
学号（必填）：
<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的中文全称是：
</p>
<p> <input type="text"/></p>
<p>
2.对象最突出的特征是：</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与软件工程的关系是： </p>
<input type="radio" name="select1" value="A1"/>(A)UML就是软件工程</br>
<input type="radio" name="select1" value="B1"/>(B)UML参与软件工程中软件开发过程的几个阶段</br>
<input type="radio" name="select1" value="C1"/>(C)UML与软件工程无关</br>
<input type="radio" name="select1" value="D1"/>(D)UML是软件工程的一部分</br>
<p>2.Java语言支持： </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">
三、多项选择题（每题10分，共20分）
</div>
<div class="content" id="mutiselect">
<p>1.用例的粒度分为以下哪三种： </p>
<input type="checkbox" name="check1" value=""/>(A)概述级</br>
<input type="checkbox" name="check2" value=""/>(B)需求级</br>
<input type="checkbox" name="check3" value=""/>(C)用户目标级</br>
<input type="checkbox" name="check4" value=""/>(D)子功能级</br>
<p>2.类图由以下哪三部分组成： </p>
<input type="checkbox" name="check5" value=""/>(A)名称（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.用例图只是和客户交流和沟通，用于确定需求。
<input type="radio" name="select3" value="yes1"/>√
<input type="radio" name="select3" value="no1"/>×
</p>
<p>2.在状态图中，终止状态在一个状态图中允许有任意多个。
<input type="radio" name="select4" value="yes2"/>√
<input type="radio" name="select4" value="no2"/>×
</p>
</div>
</div>
<div class="middleContent">
<div class="title">
五、简答题（每题20分，共20分）
</div>
<div class="content" id="answer">
<p>1.简述什么是模型以及模型的表现形式？</br></br>
<textarea id="textarea"></textarea>
</p>
</div>
</div>
<p>
<input type="submit" value="计算分数" 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
