HTML+CSS例子＞报销单 

<!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>

运行效果：

 

posted @ 2022-05-12 08:57  卟怪  阅读(209)  评论(0)  编辑  收藏  举报