HTML+CSS例子＞报销单

已于 2022-03-25 09:49:27 修改
阅读量2.7k 收藏 2
点赞数 2
分类专栏： HTML CSS 文章标签： html css
于 2022-03-25 09:39:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55172460/article/details/123727724
版权
HTML 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费用报销单</title>
    <!-- <link rel="stylesheet" href="../css/demo1.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .b1 {
            width: 300px;
            letter-spacing: 30px;
            font-family: "宋体";
            /* 底部边框 */
            border-bottom: 1px solid;
            margin: 25px auto 10px;
        }

        .b2 {
            font-size: 20px;
            font-family: "宋体";
            margin-bottom: 10px;
            margin-left: 260px;
        }

        section {
            width: 1000px;
            height: 500px;
            background-color: rgb(236, 204, 204);
            margin: 40px auto;
            /* 阴影 */
            box-shadow: 0px 0px 10px #4c4848;
        }

        table {
            margin: 0 auto;
            border: 1px solid;
            /* 单元格之间的间距 */
            border-spacing: 0;
            /* 边框合并 */
            border-collapse: collapse;
            /* box-shadow: 10px 0px 10px #9b9a9a; */
        }

        .yiyi {
            width: 250px;
        }

        .jiner {
            text-align: left;
        }

        .qian {
            text-align: left;
        }

        td {
            line-height: 40px;
            text-align: center;
            width: 130px;
            height: 36px;
            border: 1px solid;
        }

        span {
            /* 行内块 */
            display: inline-block;
            margin-left: 300px;
            margin-top: 5px;
        }

        #newtable,
        #newtable td,
        #newtable td:nth-child(6) {
            border: none;
        }

        #newtable td {
            border-right: 1px solid;
        }
    </style>
</head>

<body>
    <section>
        <table>
            <caption class="b1">
                <h2>费用报销单</h2>
            </caption>
            <caption class="b2">
                <h5>
                    报销日期&#x3000;&#x3000;&#x3000;
                    年&#x3000;&#x3000;
                    月&#x3000;&#x3000;
                    日&#x3000;&#x3000;&#x3000;&#x3000;
                    附件 &#x3000;&#x3000;
                    张
                </h5>
            </caption>
            <tbody>
                <tr>
                    <td class="yiyi">费&#x3000;&nbsp;
                        用&#x3000;&nbsp;
                        项&#x3000;&nbsp;
                        目</td>
                    <td>类&#x3000;&nbsp;别</td>
                    <td>金&#x3000;&nbsp;额</td>
                    <td rowspan="2">负责人(签章)</td>
                    <td rowspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="2">审&nbsp;
                        查&nbsp;
                        意&nbsp;
                        见</td>
                    <td rowspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="2">报销人(签章)</td>
                    <td rowspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        报&nbsp;&nbsp;
                        销&nbsp;&nbsp;
                        金&nbsp;&nbsp;
                        额&nbsp;&nbsp;
                        合&nbsp;&nbsp;
                        计</td>
                    <td></td>
                    <td></td>
                    <td class="qian">&#x3000;&nbsp;￥</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="jiner" colspan="5">
                        &#x3000;核实金额(大写)&#x3000;&#x3000;&#x3000;
                        佰&#x3000;&nbsp;
                        拾&#x3000;&nbsp;
                        万&#x3000;&nbsp;
                        仟&#x3000;&nbsp;
                        佰&#x3000;&nbsp;
                        拾&#x3000;&nbsp;
                        元&#x3000;&nbsp;
                        角&#x3000;&nbsp;
                        分&#x3000;&nbsp;
                        ￥</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <table id="newtable">
                            <tbody>
                                <tr>
                                    <td>借&nbsp;
                                        款&nbsp;
                                        数</td>
                                    <td></td>
                                    <td>应&nbsp;
                                        退&nbsp;
                                        金&nbsp;
                                        额</td>
                                    <td></td>
                                    <td>应&nbsp;
                                        补&nbsp;
                                        金&nbsp;
                                        额</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>审&#x3000;核</span>
        <span>出&#x3000;纳</span>
    </section>
</body>

</html>

运行效果：

 

