完成表格的跨行合并功能
<!DOCTYPE html>
<html>
<head>
<title>表格作业demo</title>
<meta charset="utf-8">
<style>
table{border-collapse: collapse;text-align: center;}
tr{height: 40px}
caption{font-weight: bold;margin-bottom: 10px;font-size: 18px}
</style>
</head>
<body>
<table border="1">
<caption>中美MBA报名表</caption>
<tbody>
<tr>
<td style="width: 70px">姓名</td>
<td style="width: 100px"></td>
<td style="width: 60px">性别</td>
<td style="width: 70px"></td>
<td colspan="2">出生日期</td>
<td colspan="2"></td>
<td rowspan="4" style="width: 117px">照片</td>
</tr>
<tr>
<td>家庭住址</td>
<td colspan="3"></td>
<td>邮编</td>
<td></td>
<td style="width: 80px">家庭电话</td>
<td style="width: 70px"></td>
</tr>
<tr>
<td>办公住址</td>
<td colspan="3"></td>
<td style="width: 60px">邮编</td>
<td style="width: 100px"></td>
<td>办公电话</td>
<td></td>
</tr>
<tr>
<td>工作单位</td>
<td colspan="3"></td>
<td>行业</td>
<td></td>
<td>企业性质</td>
<td></td>
</tr>
<tr>
<td>所在部位</td>
<td ></td>
<td style="display: inline-block;height: 40px">职务</td>
<td ></td>
<td>手机</td>
<td></td>
<td>E-mail</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>2. 独立完成一个用户注册表单
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<style type="text/css">
.main{width: 600px;background: #ccc}
.left{width: 260px;background: lightblue;float: left;}
.left input{float: right;}
.right{width: 300px;background: lightyellow;float: right;}
.right input{float: right;}
</style>
</head>
<body>
<div class="main">
<p>
<label for="username">用户名：</label>
<input type="text" name="" id="username">
</p>
<div class="left">
<p>
<label for="password">密码：</label>
<input type="password" name="" id="password">
</p>
<p>
<label for="confirmCode">确认密码：</label>
<input type="password" name="" id="confirmCode">
</p>
<p>
<label>证件类型：</label>
<select style="width: 171px;border: 0;margin-left: 3px">
<option>***</option>
<option>户口本</option>
<option>驾驶证</option>
</select>
</p>
<p>
<label>证件号码：</label>
<input type="" name="">
</p>
<p>
<label>联系号码：</label>
<input type="" name="">
</p>
<p>
<label>手机号码：</label>
<input type="" name="">
</p>
<p>
<label>E-mail：</label>
<input type="" name="">
</p>
</div>
<div class="right">
<p>
<label for="turename">真实姓名：</label>
<input type="text" name="" id="turename">
</p>
<p>
<label>性别：</label>
<select style="float: right;width: 173px">
<option>男</option>
<option>女</option>
<option>保密</option>
</select>
</p>
<p>
<label>出生日期:</label>
<input type="" name="">
</p>
<p>
<label>国家：</label>
<input type="" name="">
</p>
<p>
<label>城市：</label>
<input type="" name="">
</p>
<p>
<label>邮箱：</label>
<input type="" name="">
</p>
</div>
<p style="clear: both;">
<label>联系地址</label>
<input type="" name="">
</p>
<button>重置</button>
<button>注册</button>
</div>
</body>
</html>3. 制作一个简易的后台首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单后台首页</title> </head> <body> <ul style="float: left"> <li><a href="https://www.baidu.com/" target="main">百度</a></li> <li><a href="https://www.so.com/" target="main">搜狐</a></li> <li><a href="https://www.sogou.com/" target="main">搜狗</a></li> </ul> <iframe src="" frameborder="1" name="main" height="600px" width="800px" style="float: left"></iframe> </body> </html>