当前位置：首页 > CSS

html css 制作单据

2026-02-26 22:01:52CSS

HTML 和 CSS 制作单据

单据通常包含表格、标题、日期、项目列表和总计等元素。以下是一个基本的单据制作方法：

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单据</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="invoice">
        <header class="invoice-header">
            <h1>发票</h1>
            <div class="invoice-info">
                <p>编号: <span>INV-2023-001</span></p>
                <p>日期: <span>2023-11-15</span></p>
            </div>
        </header>

        <div class="invoice-body">
            <div class="client-info">
                <h2>客户信息</h2>
                <p>名称: 某某公司</p>
                <p>地址: 某某市某某区某某路123号</p>
            </div>

            <table class="items">
                <thead>
                    <tr>
                        <th>项目</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>商品A</td>
                        <td>2</td>
                        <td>100.00</td>
                        <td>200.00</td>
                    </tr>
                    <tr>
                        <td>商品B</td>
                        <td>1</td>
                        <td>150.00</td>
                        <td>150.00</td>
                    </tr>
                </tbody>
            </table>

            <div class="invoice-total">
                <p>总计: <span>350.00</span></p>
            </div>
        </div>

        <footer class="invoice-footer">
            <p>谢谢惠顾!</p>
        </footer>
    </div>
</body>
</html>

CSS 样式

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 20px;
}

.invoice {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.invoice-header h1 {
    margin: 0;
    color: #333;
}

.invoice-info {
    text-align: right;
}

.client-info {
    margin-bottom: 20px;
}

table.items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.items th, table.items td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table.items th {
    background-color: #f5f5f5;
}

.invoice-total {
    text-align: right;
    font-weight: bold;
    font-size: 1.2em;
}

.invoice-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-style: italic;
}

单据设计要点

布局结构

单据通常分为头部(包含标题和编号信息)、客户信息区、项目明细表格和页脚。使用清晰的层次结构有助于提高单据的可读性。

表格样式

项目明细表格应清晰易读，使用交替行颜色可提高可读性：

table.items tr:nth-child(even) {
    background-color: #f9f9f9;
}

响应式设计

确保单据在移动设备上也能正常显示：

@media (max-width: 600px) {
    .invoice-header {
        flex-direction: column;
    }

    .invoice-info {
        text-align: left;
        margin-top: 10px;
    }

    table.items {
        font-size: 0.9em;
    }
}

高级样式选项

打印优化

添加打印样式确保打印效果良好：

@media print {
    body {
        padding: 0;
        font-size: 12pt;
    }

    .invoice {
        border: none;
        box-shadow: none;
    }

    .no-print {
        display: none;
    }
}

水印效果

为单据添加水印：

html css 制作单据

.invoice {
    position: relative;
}

.invoice::after {
    content: "样单";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 4em;
    color: rgba(0,0,0,0.1);
    pointer-events: none;
    z-index: -1;
}

以上代码提供了一个完整的单据HTML和CSS实现方案，可根据实际需求进行调整和扩展。