代码 一个收银台的HTML

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

该文本描述了一个收银台的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>
复制全文 生成海报 电子商务 网页设计 支付系统

推荐文章

使用xshell上传和下载文件
2024-11-18 12:55:11 +0800 CST
Vue3中的Slots有哪些变化?
2024-11-18 16:34:49 +0800 CST
支付宝批量转账
2024-11-18 20:26:17 +0800 CST
php常用的正则表达式
2024-11-19 03:48:35 +0800 CST
禁止调试前端页面代码
2024-11-19 02:17:33 +0800 CST
Go的父子类的简单使用
2024-11-18 14:56:32 +0800 CST
Vue3中如何处理权限控制?
2024-11-18 05:36:30 +0800 CST
php微信文章推广管理系统
2024-11-19 00:50:36 +0800 CST
Python 获取网络时间和本地时间
2024-11-18 21:53:35 +0800 CST
html一些比较人使用的技巧和代码
2024-11-17 05:05:01 +0800 CST
Go语言中的`Ring`循环链表结构
2024-11-19 00:00:46 +0800 CST
html一份退出酒场的告知书
2024-11-18 18:14:45 +0800 CST
一个简单的打字机效果的实现
2024-11-19 04:47:27 +0800 CST
程序员茄子在线接单