代码 一个收银台的HTML

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

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

推荐文章

CentOS 镜像源配置
2024-11-18 11:28:06 +0800 CST
Rust 并发执行异步操作
2024-11-18 13:32:18 +0800 CST
程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
mysql时间对比
2024-11-18 14:35:19 +0800 CST
PHP服务器直传阿里云OSS
2024-11-18 19:04:44 +0800 CST
Hypothesis是一个强大的Python测试库
2024-11-19 04:31:30 +0800 CST
一个简单的html卡片元素代码
2024-11-18 18:14:27 +0800 CST
Rust 与 sqlx:数据库迁移实战指南
2024-11-19 02:38:49 +0800 CST
liunx宝塔php7.3安装mongodb扩展
2024-11-17 11:56:14 +0800 CST
12个非常有用的JavaScript技巧
2024-11-19 05:36:14 +0800 CST
robots.txt 的写法及用法
2024-11-19 01:44:21 +0800 CST
Grid布局的简洁性和高效性
2024-11-18 03:48:02 +0800 CST
浅谈CSRF攻击
2024-11-18 09:45:14 +0800 CST
Redis和Memcached有什么区别?
2024-11-18 17:57:13 +0800 CST
JS中 `sleep` 方法的实现
2024-11-19 08:10:32 +0800 CST
内网穿透技术详解与工具对比
2025-04-01 22:12:02 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
程序员茄子在线接单