• 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>HQH000000000013878172td>
		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>000000000001td>
			<td><b>卡号b>td>
			<td>000000000002td>
		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.00000i>td>
		tr>
	table>
	<div>
			<span class="span">票据打印时间：2017-06-01 15:00:12span><br>
			<span class="span"><del>票据打印单位：江苏徐州业务中心del>span><br>
			<span class="span">操作员：大曾span><br>
		div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    网页效果图：
    请添加图片描述

    题目二： 热门电影模板的制作

    要求：
    在这里插入图片描述

    源代码及效果展示

    网页源代码：

    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.1td>
	    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    网页效果图：
    请添加图片描述

    题目三：用户注册页面的制作

    要求：
    在这里插入图片描述

    源代码及效果展示

    网页源代码：

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    网页效果图：
    请添加图片描述

  • 相关阅读:
    [附源码]计算机毕业设计SpringBoot心理健康系统
    VS2019创建GIt仓库时剔除文件或目录
    CRM 报告：跟踪销售业绩的强大工具
    基于51单片机霍尔汽车自行车码表测速测里程显示proteus仿真原理图PCB
    Arthas 排查JVM问题总结
    嵌入式图像上实现软件画线
    Postman接口测试工具详解
    Gamefi与DeFi之间有什么关系？
    springboot 注入配置文件中的集合 List
    神经网络层次分析模型,神经网络层次分析方法
  • 原文地址：https://blog.csdn.net/qq_53715074/article/details/127787187