html css 实现发票(付款申请书)模板_纯css制作收据-CSDN博客

本文链接：https://blog.csdn.net/qrn196789910/article/details/106000771

本文介绍了如何使用HTML和CSS从头开始手动创建一个发票（付款申请书）模板。由于图片无法转换为HTML，作者通过编写HTML代码成功实现了模板，并展示了最终效果。虽然细节调整耗时，但整体过程对于具备HTML和CSS基础的开发者来说并不复杂。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间，我做了一个系统打印的功能，给我的是一张图片，还有几个是word文档，文档还好，我先开始想的是，把文档转换成pdf 然后在使用在线pdf转换成html这样我就省事一点，就不用去写页面代码，但是这个图片是没法去转换html的，这样我就得自己去手写一套了，其实也是很简单的，只要有html css 基础的应该都是很快就写出来了，只是细节太要时间去调整了，所以就比较费事，我们来看看图片长啥样：
在这里插入图片描述
大概就是这样，接下来我得去手写一下这个html 代码出来，好了直接贴代码吧：

这是做出来的样子，大家自己可以调整一下字体啥的，我就不那么细节了：

<!DOCTYPE html>
<html>

<head>
    <title>发票</title>
	
</head>
<script type="text/javascript">
	function printpage(){ //进入到点击方法 然后当前页面打印
		 document.getElementById("p").style.display="none"; //这里是因为设置元素不显示是因为， 在打印机上面的内容不需要 打印按钮，所以给他不显示
		window.print();//当前页面 进入打印机
	}
	
	window.onload = function(){ //初始化事件监听
	      //监听window状态
	      if (window.matchMedia) { 
	          var mediaQueryList = window.matchMedia('print'); //监听打印机事件
	          //为印添加事件
	          mediaQueryList.addListener(function (mql) {
	              if (mql.matches) { //点击打印成功后进入的方法
					  
	              } else { //点击取消的方法 不然点击取消后 得刷新页面才能在看到 打印这个按钮了 这里是显示出来
					  document.getElementById("p").style.display="inline";
	              }
	          });
	      }
	}
	
</script>
<style>
    ul,
    ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
	
	.names{
		letter-spacing:2px
	}

    label {
        co