作业一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
td{
width: 100px;
height: 25px;
}
thead td{
background-color: #ccc;
}
tbody td{
background-color: #ddd;
}
tfoot td{
background-color: #ccc;
}
</style>
</head>
<body>
<form method="get">
<table>
<thead>
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
</thead>
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" name="用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" password="密码"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="性别">男
<input type="radio" name="性别">
</td>
</tr>
<tr>
<tr>爱好</tr>
<td>
<td><input type="checkbox" name="写作"></td>
<td><input type="checkbox" name="听音乐"></td>
<td><input type="checkbox" name="体育"></td>
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="省份">
<option value="四川">四川</option>
<option value="新疆">新疆</option>
<option value="陕西">陕西</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="自我介绍" cols="30" rows="10"></textarea></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
页面展示:
作业二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工行汇款单</title>
<style>
td{
height: 15px;
width: 200px;
font-size: 20px;
padding: 10px;
}
.one{
width: 350px;
}
.two{
width: 5px;
}
</style>
</head>
<body initial-scale="100%">
<div>
<div class="top">
<h1>工商银行电子汇款单</h1>
</div>
<div>
<table border="1px" cellspacing="0">
<tr>
<td colspan="2">
<h3>回单类型</h3>
</td>
<td class="one">
网上转账汇款
</td>
<td colspan="2">
<h3>指令序号</h3>
</td>
<td class="one">
HQH0000000000000013878172
</td>
</tr>
<tr>
<td rowspan="4" class="two">
<h3>收款人</h3>
</td>
<td>
户名
</td>
<td class="one">
老大
</td>
<td rowspan="4" class="two">
<h3>付款人</h3>
</td>
<td>
户名
</td>
<td class="one">
老二
</td>
</tr>
<tr>
<td>
<h3>卡号</h3>
</td>
<td class="one">
000000000001
</td>
<td>
<h3>卡号</h3>
</td>
<td class="one">
000000000002
</td>
</tr>
<tr>
<td>
地区
</td>
<td class="one">
陕西
</td>
<td>
地区
</td>
<td class="one">
西安
</td>
</tr>
<tr>
<td>
<h3>网点</h3>
</td>
<td class="one">
工商陕西西安业务处理中心
</td>
<td>
<h3>网点</h3>
</td>
<td class="one">
陕西延安业务中心
</td>
</tr>
<tr>
<td colspan="2">
<h3>币种</h3>
</td>
<td class="one">
人民币
</td>
<td colspan="2">
<h3>钞汇标志</h3>
</td>
<td class="one">
钞票
</td>
</tr>
<tr>
<td colspan="2">
<h3>金额</h3>
</td>
<td class="one">
1.00元
</td>
<td colspan="2">
<h3>手续费</h3>
</td>
<td class="one">
0.57元
</td>
</tr>
<tr>
<td colspan="2">
<h3>合计</h3>
</td>
<td colspan="4">
人民币(大写):壹元整
</td>
</tr>
<tr>
<td colspan="2">
<h3>交易时间</h3>
</td>
<td class="one">
<i>2024年7月1日</i>
</td>
<td colspan="2">
<h3>时间戳</h3>
</td>
<td class="one">
<i>2024-07-01-13.00.00,00000</i>
</td>
</tr>
</table>
</div>
</div>
<p>票据打印时间:2024-07-01 15:00:12</p>
<p><del>票据打印单位:陕西西安业务中心</del></p>
<p>操作员:老大大</p>
</body>
</html>
页面展示:
作业三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将进酒</title>
</head>
<body>
<h1>将进酒 <small>君不见黄河之水天上来</small></h1>
<table>
<td><img src="https://ts1.cn.mm.bing.net/th/id/R-C.970a46a72448009ba29be752382b6b18?rik=SbztlOUDEO4%2bgQ&riu=http%3a%2f%2fimg.ifeng.com%2fres%2f200710%2f1029_213567.jpg&ehk=dum6UIWDDJlyK6V%2f%2fX%2bZWYyl1aW1ozoAk0UW%2blzSWeE%3d&risl=&pid=ImgRaw&r=0" alt='' width="150"
height="200"></td>
<td><p>
君不见黄河之水天上来,奔流到海不复回。<br>
君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
人生得意须尽欢,莫使金樽空对月。<br>
天生我材必有用,千金散尽还复来。<br>
烹羊宰牛且为乐,会须一饮三百杯。<br>
岑夫子,丹丘生,将进酒,杯莫停。<br>
与君歌一曲,请君为我侧耳听。<br>
钟鼓馔玉不足贵,但愿长醉不复醒。<br>
古来圣贤皆寂真,惟有饮者留其名。<br>
陈王昔时宴平乐,斗酒十干恣欢谑。<br>
主人何为言少钱,径须沽取对君酌。<br>
五花马,千金裘,<br>
呼儿将出换美酒,与尔同销万古愁。<br></p></td>
</table>
</body>
</html>
页面展示:
作业四:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>喵的大白兔电影</title>
<style>
td{
width: 80px;
}
img{
width: 200px;
height: 290px;
}
</style>
</head>
<body>
<div>
<div class="top">
<h1>
喵的大白兔电影
</h1>
</div>
<hr>
<div class="mid">
<table>
<tr>
<td style="width: 200px;">
<h3>最近热门电影</h3>
</td>
<td>
动作
</td>
<td>
爱情
</td>
<td style="width: 100px;">
喜剧
</td>
<td style="width: 100px;">
科幻
</td>
<td>
恐怖
</td>
<td>
战争
</td>
<td>
犯罪
</td>
<td style="width: 250px;">
历史
</td>
<td>
更多>>
</td>
</tr>
</table>
<hr>
<div>
<table>
<tr>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/942761_5ZIZ_wm0Q_GW_k3_1721569717/0">
<p>泳者之心</p>
</div>
</td>
<td>
<div>
<img src="https://img-nos.yiyouliao.com/alph/8018e49cd581b3809fcd27bc20a6c9dd.jpeg?yiyouliao_channel=msn_image">
<p>默杀</p>
</div>
</td>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/256062_B_OjJtXjRy6bc_k_1721226411/0">
<p>黑夜谜踪</p>
</div>
</td>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/888082_tc-BN5egSx-Q-YG_1721544018/0">
<p>谈判专家</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/545373_V3okmyeTQzyo09f_1721437561/0">
<p>死人</p>
</div>
</td>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/183340_vLg3FNjEQaOWP7Q_1721227679/0">
<p>加菲猫家族</p>
</div>
</td>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/49617_sIFdEbrrTmO6W-p_1721632458/0">
<p>走走停停</p>
</div>
</td>
<td>
<div>
<img src="https://wework.qpic.cn/wwpic3az/204989_sL8QkZlPSReAAko_1721835185/0">
<p>尸体沐浴</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
页面展示;