代码 一个收银台的HTML

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

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

推荐文章

filecmp,一个Python中非常有用的库
2024-11-19 03:23:11 +0800 CST
html一个包含iPhoneX和MacBook模拟器
2024-11-19 08:03:47 +0800 CST
ElasticSearch简介与安装指南
2024-11-19 02:17:38 +0800 CST
Java环境中使用Elasticsearch
2024-11-18 22:46:32 +0800 CST
PHP 的生成器,用过的都说好!
2024-11-18 04:43:02 +0800 CST
为什么大厂也无法避免写出Bug?
2024-11-19 10:03:23 +0800 CST
Vue3中的Scoped Slots有什么改变?
2024-11-17 13:50:01 +0800 CST
开源AI反混淆JS代码:HumanifyJS
2024-11-19 02:30:40 +0800 CST
JavaScript设计模式:观察者模式
2024-11-19 05:37:50 +0800 CST
Vue3中怎样处理组件引用?
2024-11-18 23:17:15 +0800 CST
Vue 中如何处理父子组件通信?
2024-11-17 04:35:13 +0800 CST
CSS Grid 和 Flexbox 的主要区别
2024-11-18 23:09:50 +0800 CST
GROMACS:一个美轮美奂的C++库
2024-11-18 19:43:29 +0800 CST
如何在Vue中处理动态路由?
2024-11-19 06:09:50 +0800 CST
go发送邮件代码
2024-11-18 18:30:31 +0800 CST
Python Invoke:强大的自动化任务库
2024-11-18 14:05:40 +0800 CST
JS中 `sleep` 方法的实现
2024-11-19 08:10:32 +0800 CST
JS 箭头函数
2024-11-17 19:09:58 +0800 CST
Redis函数在PHP中的使用方法
2024-11-19 04:42:21 +0800 CST
Vue3中哪些API被废弃了?
2024-11-17 04:17:22 +0800 CST
Shell 里给变量赋值为多行文本
2024-11-18 20:25:45 +0800 CST
程序员茄子在线接单