HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局

已于 2022-10-28 19:38:35 修改
阅读量762 收藏 3
点赞数 2
分类专栏： 前端 文章标签： 前端 html5 网页 css3
于 2022-10-28 19:15:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67259816/article/details/127570198
版权

目录

项目1：简易用户注册页面

 项目2：汇款单

 项目3：“将进酒简单布局”

项目1：简易用户注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr bgcolor="#CCCCCC"><td colspan="2" align="center">用户注册</td></tr>
			<tr bgcolor="#CCCCCC">
				<td>用户名</td><td><input type="text" id="username" name="username" placeholder="shuage"/></td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>密码</td><td><input type="password" name="password" required autofocus/ ></td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>性别</td><td><input type="radio" value="男" name="gender" checked/>男
					 <input type="radio" value="女" name="gender"/>女</td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>爱好</td><td> <input type="checkbox" value="football" name="fav"/>足球
					 <input type="checkbox" value="basketball" name="fav"/>篮球
					 <input type="checkbox" value="写作" name="fav"/>写作
					 <input type="checkbox" value="听音乐" name="fav"/>听音乐</td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>邮箱</td><td><input type="email" name="email" placeholder="请输入您的邮箱:"/></td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>头像</td><td><input type="file" name="avatar" id="avatar"/></td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>地址</td><td>
				<select name="address">
					<option value="西安">西安</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="南京">南京</option>
					<option value="黑龙江">黑龙江</option>
			</select></td>
			</tr>
			<tr bgcolor="#CCCCCC">
				<td>建议或者意见</td><td><textarea name="comment" cols="30" rows="10" placeholder="您的意见或者建议"></textarea></td>
			</tr>
			
		</table>
		     <input type="submit" value="注册用户">
		     <input type="submit" value="提交">
		
	</body>
</html>

 项目2：汇款单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><font size="6"><b>工商银行电子汇款单</b></font></p>
		<table border="1"  cellspacing="0">
			<tr>
				<td colspan="2"><b>回单类型</b></td>
				<td colspan="2"">网上转账汇款</td>
				<td colspan="2"><b>指令序列号</b></td>
				<td colspan="2">HQH10000000001000100</td>
			</tr>
			<tr>
				<td rowspan="4"><b>收款人</b></td>
				<td>户名</td>
				<td colspan="2">老牟</td>
				<td rowspan="4""><b>付款人</b></td>
				<td>户名</td>
				<td colspan="2">老刘</td>
			</tr>
			<tr>
				<td><b>卡号</b></td>
				<td colspan="2">00000000001</td>
				<td><b>卡号</b></td>
				<td>00000000002</td>	
			</tr>
			<tr>
				<td>地区</td>
				<td colspan="2">南京</td>
				<td>地区</td>
				<td>杭州</td>	
			</tr>
			<tr>
				<td><b>网点</b></td>
				<td colspan="2">工商江苏南京业务处理中心</td>
				<td><b>网点</b></td>
				<td>江苏徐州业务中心</td>
			</tr>
			<tr>
				<td colspan="2""><b>币种</b></td>
				<td colspan="2">人民币</td>
				<td colspan="2"><b>汇钞标准</b></td>
				<td>钞票</td>	
			</tr>
			<tr>
				<td colspan="2""><b>金额</b></td>
				<td colspan="2">100000元</td>
				<td colspan="2"><b>手续费</b></td>
				<td>10元</td>	
			</tr>
			<tr>
				<td colspan="2""><b>合计</b></td>
				<td colspan="6">人民币（大写）：拾万元整</td>	
			</tr>
			<tr>
				<td colspan="2""><b>交易时间</b></td>
				<td colspan="2"><i>2017年6月1日</i></td>
				<td colspan="2"><b>时间戳</b></td>
				<td><i>2017-06-01-14:00，000000 </i></td>	
			</tr>	
		</table>
		<p>票据打印时间：2017=06-01 15:00:12
			<br>
			   <del>票据打印单位：江苏徐州业务中心</del>
			<br>
		   操作员：老曾
		</p>
	</body>
</html>

 项目3：“将进酒简单布局”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="0" cellpaddiing="0" cellspacing="0" width="650">
			<tr>
				<td colspan="2"><font size="6"><b>将进酒</b></font>
				<font size="5"><b>君不见黄河之水天上来</b></font></td>
			</tr>
			<tr>
				<td rowspan="14" width="300"><img src="../img/shiren.png"></td>
			</tr>
			<tr>
				<td>君不见黄河之水天上来，奔流到海不复回。</td>
			</tr>
			<tr>
				<td>君不见高堂明镜悲白发，朝如青丝暮成雪.</td>
			</tr>
			<tr>
				<td>人生得意须尽欢，莫使金樽空对月。</td>
			</tr>
			<tr>
				<td>天生我材必有用，千金散尽还复来。</td>
			</tr>
			<tr>
				<td>烹羊宰牛且为乐，会须一饮三百杯。</td>
			</tr>
			<tr>
				<td>岑夫子，丹丘生，将进酒，杯莫停.</td>
			</tr>
			<tr>
				<td>与君歌一曲，请君为我倾耳听。</td>
			</tr>
			<tr>
				<td>钟鼓馔玉不足贵，但愿长醉不复醒。</td>
			</tr>
			<tr>
				<td>古来圣贤皆寂寞，惟有饮者留其名。</td>
			</tr>
			<tr>
				<td>陈王昔时宴平乐，斗酒十千恣欢谑。</td>
			</tr>
			<tr>
				<td>主人何为言少钱，径须沽取对君酌。</td>
			</tr>
			<tr>
				<td>五花马、千金裘，</td>
			</tr>
			<tr>
				<td>呼儿将出换美酒，与尔同销万古愁。</td>
			</tr>			
		</table>
	</body>
