收据模板 纯css+html

最新推荐文章于 2024-05-13 09:57:38 发布
最新推荐文章于 2024-05-13 09:57:38 发布
阅读量4k 收藏 17
点赞数 4
分类专栏： 单据模板 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46572873/article/details/105889550
版权

收据模板 纯css+html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收据模板</title>
		<style type="text/css">
			.main{width: 960px; height: 480px; margin: 0px auto; margin-top: 20px; padding: 10px; display: flex;}
			.body{width: 95%; height: 480px;}
			.title{width: 100%; height: 40px; display: flex;}
			.title .div1{width: 60%; text-align: right;}
			.title .div1 .divCtn{width: 230px; height: 40px; float: right;}
			.title .div1 .divCtn .titleCtn{width: 230px; height: 30px; line-height: 30px;text-align: center; font-size: 25px; font-weight: bold;}
			.title .div1 .divCtn .titleUdeLine{width: 230px; height: 6px; border-bottom: solid 2px #9C5223; border-top: solid 2px #9C5223;}
			.title .div2{width: 40%; text-align: right; height: 40px; line-height: 30px; font-size: 20px; font-weight: bold;}
			.date{width: 100%; height: 40px; display: flex;}
			.date .deDiv1{width: 60%; height: 40px; line-height: 40px; text-align: right; font-size: 18px;}
			.date .deDiv2{width: 40%; height: 40px;line-height: 40px;  text-align: right;font-size: 18px;}
			.tempTr1 td{text-align: center;}
			table tr td{padding: 5px;}
			.tempTr2 td{height: 40px; text-align: center;}
			.end{width: 5%; height: 480px; }
		</style>
	</head>
	<body>
		<div class="main">
			<div class="body">
				<div class="title">
					<div class="div1">
						<div class="divCtn">
							<div class="titleCtn">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
							<div class="titleUdeLine"></div>
						</div>
					</div>
					<div class="div2">NO：<span style="color: #9C5223;">2396827</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
				</div>
				<div class="date">
					<div class="deDiv1">2020年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;04月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;21日</div>
					<div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;号</div>
				</div>
				<table border="1" style="width: 100%; border-collapse: collapse;">
					<tr class="tempTr2">
						<td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">&nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; 李海军</td>
						<td colspan="6" style="width: 50%;">交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据</td>
					</tr>
					<tr>
						<td align="center" rowspan="2" style="width: 60%;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
						<td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
						<td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
					</tr>
					<tr class="tempTr1">
						<td>￥</td>
						<td>百</td>
						<td>十</td>
						<td>万</td>
						<td>千</td>
						<td>百</td>
						<td>十</td>
						<td>元</td>
						<td>角</td>
						<td>分</td>
					</tr>
					<tr class="tempTr2">
						<td>天骄北麓小区1栋一单元1-1-202的2020年2月份水费</td>
						<td>￥</td>
						<td></td>
						<td></td>
						<td>2</td>
						<td>5</td>
						<td>4</td>
						<td>3</td>
						<td>2</td>
						<td>2</td>
						<td>3</td>
						<td>支付方式：现金</td>
					</tr>
					<tr class="tempTr2">
						<td></td>
						<td>￥</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr class="tempTr2">
						<td></td>
						<td>￥</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr class="tempTr2">
						<td colspan="12" style=" text-align: left;">
							合计人民币（大写）贰万伍仟肆佰叁拾贰圆贰角叁分
							<div style="float: right; display: flex;"><div style="font-size: 20px;">￥：</div><div style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">25432.23</div></div>
						</td>
					</tr>
				</table>
				<div style="width: 100%; display: flex; height: 40px;">
					<div style="width: 50%; height: 40px; line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主管：</div>
					<div style="width: 50%; height: 40px; line-height: 40px;">经手人：</div>
				</div>
			</div>
			<div class="end"><div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">第<br/>二<br/>联<br/>：<br/>存<br/>根</div></div>
		</div>
	</body>
</html>

效果图

玖煦
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html + css 实现银行回执单 页面
qrn196789910的博客
06-09 5873
最近来了一个需求，需要去弄一个银行回执单页面，之前的业务需求是需要客户去手动上传银行回执单的，因为之前的业务是客户去一个一个的去上传，这样当数据多的时候，客户就提出来说需要进行批量去操作，这样子就不能去进行一个一个的上传这个银行回执凭证，他直会给我一些银行回执的信息，这样子我们保存下来后，就要给显示出来，这里我就只能去手动写一个页面出来了，下面来看看回执图片长啥样： 下面来看看我用html 加css 写的页面吧，细节大家可以在去调调，我这边只是用于后台展示就不弄的很细了， 大概我就做成这样了，接下来直接
html收据模板
10-31
html收据模板
纯html+css写一个收款收据或者发票样式
Aom_yt的博客
11-24 3047
效果图 代码部分 <div style="width:960px;margin:0 auto;padding:10px;display:flex;align-items:center;color:#000"> <div style="width: 100%;"> <div style="text-align:center;font-size:24px;font-weight:bold;color:red">XXXXXX收款收据</div>
简洁高效的HTML发票模板 - 强大的开源解决方案
最新发布
gitblog_00070的博客
05-13 383
简洁高效的HTML发票模板 - 强大的开源解决方案 项目地址:https://gitcode.com/sparksuite/simple-html-invoice-template Simple HTML Invoice Template 在数字化的世界里，一份清晰、专业的发票是任何企业不可或缺的工具。而今天，我们向您推荐一个简洁且易于定制的HTML发票模板项目——Simple HTML Invo...
html收款票据模板.zip
06-04
使用html制作的一款收款票据样式 直接使用即可 完整代码 可以直接填写数据进行打印相应的票据
用纯HTML写一个凭证并打印
技术刚刚好
02-18 1501
24. `document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";12. `.headStyle { ... }`、`.headTitleLift { ... }`、`.title { ... }`等：定义了一些自定义样式，用于配水单头部和表格的布局。11. `@media print { ... }`：定义在打印模式下的样式，这里设置了`.no-print`类在打印时不显示。
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1335
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
收据模板HTML
10-31
本主题聚焦于“收据模板HTML”，这意味着我们将在HTML环境中设计和构建一个用于显示和打印收据的模板。这样的模板可以应用于各种场景，如电子商务、财务管理、服务业等，以生成电子发票或收据。 首先，我们要理解...
HTML、CSS代码实现的发票样式的模板
04-13
HTML、CSS代码实现的发票样式的模板
HTML发票票据,模板
03-29
HTML发票票据模板是一种用于创建电子发票或收据的网页设计模板。这些模板通常包含预设的样式、布局和元素，使得开发者或者业务人员能够快速、方便地生成符合规范且具有专业外观的电子发票。在互联网交易日益普及的...
普通发票 html css写的
04-15
普通发票模板 html css写的,曾经下过博客中的一个发票模板发现打开里面的代码太多了，太重复了，所以自己初步写了一个简洁的
收款收据(打印)模板
05-13
收款收据(打印)模板
html前台打印小票(免弹框)
10-14
这是在网上找的一个打印的控件，还比较不错，可以指定打印机名称进行打印，并且不会像JS里面的window.print()会弹出选择打印机这个框，这一特点正好满足我的需求，现在上传上来供大家研究
打印html格式
10-13
html打印，可以转换成其他语言。html打印，可以转换成其他语言。
HTML制作电子发票收据凭证界面,并可填写数字中文数字,自动计算合计等功能.zip
01-06
HTML制作电子发票收据凭证界面,并可填写数字中文数字,自动计算合计等功能.zip
HTML作业（一）
ll_j_21的博客
10-16 5918
一、 在这里插入代码片
仿工商银行静态网页设计 html css
weixin_50656154的博客
12-01 372
点赞 收藏 私信我领源码哦。私信没回的话关注一下 不然消息靠后看不到哟
中国工商银行电子汇款单（HTML表格制作）
2303_79252611的博客
02-03 1058
学而不思则罔，思而不学则殆。嗯，就像之前会的东西，然后忘了，然后再去寻找把失去了的东西去再找回来，就会觉得焕然一新。这个很熟悉，哎，我好像又可以了。这个写代码啊，就是在学习中去打，打中去学习，就像实践与理论一样，要不断的去实践。真的是不知道为什么就是那个align对称就是用不了，以至于我用了很多个 （空格）今天我在写代码的时候就突然发现我好像不会，就是表格类的转行。我想修改字体颜色，但是修改不了一点，有友友可以给我点提示嘛？自我感觉就是嗯，比上一篇那个代码难一点，但其实也还好。一查我才知道是用.
收据 html 代码
11-22
收据是一种用来记录交易信息和付款确认的文件，通常包含商品的名称、数量、价格、日期和支付方式等信息。在网页设计中，收据也可以通过html代码来展示，以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>收据</title> </head> <body> <h1>购物收据</h1> <p>日期：2023年9月15日</p> <table> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>总价</th> </tr> <tr> <td>笔记本</td> <td>2</td> <td>$5.00</td> <td>$10.00</td> </tr> <tr> <td>铅笔</td> <td>5</td> <td>$1.00</td> <td>$5.00</td> </tr> </table> <p>总计：$15.00</p> <p>支付方式：现金</p> </body> </html> ``` 上面的html代码展示了一个简单的购物收据，包括了购买的商品信息和总计金额，通过表格和段落来清晰地展示了交易信息。当然，实际的收据html代码可能会更加复杂和丰富，根据实际需要来展示更多的交易信息和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值