纯html+css写一个收款收据或者发票样式

效果图

代码部分

<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><divstyle="display:flex;align-items:center;justify-content:space-around;width:100%;height:40px;"><div><span>2021</span><span style="color:red">年</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>11</span><span style="color:red">月</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>18</span><span style="color:red">日</span></div><div>NO：<span style="color:#9C5223;font-weight:bold">0123456</span></div></div><div style="display:flex;align-items:center"><table border="1" style="width: 95%; border-collapse: collapse;border:1px solid red"><tr class="tempTr"><td style="color:red">缴款人</td><td colspan="3" style="width: 40%;">张三</td><td style="color:red">门店名称</td><td colspan="3" style="width: 40%;">十亩地</td></tr><tr class="tempTr"><td style="width: 20%;color:red">租户类型</td><td style="width: 10%;color:red">门牌号</td><td style="width: 10%;color:red">建筑面积</td><td style="width: 10%;color:red">单价</td><td style="width: 10%;color:red">月租金</td><td style="width: 10%;color:red">应收租金</td><td style="width: 10%;color:red">押金</td><td style="width: 20%;color:red">总金额(元)</td></tr><tr class="tempTr"><td>整租</td><td>1818</td><td>120</td><td>3</td><td>4000</td><td>8000</td><td>4000</td><td>12000</td></tr><tr class="tempTr"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class="tempTr"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class="tempTr" style="line-height:30px"><td colspan="6"><span style="color:red">合计金额（大写）：</span><span>壹万贰仟叁佰肆拾贰伍圆陆角柒分</span></td><td colspan="2"><span style="color:red">小写：</span><span>1234567</span></td></tr><tr class="tempTr"><td style="color:red" colspan="2">缴费期</td><td colspan="6">2021-11-24</td></tr></table><div style="text-align:center;width:5%;">第<br />一<br />联<br />：<br />收<br />据</div></div><div style="width:95%;display:flex;height:40px;line-height:40px;color:red"><div style="width:33.33%;padding-left:10px">收款单位(盖章)：<span style="color:#000">人生无限有限公司</span></div><div style="width:33.33%;padding-left:10px">收款人：<span style="color:#000">大神</span></div><div style="width:33.33%;padding-left:10px">交款人：<span style="color:#000">李四</span></div></div></div></div>

<style scoped>
.tempTr td {height: 30px;text-align: center;
}
</style>

描述

采用内联样式居多，若其他的有区别自行调整。

纯html+css写一个收款收据或者发票样式相关推荐

android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
[css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
[css] 写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环 .animation-block {width: 50px;height: 50px;backgroun ...
[css] 写一个高度从0到auto的transition动画
[css] 写一个高度从0到auto的transition动画写不了吧,max-height 定值倒是可以个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
用Html+css写一个渐变背景的个人名片
原文地址:10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的 ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...

纯html+css写一个收款收据或者发票样式

效果图

代码部分

描述

纯html+css写一个收款收据或者发票样式相关推荐

最新文章

热门文章