第一题:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<form action="https://www.baidu.com">
<div style="background-color: rgb(179, 176, 176);width: 300px;height: 26px;text-align: center;border: 1px solid white;">用户注册</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;border: 1px solid white;">
<table>
<tr>
<td width="30%" align="right">用户名</td>
<td width="70%" align="left"><input type="text" maxlength="20"></td>
</tr>
</table>
</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
<table>
<tr>
<td width="30%" align="right">密码</td>
<td width="70%" align="left" ><input type="password"></td>
</tr>
</table>
</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
<table>
<tr>
<td width="72px" align="right">性别</td>
<td width="" align="left"><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>
</tr>
</table>
</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
<table>
<tr>
<td width="72px" align="right">爱好</td>
<td width="" align="left"><input type="checkbox" name="like" value="写作">写作
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育
</td>
</tr>
</table>
</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
<table>
<tr>
<td width="72px" align="right">省份</td>
<td width="" align="left">
<select name="province">
<option value="shaanxi">陕西省</option>
<option value="shhanx">山西省</option>
</select>
</td>
</tr>
</table>
</div>
<div style="background-color: rgb(231, 228, 228);width: 300px;height: 60px;text-align: center;border: 1px solid white;">
<table height="60px">
<tr line-height="60px">
<td width="72px" align="right">自我介绍</td>
<td width="25" height="5" align="left" line-height="60px" height="60px"><textarea name="introduce" height="80px" cols="30" rows="3" placeholder="这个家伙什么也没有留下"></textarea></td>
</tr>
</table>
</div>
<div style="background-color: rgb(179, 176, 176);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
<table>
<tr>
<td width="140px" align="right"><button type="button" value="send">提交</button></td>
<td width="" align="left"><button type="reset" value="resert">重置</button></td>
</tr>
</table>
</div>
</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>Document</title>
</head>
<body>
<span>
<h1>工商银行电子汇款单</h1>
</span>
<table border="1px" cellspacing="0" width="900px" height="405px">
<tr height="45px">
<td width="5%" colspan="2">袁成</td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
<td width="5%" colspan="2">我cnm</td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
</tr>
<tr height="45px">
<td width="5%" rowspan="4"></td>
<td width="10%"></td>
<td width="35%"></td>
<td width="5%" rowspan="4"></td>
<td width="10%"></td>
<td width="35%"></td>
</tr>
<tr height="45px">
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
</tr>
<tr height="45px">
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
</tr>
<tr height="45px">
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
<!-- <td width="5%"></td> -->
<td width="10%"></td>
<td width="35%"></td>
</tr>
<tr height="45px">
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
</tr>
<tr height="45px">
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
</tr>
<tr height="45px">
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%" colspan="4"></td>
<!-- <td width="5%"></td> -->
<!-- <td width="10%"></td> -->
<!-- <td width="35%"></td> -->
</tr>
<tr height="45px">
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
<td width="5%" colspan="2"></td>
<!-- <td width="10%"></td> -->
<td width="35%"></td>
</tr>
</table>
<p>票据打印时间:2017-06-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>Document</title>
</head>
<body>
<div style="width:500px;height:65px;">
<h1>将近酒<small> 君不见黄河之水天上来</small></h1>
</div>
<table width="650px" height="500px" >
<tr>
<td valign="top"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.7f21b905ae1df9b243a06e59cc6c87ba?rik=AHFD2pLq7r3zfw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f07%2f87%2fQOYEjZffn1.jpg&ehk=xAbtE9G6cBxze%2fa3PfboX36516l9iZsU58u8zkUg%2fu4%3d&risl=&pid=ImgRaw&r=0" width="280px"></td>
<td width="70%" valign="top">
君不见黄河之水天上来,奔流到海不复回。
<p>君不见高堂明镜悲白发,朝如青丝暮成雪。</p>
<p>人生得意须尽欢,莫使金樽空对月。</p>
<p>天生我材必有用,千金散尽还复来。</p>
<p>京羊宰生且为乐,会须一饮三百杯。</p>
<p>岑夫子,丹丘生,将进酒,杯莫停。</p>
<p>与君歌一曲,请君为我侧耳听。</p>
<p>钟鼓馔玉不足贵,但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞,惟有饮者留其名。</p>
<p>陈王昔时宴平乐,斗酒十千恣欢谑!</p>
<p>主人何为言少钱,径须沽取对君酌。</p>
<p>五花马,千金袭,</p>
<p>呼儿将出换美酒,与尔同销万古愁,</p>
</td>
</tr>
</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>Document</title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table>
<tr>
<td width="360px"><big><b>最近热门电影</b></big></td>
<td width="90px"><big>热门</big></td>
<td width="90px"><big>最新</big></td>
<td width="120px"><big>豆瓣高分</big></td>
<td width="120px"><big>冷门佳片</big></td>
<td width="90px"><big>华语</big></td>
<td width="90px"><big>欧美</big></td>
<td width="90px"><big>韩国</big></td>
<td width="350px"><big>日本</big></td>
<td width="70px"><big>更多>></big></td>
</tr>
</table>
<hr>
<table>
<tr>
<td width="200px"><img src="https://img.zcool.cn/community/0130215bf57cb3a80121ab5db623c5.jpg@2o.jpg" alt="" width="400px" height="600px"></td>
<td width="200px"><img src="https://img.zcool.cn/community/0198425d33fa68a80120695c145f04.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
<td width="200px"><img src="https://img.zcool.cn/community/011d3855685d790000012716399ff2.jpg@2o.jpg" alt="" width="400px" height="600px"></td>
<td><img src="https://img.zcool.cn/community/010c3259802d63a8012156034f0295.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
</tr>
<tr>
<td>死侍2</td>
<td>寒战</td>
<td>金刚狼</td>
<td>战狼2</td>
</tr>
<tr>
<td><img src="https://img.zcool.cn/community/01c1335d3ffa0fa8012187f4a957bc.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
<td><img src="https://img.zcool.cn/community/0124e05c47fa99a801203d22e36935.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
<td><img src="https://img.zcool.cn/community/010fb855ec5acc6ac7251df80ffcfd.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
<td><img src="https://img.zcool.cn/community/013d155c184b96a801209252b7c631.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
</tr>
<tr>
<td>烈火英雄</td>
<td>流浪地球</td>
<td>三体</td>
<td>盗墓笔记</td>
</tr>
</table>
</body>
</html>
截图: