Web第二次作业
一、制作用户注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style type="text/css">
textarea {
border: 1;
overflow: auto;
width: 97%;
height: 90%;
float: left;
}
td {
background-color: lightgray;
border-color: white;
}
</style>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data">
<table border="1" width=300px cellspacing=0 cellpadding=2 align="left">
<tr>
<td align="center" colspan="2" style="background-color: gray;">用户注册</td>
</tr>
<tr>
<td align="right" style="font-size: 3%; width: 30%;">用户名</td>
<td><input type="text" name="UserName" size="15" maxlength="20" /></td>
</tr>
<tr>
<td align="right" style="font-size: 3%;">密码</td>
<td><input type="password" name="UserPass" size="15" maxlength="20" /></td>
</tr>
<tr>
<td align="right" style="font-size: 3%;">性别</td>
<td>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right" style="font-size: 3%;">爱好</td>
<td>
<input type="checkbox" name="like" value="写作" />写作
<input type="checkbox" name="like" value="听音乐" />听音乐
<input type="checkbox" name="like" value="体育" />体育
</td>
</tr>
<tr>
<td align="right" style="font-size: 3%;">省份</td>
<td>
<select name="province">
<option value="shanxi" selected>陕西省</option>
<option value="shanx">山西省</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-size: 3%; height: 50px;">自我介绍</td>
<td style="height:5px;width:25px;"><textarea name="intro">这个家伙什么也没留下</textarea></td>
</tr>
<tr>
<td colspan="2" align="center" style="background-color: gray;">
<input type="submit" name="send" />
<input type="reset" name="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
运行结果:
二、制作银行电子汇款单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>工商银行电子汇款单</title>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data">
<h1>工商银行电子汇款单</h1>
<table border="1" width=900px cellspacing=0 cellpadding=1 align="left">
<tr>
<td colspan="2" style="font-weight: bold;">回单类型</td>
<td style="width:340px ;">网上转账汇款</td>
<td colspan="2" style="font-weight: bold;">指令序号</td>
<td style="width:380px ;">HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4" style="width: 30px; font-weight: bold;" align="center">收款人</td>
<td style="width: 60px;">户名</td>
<td>老牟</td>
<td rowspan="4" style="width: 30px; font-weight: bold;" align="center">付款人</td>
<td style="width: 60px;">户名</td>
<td>老刘</td>
</tr>
<tr>
<td style="font-weight: bold;">卡号</td>
<td>000000000001</td>
<td style="font-weight: bold;">卡号</td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td style="font-weight: bold;">网点</td>
<td>工商江苏南京业务处理中心</td>
<td style="font-weight: bold;">网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold;">币种</td>
<td>人民币</td>
<td colspan="2" style="font-weight: bold;">钞汇标志</td>
<td><u>钞票</u></td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold;">金额</td>
<td>1.00元</td>
<td colspan="2" style="font-weight: bold;">手续费</td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold;">合计</td>
<td colspan="4">人民币(大写):壹圆整</td>
</tr>
<tr>
<td colspan="2" style="font-weight: bold;">交易时间</td>
<td><i>2017年6月1日</i></td>
<td colspan="2" style="font-weight: bold;">时间戳</td>
<td><i>2017-06-01-13.00.00,00000</i></td>
</tr>
</table>
</form><br><br><br><br><br><br><br><br><br><br><br>
<p>票据打印时间:2017-06-01 15:00:12</p>
<p><del>票据打印单位:江苏徐州业务中心</del></p>
操作员:大曾
</body>
</html>
运行结果:
三、制作电影板块页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门电影</title>
<style>
img {
width: 200px;
height: 200px;
}
#tb1 td {
width: 225px;
}
#tb2 td {
width: 225px;
}
</style>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data">
<h2>热门电影板块</h2>
<hr />
<table border="0" width=100% cellspacing=0 cellpadding=7 align="left">
<tr>
<td style="width: 150px; font-size: 20px;"><b>最近热门电影<b></td>
<td style="width: 40px;">热门</td>
<td style="width: 40px;">最新</td>
<td style="width: 80px;">豆瓣高分</td>
<td style="width: 80px;">冷门佳片</td>
<td style="width: 50px;">华语</td>
<td style="width: 50px;">欧美</td>
<td style="width: 50px;">韩国</td>
<td style="width: 120px;">日本</td>
<td>更多>></td>
</tr>
</table>
<hr />
<table border="0" width=900px cellspacing=1 cellpadding=0 align="left">
<tr>
<td><img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01a3e391f4c3566a6a.webp" /></td>
<td><img src="https://pic1.zhimg.com/v2-f4078ecdf2acd44afa0ccbf9b30069aa_qhd.jpg?source=57bbeac9" />
</td>
<td><img src="http://pc.wangpan.xycdn.n0808.com/aadf1e6472b68193564a427ee6a56777.jpg" /></td>
<td><img src="https://p3.ssl.qhimgs1.com/sdr/400__/t01c82660b3b065691d.jpg" /></td>
</tr>
</table>
<table border="0" width=900px cellspacing=1 cellpadding=3 align="left" id="tb1">
<tr>
<td>猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
</table>
<table border="0" width=900px cellspacing=1 cellpadding=0 align="left">
<tr>
<td><img src="http://image11.m1905.cn/uploadfile/2020/0828/20200828104458695475.jpg" /></td>
<td><img src="http://www.people.com.cn/mediafile/pic/20170310/2/9748471275926226538.jpg" /></td>
<td><img src="https://so1.360tres.com/t01f29915ea5821137c.jpg" /></td>
<td><img src="http://www.hnr.cn/hnr/3g/3gyule/201702/W020170222370864695597.jpg" /></td>
</tr>
</table>
<table border="0" width=900px cellspacing=1 cellpadding=3 align="left" id="tb2">
<tr>
<td>明日的我与昨日的我</td>
<td>速度与激情8</td>
<td>极速特工</td>
<td>金刚狼3 : 殊死一战</td>
</tr>
</table>
</body>
</html>
运行结果:
四、利用课上所学,制作一个按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
margin-left: 40px;
margin-top: 40px;
width: 120px;
height: 70px;
border: yellow dashed;
border-radius: 15px;
background-color: lightblue;
font-family: monospace;
font-size: 20px;
font-weight: bold;
font-style: italic;
text-shadow: 2px 2px 2px orange,
-2px -2px 2px orange;
text-align: center;
transition: 3s;
}
button:hover {
background: url(https://c-ssl.duitang.com/uploads/item/202002/06/20200206220134_nvwyr.thumb.1000_0.jpeg);
background-position: 50px 70px;
text-decoration: underline;
color: white;
text-shadow: 2px 2px 2px crimson;
border: solid purple;
box-shadow: 4px 4px 4px plum,
-4px -4px 4px plum;
}
</style>
</head>
<body>
<div>
<button>多样式按钮</button>
</div>
</body>
</html>
运行结果演示:
正常状态:
鼠标悬停后: