作业一:用户注册
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="UserName" length="15" maxlength="20"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="UserPass" length="15" maxlength="20"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="like" value="写作">写作
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育
</td>
</tr>
<tr>
<td>省份:</td>
<td>
<select name="province">
<option value="shaanxi" selected>陕西省</option>
<option value="shanxi">山西省</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="send" value="提交"></td>
</tr>
<tr>
<td></td>
<td><input type="reset" name="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
代码截图:
运行截图:
作业二:工商银行电子汇款单
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>工商银行电子汇款单</title>
</head>
<body>
<!--标题-->
<h1>工商银行电子汇款单</h1>
<!--建表格-->
<table
border="1px"
height="650px"
width="1600px"
align="center"
cellspacing="5px"
>
<tr>
<td width="100px" colspan="3"><b>回单类型</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">网上转账汇款</td>
<td width="100px" colspan="3"><b>指令序号</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">HQH0000000000013878172</td>
</tr>
<tr>
<td width="100px" rowspan="4"><b>收款人</b></td>
<td width="100px" colspan="2">户名</td>
<!-- <td width="100px"></td> -->
<td width="900px">老牟</td>
<td width="100px" rowspan="4"><b>付款人</b></td>
<td width="100px" colspan="2">户名</td>
<!-- <td width="100px"></td> -->
<td width="900px">老刘</td>
</tr>
<tr>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2"><b>卡号</b></td>
<!-- <td width="100px"></td> -->
<td width="900px">000000000001</td>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2"><b>卡号</b></td>
<!-- <td width="100px"></td> -->
<td width="900px">000000000002</td>
</tr>
<tr>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2">地区</td>
<!-- <td width="100px"></td> -->
<td width="900px">南京</td>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2">地区</td>
<!-- <td width="100px"></td> -->
<td width="900px">杭州</td>
</tr>
<tr>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2"><b>网点</b></td>
<!-- <td width="100px"></td> -->
<td width="900px">工商江苏南京业务处理中心</td>
<!-- <td width="100px"></td> -->
<td width="100px" colspan="2"><b>网点</b></td>
<!-- <td width="100px"></td> -->
<td width="900px">江苏徐州业务中心</td>
</tr>
<tr>
<td width="100px" colspan="3"><b>币种</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">人民币</td>
<td width="100px" colspan="3"><b>钞汇标志</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">钞票</td>
</tr>
<tr>
<td width="100px" colspan="3"><b>金额</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">1.00元</td>
<td width="100px" colspan="3"><b>手续费</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px">0.57元</td>
</tr>
<tr>
<td width="100px" colspan="3"><b>合计</b></td>
<!-- <td></td>
<td></td> -->
<td width="900px" colspan="5">人民币(大写):壹圆整</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td width="100px" colspan="3"><b>交易时间</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px"><i>2017年6月1日</i></td>
<td width="100px" colspan="3"><b>时间戳</b></td>
<!-- <td width="100px"></td>
<td width="100px"></td> -->
<td width="900px"><i>2017-06-01-13.00.00.00000</i></td>
</tr>
</table>
<p>票据打印时间:2017-06-01 15:00:12</p>
<p><s>票据打印单位:江苏徐州业务中心</s></p>
<p>操作员:大曾</p>
</body>
</html>
代码截图:
![](https://i-blog.csdnimg.cn/direct/e572412a1d2c41989283b7792149afe2.png)
运行截图:
作业三:李白《将进酒》
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将进酒</title>
<style>
body{
font-size: 25px;
}
</style>
</head>
<body>
<h1>《将进酒》 <small>君不见黄河之水天上来</small></h1>
<img src="https://img1.baidu.com/it/u=2884756389,2369719209&fm=253&fmt=auto&app=138&f=JPEG?w=423&h=640" alt="图片" style="float:left">
<pre style="position: absolute; top: 70%; left: 60%; transform: translate(-80%, -80%);">
<b>君不见黄河之水天上来,奔流到海不复回。</b>
<b>君不见高堂明镜悲白发,朝如青丝暮成雪。</b>
<b>人生得意须尽欢,莫使金樽空对月。</b>
<b>天生我材必有用,千金散尽还复来。</b>
<b>烹羊宰牛且为乐,会须一饮三百杯。</b>
<b>岑夫子,丹丘生,将进酒,杯莫停。</b>
<b>与君歌一曲,请君为我侧耳听。</b>
<b>钟鼓馔玉不足贵,但愿长醉不复醒。</b>
<b>古来圣贤皆寂真,惟有饮者留其名。</b>
<b>陈王昔时宴平乐,斗酒十干恣欢谑。</b>
<b>主人何为言少钱,径须沽取对君酌。</b>
<b>五花马,千金裘,</b>
<b>呼儿将出换美酒,与尔同销万古愁。</b>
</pre>
</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>
#gmzr{
position: absolute;
bottom: 53.7%;
left: 15%;
}
#eroyier{
position: absolute;
bottom: 53.7%;
left: 30%;
}
#jxs{
position: absolute;
bottom: 53.7%;
left: 45%;
}
#afd{
position: absolute;
bottom: 53.7%;
left: 60%;
}
#earth{
position: absolute;
bottom: 53.7%;
left: 75%;
}
#xsk{
position: absolute;
bottom: 17.2%;
left: 15%;
}
#cjh{
position: absolute;
bottom: 17.2%;
left: 30%;
}
#alt{
position: absolute;
bottom: 17.2%;
left: 45%;
}
#xjcy{
position: absolute;
bottom: 17.2%;
left: 60%;
}
#hxjy{
position: absolute;
bottom: 17.2%;
left: 75%;
}
</style>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<p>
<b style="font-size: larger;">
最近热门电影
</b>
<pre style="position: absolute; left: 25%;top: 9%; font-size: large;">
热门 最新 豆瓣高分 冷门佳片 华语 欧美 韩国 日本
</pre>
<small style="position: absolute; left: 90%; top: 10%; font-size: large;">
更多>>
</small>
</p>
<hr>
<img src="https://pica.zhimg.com/v2-a1d97c745dc0ea31cae7d2f1e584d246_r.jpg?source=1940ef5c" alt="" width="220" height="280">
<p>猜火车 8.1</p>
<img src="https://img1.ak.crunchyroll.com/i/spire1/df65bc966f9d5dd46062d168c604c53a1675657873_main.jpg" alt="" width="220" height="280">
<p>铃芽之旅 9.0</p>
<img id="gmzr" src="https://p0.itc.cn/images01/20210414/4ef90055bd3041c4b01704d393dff88b.jpeg" alt="" width="220" height="280 ">
<p style="position: absolute; bottom: 47.9%; left: 15%;">鬼灭之刃无限列车篇 9.2</p>
<img id="eroyier" src="https://www.mlito.com/wp-content/uploads/2017/02/IMG_2868.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 47.9%; left: 30%;">2012 9.0</p>
<img id="jxs" src="https://puui.qpic.cn/vcover_vt_pic/0/piegqd6mz97tr8b1559743696/0" alt="" width="220" height="280">
<p style="position: absolute; bottom: 47.9%; left: 45%;">机械师 8.7</p>
<img id="afd" src="https://p1.ssl.qhimg.com/t017600ed3fab15f67c.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 47.9%; left: 60%;">阿凡达 9.8</p>
<img id="earth" src="https://img.zcool.cn/community/0190d95c482013a801213f26396e68.jpg@2o.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 47.9%; left: 75%;">流浪地球 8.4</p>
<img id="xsk" src="https://img.doooor.com/img/forum/201706/23/022947ezlaemy1u4zg1dkd.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 11.9%; left: 15%;">肖申克的救赎 8.9</p>
<img id="cjh" src="https://n.sinaimg.cn/sinakd10111/39/w939h1500/20210712/02ce-f21bc3dd9a220a82fbc27434abb0e10e.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 11.9%; left: 30%;">长津湖 8.7</p>
<img id="alt" src="https://img.zcool.cn/community/01a1df5cde64dea8012141680f1f36.jpg@1280w_1l_2o_100sh.jpg" alt="" width="220" height="280">
<p style="position: absolute; bottom: 11.9%; left: 45%;">阿丽塔战斗天使 8.9</p>
<img id="xjcy" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.9Sb7ZVbxjKeVmf320jjedAAAAA?rs=1&pid=ImgDetMain" alt="" width="220" height="280">
<p style="position: absolute; bottom: 11.9%; left: 60%;">星际穿越 9.7</p>
<img id="hxjy" src="https://gd-hbimg.huaban.com/0dda05d0b855805fce7ce4227011b3da953ff77547bac-DyXsZR_fw658" alt="" width="220" height="280">
<p style="position: absolute; bottom: 11.9%; left: 75%;">火星救援 9.2</p>
</body>
</html>