web第一次作业
题1：
<form action="#" method="post"><table><tr><td>用户名：</td><td><input type="text" name="UserName" maxlength="20" size="15"></td></tr><tr><td>密码：</td><td><input type="password" name="UserPass" maxlength="20" size="15"></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="shanx">山西省</option></select></td></tr><tr><td>自我介绍：</td><td><textarea name="intro" rows="5" cols="25">这个家伙什么也没留下</textarea></td></tr><tr><td></td><td><input type="submit" name="send" value="提交"><input type="reset" name="reset" value="重置"></td></tr></table>
</form>
运行结果：
题目2：
<!DOCTYPE html>
<html>
<head><title>将进酒</title><style>h1 {font-weight: bold;}h5 {font-family: Arial, sans-serif;line-height: 2.8; /* 调整行高 */}img {float: left;margin-right: 10px;vertical-align: top;}.poem-container {display: inline-block;}</style>
</head>
<body><h1>将进酒</h1><img src="li_bai.png" alt="李白的图片"><h5>君不见，黄河之水天上来，奔流到海不复回。<br>君不见，高堂明镜悲白发，朝如青丝暮成雪。<br>人生得意须尽欢，莫使金樽空对月。<br>天生我材必有用，千金散尽还复来。<br>烹羊宰牛且为乐，会须一饮三百杯。<br>岑夫子，丹丘生，将进酒，杯莫停。<br>与君歌一曲，请君为我倾耳听。<br>钟鼓馔玉不足贵，但愿长醉不复醒。<br>古来圣贤皆寂寞，惟有饮者留其名。<br>陈王昔时宴平乐，斗酒十千恣欢谑。<br>主人何为言少钱，径须沽取对君酌。<br>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br></h5>
</body>
</html>
运行结果：
题目3：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>工商银行电子汇款单</title><style>table {border-collapse: collapse;margin: 20px;}caption {font-size: 24px;font-weight: bold;margin-bottom: 10px;}th, td {padding: 10px;text-align: left;}th {background-color: #f2f2f2;}tfoot td:nth-child(odd) {background-color: #f2f2f2;}tfoot td:nth-child(even) {text-align: right;font-weight: bold;}tfoot tr:first-child td {font-weight: bold;}</style>
</head>
<body><table width="1000" border="1" cellspacing="0"><caption><h1>工商银行电子汇款单</h1></caption><thead><tr><th colspan="2">回单类型</th><th>网上转账汇款</th><th colspan="2">指令序号</th><th>HQH0000000000000013878172</th></tr></thead><tbody><tr><td rowspan="4">收款人</td><th>户名</th><td>老牟</td><td rowspan="4">付款人</td><th>户名</th><td>老刘</td></tr><tr><th>卡号</th><td>000000000001</td><th>卡号</th><td>000000000002</td></tr><tr><th>地区</th><td>南京</td><th>地区</th><td>杭州</td></tr><tr><th>网点</th><td>工商江苏南京业务处理中心</td><th>网点</th><td>江苏徐州业务中心</td></tr><th colspan="2">币种</th><td>人民币</td><th colspan="2">秒汇标志</th><td>钞票</td></tr><tr><th colspan="2">金额</th><td >1000000.00元</td><th colspan="2">手续费</th><td >100</td></tr><tr><th colspan="2">合计</th><td colspan="4">人民币(大写) : 壹佰万元整</td></tr><tr><th colspan="2">时间</th><td>2017年6月1日</td><th colspan="2">时间戳</th><td>江苏徐州业务中心</td></tr></tbody></table><p>票据打印时间: 2017-06-01 15:00:12</p>
<p><del>票据打印单位: 江苏徐州业务中心</del></p>
<p>操作员：大曾</p></body>
</html>
运行结果：
题目4：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>热门电影板块</title><style>.movies-container {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.movie {width: 200px;margin: 10px;text-align: center;}.movie img {width: 100%;height: auto;}.movie-name {margin-top: 5px;}hr {margin-top: 20px;margin-bottom: 20px;border: none;height: 1px;background-color: black;
}
p:nth-of-type(2n) {margin-top: 30px;
}</style>
</head><h1>热门电影板块</h1><hr>
<p>
<span class="underline">最近电影</span><span class="underline">热门</span><span class="underline">最新</span><span class="underline">豆瓣高分</span><span class="underline">冷门佳片</span><span class="underline">华语</span><span class="underline">欧美</span><span class="underline">韩国</span><span class="underline">日本</span><span class="underline">更多>></span></p><hr><div class="movies-container"><div class="movie"><img src="movie1.png" alt="电影1"><div class="movie-name">猜火车 8.1</div></div><div class="movie"><img src="movie2.png" alt="电影2"><div class="movie-name">贝尔科的实验 6.0</div></div><div class="movie"><img src="movie3.png" alt="电影3"><div class="movie-name">加州公路巡警 6.8</div></div><div class="movie"><img src="movie4.png" alt="电影4"><div class="movie-name">歌声不绝 6.3</div></div><div class="movie"><img src="movie5.png" alt="电影5"><div class="movie-name">明日的我与昨日的我</div></div><div class="movie"><img src="movie6.png" alt="电影6"><div class="movie-name">速度与激情8</div></div><div class="movie"><img src="movie7.png" alt="电影7"><div class="movie-name">极速特工</div></div><div class="movie"><img src="movie8.png" alt="电影8"><div class="movie-name">金刚狼3：殊死一搏</div></div></div>
</body>
</html>
运行结果：
