代码 一个收银台的HTML

2025-01-17 16:15:32 +0800 CST views 784

该文本描述了一个收银台的HTML结构,包含了页面的样式和内容。页面展示了商品编码、订单金额、商品编号和创建时间,并提供了微信支付和支付宝支付的按钮。整体设计简洁,使用了响应式布局,适合移动设备浏览。

<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>收银台</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background-color: #34c759;
            height: 150px;
            position: relative;
        }

        .content {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .content-header {
            display: flex;
            align-items: center;
            padding: 15px;
            /*background-color: #34c759;*/
            /*color: #fff;*/
            text-align: center;
            justify-content: center;
            font-size: 30px;
        }

        .content-header img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .content-header span {
            font-size: 30px;
            font-weight: bold;
        }

        .content-body {
            padding: 15px;
        }

        .content-body .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
        }

        .content-body .row .value {
            font-weight: bold;
        }

        .content-body .row .value.red {
            color: red;
        }

        .pay-button {
            display: block;
            width: 90%;
            margin: 20px auto;
            padding: 15px;
            text-align: center;
            background-color: #34c759;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .pay-button:hover {
            background-color: #2da94e;
        }
        .alipay{
                background-color: #5e72f5;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="content-header">
            
            <span>收银台</span>
        </div>
        <div class="content-body">
            <div class="row">
                <span>商品编码:</span>
                <span class="value">dfksdkfsd</span>
            </div>
            <div class="row">
                <span>订单金额:</span>
                <span class="value red">¥ 0.01</span>
            </div>
            <div class="row">
                <span>商品编号:</span>
                <span class="value">29KN8QHdpkE9miToFnhe</span>
            </div>
            <div class="row">
                <span>创建时间:</span>
                <span class="value">2025-01-17 15:49:03</span>
            </div>
        </div>
        <button class="pay-button">微信支付</button>
        <button class="pay-button alipay">支付宝支付</button>
    </div>
</body>
</html>
复制全文 生成海报 电子商务 网页设计 支付系统

推荐文章

一个数字时钟的HTML
2024-11-19 07:46:53 +0800 CST
使用临时邮箱的重要性
2025-07-16 17:13:32 +0800 CST
Rust async/await 异步运行时
2024-11-18 19:04:17 +0800 CST
Vue3中如何处理路由和导航?
2024-11-18 16:56:14 +0800 CST
介绍 Vue 3 中的新的 `emits` 选项
2024-11-17 04:45:50 +0800 CST
使用Vue 3和Axios进行API数据交互
2024-11-18 22:31:21 +0800 CST
从Go开发者的视角看Rust
2024-11-18 11:49:49 +0800 CST
Go 并发利器 WaitGroup
2024-11-19 02:51:18 +0800 CST
全栈工程师的技术栈
2024-11-19 10:13:20 +0800 CST
一文详解回调地狱
2024-11-19 05:05:31 +0800 CST
mysql 优化指南
2024-11-18 21:01:24 +0800 CST
api接口怎么对接
2024-11-19 09:42:47 +0800 CST
css模拟了MacBook的外观
2024-11-18 14:07:40 +0800 CST
Vue3 中提供了哪些新的指令
2024-11-19 01:48:20 +0800 CST
快速提升Vue3开发者的效率和界面
2025-05-11 23:37:03 +0800 CST
在JavaScript中实现队列
2024-11-19 01:38:36 +0800 CST
Vue3 实现页面上下滑动方案
2025-06-28 17:07:57 +0800 CST
Golang在整洁架构中优雅使用事务
2024-11-18 19:26:04 +0800 CST
windows安装sphinx3.0.3(中文检索)
2024-11-17 05:23:31 +0800 CST
html一份退出酒场的告知书
2024-11-18 18:14:45 +0800 CST
小技巧vscode去除空格方法
2024-11-17 05:00:30 +0800 CST
Nginx 反向代理
2024-11-19 08:02:10 +0800 CST
程序员茄子在线接单