</html>

shadow_58
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
简单的HTML项目
m0_67113501的博客
08-06 422
HTML，CSS
html5,小型项目
01-03
我做的，一个小型游戏网站，用到了html5和css知识，简单的一个游戏小网站，适合初学者学习
html 小项目
qq_45425315的博客
03-27 2761
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
基于HTML的项目网页网站的搭建(HTML+CSS+JavaScript)
最新发布
qq_66493659的博客
06-21 827
通过JavaScript添加动态效果和交互功能，如图片轮播、导航栏下拉菜单、景点介绍页面的切换等。这些功能可以增强网页的趣味性和实用性，提高用户的浏览体验。使用CSS进行网页布局和样式设计，可以采用响应式设计，使网页在不同设备上具有良好的兼容性和视觉效果。同时，注重页面元素的排版和颜色搭配，提高用户体验。基于HTML的静态旅游项目通常包括以下页面：登录页面、首页、、交通住宿、联系我们等。这些页面通过链接相互关联，形成一个完整的网站结构。一、这是登录界面页面的开始。以及最后的join页面。
HTML页面小项目（简陋版）
weixin_45515107的博客
11-15 480
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="wideth=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习</title> </hea.
HTMl小项目
09-12
html网页开发项目，小组制作，没有后台，只是网页设计
将进酒PPT模板：李白诗篇赏析.pptx
10-07
为唐代诗歌的瑰宝，尤其是《将进酒》，它反映了李白对个人自由的追求和对社会现实的深刻洞察。 3. 个人经历：李白的个人经历丰富，他的诗歌深受其流浪生活的影响。在《将进酒》中，他将自己的情感与所见所闻融入...
2015_2016学年高中语文第三单元将进酒同步练习新人教版选修中国古代诗歌散文欣赏
08-06
1. 古代诗歌鉴赏：本练习题主要针对李白的名篇《将进酒》，旨在训练学生对古代诗歌的理解能力，包括韵律、意境、情感和表达手法等。 2. 语文基础知识：题目涉及汉字读音、词语解释、句子节奏划分等基础语文知识，...
将进酒.ppt
10-27
"《将进酒》诗歌解读" 《将进酒》是李白最有代表性的诗歌之一，诗歌以饮酒为主题，表达了诗人对自由、浪漫和情感的热烈追求。诗歌的标题“将进酒”是汉乐府短铙歌的曲调，题意为“劝酒歌”。在诗歌中，李白以...
html李白诗词将进酒
03-18
HTML（HyperText Markup Language）是一种用于创建网页的记语言。它由一系列的标签组成，这些标签定义了网页的结构和内容。通过使用不同的标签，可以插入文本、图像、链接等元素，从而实现丰富多样的网页效果。 ...
html的小项目,html+css常用小项目
weixin_27603469的博客
06-17 332
html结构：东邪西毒南乞北丐CSS代码：.wrapper{width:100px;height:100px;background:lightblue;border-radius:50%;border:2px solid lightgreen;position: absolute;top:200px;left:400px;cursor:pointer;}.wrapper:after{content...
html项目简洁模板
09-06
html模板，做项目时候就方便了，可以快速建立项目模板，非常简单，一看就会
前端游戏小项目html+css+js.zip
10-06
一个前端小游戏的项目，由html、css和JavaScript编写而成，非常适合初学者！
50_projects:50个简单HTML，CSS，JS项目，旨在提高CSS和普通JS知识
03-27
50_projects:50个简单HTML，CSS，JS项目，旨在提高CSS和普通JS知识
关于html的一个小项目
qq_34818060的博客
12-18 668
先上代码 当前输入框高亮显示 body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;} form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overf
HTML5--入门介绍
关注我！带你一路 "狂飙" 到底！
09-25 1375
网站的建站流程 页面图例 http://weixin.qq.com/r/p0yguLDEUu0trfTb9xm1(二维码自动识别) 网页的结构 WEB标准 WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布 （1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定.
html5_小项目
Android___vv的博客
10-20 5205
  主页面1: &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt; &l
HTML项目
weixin_51051149的博客
10-07 209
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; cha...
html小项目,初探响应式布局 - 以小项目为例
weixin_29322553的博客
06-17 286
一 响应式布局最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。响应式Web设计二 media查询media查询是响应式布局的核心所在，根据不同的条件来显示不同的css样式。达到不同分辨率的...
HTML5课程案例：大学生作业中的流行组合与古诗展示
doctype html>`和`<html lang="en">`，然后定义了一个包含李白诗词的简单页面。页面结构包括导航栏`<div id="nav">`，列出了几首诗名；一个水平线`<hr>`用于分隔导航和内容区域。`<div id="content">`内嵌了一个图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shadow_58

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值