Web前端——表格表单练习
·
题目一：电子汇款单的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工商银行电子汇款单</title>
<style type="text/css">
.span{
height: 10px;
display: block; /*将span标签转化为块元素*/
}
table,td{
margin: 0px;
border: 2px solid black;
border-collapse: collapse; /*设置单元格的边框合并为1*/
}
</style>
</head>
<body>
<h2>工商银行电子汇款单</h2>
<table>
<tr>
<td colspan="2"><b>回单类型</b></td>
<td>网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<td>HQH000000000013878172</td>
</tr>
<tr>
<td rowspan="4" style="text-align: center; width: 30px;"><b>收款人</b></td>
<td>户名</td>
<td>老牟</td>
<td rowspan="4" style="text-align: center; width: 30px;"><b>付款人</b></td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>000000000001</td>
<td><b>卡号</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务处理中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币（大写）：壹圆整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td>2017年6月1日</td>
<td colspan="2"><b>时间戳</b></td>
<td><i>2017-06-01-13.00.00.00000</i></td>
</tr>
</table>
<div>
<span class="span">票据打印时间：2017-06-01 15:00:12</span><br>
<span class="span"><del>票据打印单位：江苏徐州业务中心</del></span><br>
<span class="span">操作员：大曾</span><br>
</div>
</body>
</html>
网页效果图：
题目二： 热门电影模板的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>热门电影模块</title>
<style type="text/css">
.table1{
border-right: none;border-left: none;
}
.td1{
border: none;
}
.table2{border:none;}
.td2{border:none; padding-top: 20px;}
</style>
</head>
<body>
<h3>热门电影板块</h3>
<table class="table1" border="1px" cellspacing="0" width="1110px" height="40px" class="table1" bordercolor="gray">
<tr>
<td class="td1"><strong>最近热门电影</strong></td>
<td class="td1">热门</td>
<td class="td1">最新</td>
<td class="td1">豆瓣高分</td>
<td class="td1">冷门佳片</td>
<td class="td1">华语</td>
<td class="td1">欧美</td>
<td class="td1">韩国</td>
<td class="td1">日本</td>
<td style="text-align: right;" class="td1">更多>></td>
</tr>
</table>
<table border="1px" cellspacing="0" width="800px" height="40px" style="margin-top: 2px;" class="table2">
<tr>
<td class="td2"><img src="E:\Web前端作业\project02\images\盲猜火车8.1.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\贝尔科实验.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\加州公路巡警.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\歌声不绝.png"></td>
</tr>
<tr>
<td class="td2">猜火车8.1</td>
<td class="td2">贝尔科实验</td>
<td class="td2">加州公路巡警</td>
<td class="td2">歌声不绝</td>
</tr>
<tr>
<td class="td2"><img src="E:\Web前端作业\project02\images\明日的我与昨日的我.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\速度与激情.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\极速特工.png"></td>
<td class="td2"><img src="E:\Web前端作业\project02\images\金刚狼3：殊死一战.png"></td>
</tr>
<tr>
<td class="td2">明日的我与昨日的我</td>
<td class="td2">速度与激情</td>
<td class="td2">极速特工</td>
<td class="td2">金刚狼3：殊死一战</td>
</tr>
</table>
</body>
</html>
网页效果图：
题目三：用户注册页面的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<style type="text/css">
#center{
text-align: center;
background-color: #8D8A86;
}
tr td,th{
border:1px solid white;
background-color: #DFDCD9;
}
</style>
<body>
<form>
<table>
<tr>
<td colspan="2" id="center" >用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="UserName" maxlength="20"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="UserPass" maxlength="20"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" checked="true" >男<input type="radio" name="sex">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" name="like">写作<input type="checkbox" name="like">听音乐<input type="checkbox" name="like">体育</td>
</tr>
<tr>
<td>省份</td>
<td>
<select>
<option value ="shaanxi" selected="selected">陕西省</option>
<option value ="shanx">山西省</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td width="25px" height="5px" >
<textarea name="intro" style="height: 50px; overflow-y: scroll;">
这个家伙什么也没留下
</textarea>
</td>
</tr>
<tr>
<td colspan="2" id="center"><input type="submit" name="send"><input type="reset" name="reset"></td>
</tr>
</table>
</form>
</body>
</html>
网页效果图：
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)