不羁的程序员~
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html css 实现发票(付款申请书)模板
qrn196789910的博客
05-08 3224
前段时间，我做了一个系统打印的功能，给我的是一张图片，还有几个是word文档，文档还好，我先开始想的是，把文档转换成pdf 然后在使用在线pdf转换成html这样我就省事一点，就不用去写页面代码，但是这个图片是没法去转换html的，这样我就得自己去手写一套了，其实也是很简单的，只要有html css 基础的应该都是很快就写出来了，只是细节太要时间去调整了，所以就比较费事，我们来看看图片长啥样： ...
html+css个人简历单独网页版
11-16
html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历单独网页版html+css个人简历...
tea-school：简化HTML + CSS-> Nodejs的PDF生成器
02-03
茶学校 简化的HTML + CSS --> PDF CSS- HTML + CSS --> PDF Nodejs的HTML + CSS --> PDF生成器基本上只是一种结合 ， 和。 阅读更多 在我的阅读有关包装的更多 安装 使用npm > npm install tea-school 使用yarn > yarn add tea-school 我们有什么在这里？ 该库实际上并没有做任何特别的事情。 它仅组合了以下三个库： 在运行时生成HTML（ ） 生成CSS（用）在运行时（） 从HTML生成PDF（ ） 用法 我们将生成以下PDF： 为了进一步检查，请查看exampl
html如何设置提交打印页面,简单介绍CSS设置打印页面的方法及css里media的使用
weixin_34220317的博客
06-03 367
在很多是时候往往要打印网页中的某一部分，而不是全部网页，所以告诉打印机要打印的部分，使用css进行一下设置是一个比较好的方式，先看一段代码:以上两行代码是引入外部css样式表，需要特别主义的是media属性值分别是screen和print，用来规定css样式表要服务的对象，如果属性值是media，则说明是为了在屏幕控制页面的显示，如果属性值是print，则说明css代码是用于控制需要打印的元素的样...
前端之用HTML做一个汇款单
最新发布
banliyaoguai的博客
03-12 501
里面注释是我我对运用到的知识的理解。
前端纯手写表白神器圣诞树<JS+HTML+CSS3>
12-12
动画圣诞树，表白神器，使用canvas动态画出圣诞树，简洁明了，容易看懂，可以自定义祝福语，也可以自己调整，画面清晰，风格明显。
报销单-html
weixin_45939821的博客
07-20 166
【代码】报销单-html。
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1326
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
【自学HTML笔记第5篇】HTML中的下拉菜单标签
m0_64231944的博客
10-22 6830
HTML中的下拉菜单标签和主要属性
HTML/CSS 如何做下拉框（下拉菜单）？
m0_74744119的博客
02-04 9631
下拉菜单通常使用在鼠标过程中，当鼠标悬停是出现一个下拉的菜单。
HTML下拉菜单（超详细）：
热门推荐
qq_56045326的博客
10-24 3万+
html代码段： <!--下拉菜单--> <div class="downorder"> <button class="order"> 下拉菜单 </button> <div class="downtext"> <a href="">text1</a> <a href="">text2</a> <a ..
CSS实现三角形的四种方法
m0_60237095的博客
04-11 3万+
css三角形的实现
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
2024新年贺卡-html+css例子代码
02-05
2024新年贺卡-html+css实现例子代码，可以根据祝福话语更改例子里边的祝福语。
财务报销网上预审单html,费用报销单.html
weixin_42494796的博客
06-05 220
费用报销单.box{width: 1010px;margin: 0 auto;}h4 {/* display: block; */margin-left: 400px;width: 250px;font-size: 30px;height: 40px;line-height: 40px;text-align: center;border-bottom: 1px solid black;/* let...
vue html页面打印功能vue-print-nb
11-19 1627
vue html页面打印功能vue-print-nb vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使...
用JS在html页面实现打印功能
小石头
05-19 1411
网页实现全局和局部打印 打印方式一： 1.首先在head里面加入下面一段js代码： <script language="javascript"> function preview(fang){ if (fang < 10){ bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+fang+"-->"
html页面以及表格数据打印的实现
diaobiaoqi0148的博客
11-17 1784
记录是为了更好的成长！ 页面打印功能很常见，总结一下： 1、打印表格中的数据 　　页面引入jquery，也可以不引入，使用jquery操作DOM对象是很方便的 　　这是一个简单的演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&gt...
HTML表单—下拉菜单
m0_74357768的博客
07-20 1106
标签：（父子集），是下拉菜单整体，是下拉菜单的每一项代码如下：默认显示第一项selected属性实现默认选中功能。
请问有没有html+css+javascript的例子
03-27
这里提供一个简单的HTML、CSS和JavaScript的例子： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Welcome to my Example page!</h1> <p>Click the button below to change the text color:</p> <button onclick="changeTextColor()">Change color</button> <p id="text">This is some example text.</p> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` h1 { font-size: 36px; color: #333; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } p { font-size: 18px; color: #666; } #text { font-size: 24px; color: #333; } ``` JavaScript代码： ``` function changeTextColor() { document.getElementById("text").style.color = "red"; } ``` 这个例子中包含一个标题，一个按钮和一段文字。当用户点击按钮时，JavaScript代码会改变文字的颜色。CSS代码定义了页面的样式，HTML代码将它们组合在一起。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值