html5 流程 / 物流信息demo

最新推荐文章于 2024-06-20 09:38:44 发布
最新推荐文章于 2024-06-20 09:38:44 发布
阅读量501 收藏 5
点赞数 5
分类专栏： Html 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37037838/article/details/136373661
版权

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .flow-list {padding: 15px;}
        .flow-list li{display: flex;position: relative;padding-bottom: 15px;}
        .flow-list li::before{content: ''; border-left: 2px solid #0278d8;position: absolute;inset: 0;left: 75px;}
        .flow-list .title{width: 65px;font-weight: bold;margin-right: 10px;font-size:14px}
        .flow-list .title::after{content: '';border: 3px solid #0278d8;background-color: #0278d8;display: inline-block;width: 6px;height: 6px;border-radius: 10px;position: absolute;left: 71px;top: 0;}
        .flow-list .content{flex:1;margin-left: 15px;border-bottom: 1px solid #ccc;padding-bottom: 15px;font-size: 12px !important;}
	</style>
</head>

<body>
    <ul class="flow-list">
        <li>
            <div class="title">邮寄快递</div>
            <div class="content">
                <p>邮寄限时 2024-2-12 12：23前</p>
                <p>余3天2小时15分</p>
                <p style="margin-left: 10px;">
                    快递公司：顺丰快递<br>
                    快递方式：专享快递 【查看快递情况】
                </p>
                <p>买家包裏确认 2024-2-12 12：23</p>
                <p>确认验收限时 2024-2-12 12：23前</p>
                <p>余3天2小时15分</p>
                <p>确认验收 2024-2-12 12：23</p>
            </div>
        </li>
        <li>
            <div class="title">现场交收</div>
            <div class="content">
                <p>现场交收限时 2024-2-12 12：23前</p>
                <p>余3天2小时15分</p>
                <p>买家到达确认 2024-2-12 12：23</p>
                <p>卖家确认 2024-2-12 12：23</p>
                <p>卖家交货确认 2024-2-12 12：23</p>
                <p>买家收货确认 2024-2-12 12：23</p>
            </div>
        </li>
        <li>
            <div class="title">发货限时</div>
            <div class="content">
                <p>2024-2-12 12：43前</p>
                <p>余 3天5小时18分</p>
            </div>
        </li>
        <li>
            <div class="title">延期付款期限</div>
            <div class="content">
                <p>2024-2-12 12：43前</p>
                <p>余 3天5小时18分</p>
            </div>
        </li>
        <li>
            <div class="title">逾期付款处理</div>
            <div class="content">
                <p>催收 2024-2-12 12：23</p>
                <p>催收方式 平台客服电话催收</p>
                <p>催收结果 买家同意付款</p>
                <p>卖家意见 同意延期付款 </p>
            </div>
        </li>
        <li>
            <div class="title">付款</div>
            <div class="content">
                <p>2024-2-12 12：43（逾期确认）</p>
            </div>
        </li>
        <li>
            <div class="title">付款限时</div>
            <div class="content">
                <p>2024-2-12 12：43前</p>
                <p>余 3天5小时18分</p>
            </div>
        </li>
        <li>
            <div class="title">成交确认</div>
            <div class="content">
                <p>2024-2-12 12：43（逾期确认）</p>
            </div>
        </li>
        <li>
            <div class="title">销售结果</div>
            <div class="content">
                <p>竞价成交 2024-2-12 12：43</p>
                <p>成交确认限时 2024-2-12 12：43前</p>
                <p>余 3天5小时18分</p>
            </div>
        </li>
        <li>
            <div class="title">销售结束</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">审核通过</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">终止销售</div>
            <div class="content">
                <p>申请 2024-2-12 12：43</p>
                <p>原因：</p>
            </div>
        </li>
        <li>
            <div class="title">销售无效</div>
            <div class="content">
                <p>申请 2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">恢复</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">审核通过</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">暂停销售</div>
            <div class="content">
                <p>申请 2024-2-12 12：43</p>
                <p>原因：</p>
            </div>
        </li>
        <li>
            <div class="title">卖家销售撤销</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
                <p>原因：</p>
            </div>
        </li>
        <li>
            <div class="title">竞价开始</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">预购</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">结束</div>
            <div class="content">
                <p>2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">预展</div>
            <div class="content">
                <p>开始 2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">审核</div>
            <div class="content">
                <p>通过 2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">审核</div>
            <div class="content">
                <p>退回 2024-2-12 12：43</p>
            </div>
        </li>
        <li>
            <div class="title">发布</div>
            <div class="content">
                <p>自行发布 2024-2-12 12：43</p>
            </div>
        </li>
    </ul>
</body>

</html>
快递查询.html
09-27
快递查询.html 简单易懂，很快就学会了，可以嵌在你自己的项目里面，自己写的，很实用
大屏可视化demo，网页版本
07-30
2. **智慧物流**：在物流领域，大屏可视化可用于监控货物运输、仓库管理、订单处理等流程。常见的可视化元素有地图上的物流轨迹、仓库库存动态、配送效率分析等，有助于优化物流网络，提升服务质量和效率。 3. **...
html5全屏物流信息大数据展示界面模板
07-13
注：无后台 html5全屏物流信息大数据展示界面模板
HTML-物流快递公司-网站网页H5源码.zip
03-03
这套HTML源代码文件为您呈现了一款多功能的网页模板，旨在满足各类网站开发需求。借助前沿的HTML5和CSS3技术，该模板不仅具备了响应式设计，以确保无缝适配各式设备，还内置了众多JavaScript插件，以实现高级的交互功能。此源代码文件的设计考虑了极高的定制性，允许您依据个人或项目要求进行灵活的页面布局、颜色调整和内容更新，从而轻松塑造出独具特色的网站风格。代码的清晰结构和详尽注释，也使得即使是初学者也能快速掌握前端开发的核心技术。无论是面对课程设计、毕业设计的挑战，还是希望在专业领域展现自我，这份源代码文件都能成为您的得力伙伴。它的高效、实用和易用性，使其成为了无论是专业设计师还是编程爱好者的必备资源。选择这份源代码文件，让您的项目更加出色，让学习和应用变得更加轻松。
物流运输仓储货运快递企业网站css3+html5模板
ICode联盟
12-13 171
仓储货运快递企业网站模板，物流运输仓储货运快递企业网站模板。
基于HTML的物流快递网站静态网页设计与实现
qq_53797749的博客
05-19 1008
通过对该网站的设计和实现进行详细的分析，以期为物流快递行业的网站开发提供有益的参考。首先，物流快递网站需要为用户提供实时的物流信息查询功能，使用户能够方便地查询包裹的运输状态。通过对网站的需求分析、系统设计、技术实现和用户体验优化策略的探讨，我们成功地构建了一个功能完善、操作便捷、用户体验良好的物流快递网站。未来，我们将继续关注物流快递行业的发展趋势和用户需求变化，不断完善和优化网站的功能和服务，为物流快递行业的发展做出更大的贡献。在首页中央，我们展示了实时的物流信息更新，方便用户随时了解包裹的运输状态。
自适应HTML5宽屏物流运输快递货运类网站源码 pbootcms模板
banzhuan678的博客
03-03 1209
介绍： PbootCMS内核开发的网站模板，该模板适用于物流运输网站、快递货运网站等企业，当然其他行业也可以做，只需要把文字图片换成其他行业的即可；自适应，同一个后台，数据即时同步，简单适用！附带测试数据！友好的seo，所有页面均都能完全自定义标题/关键词/描述，PHP程序，安全、稳定、快速；用低成本获取源源不断订单！ 后台：域名/admin.php 账号：admin 密码：admin 模板特点： 1：手工书写DIV+CSS、代码精简无冗余。 2：自适应结构，全球先进技术，高端视觉体验。 3：SEO框架布
微信小程序-包裹转运物流Demo源码
05-07
在这个物流Demo中，可能用到了`wx.request`来实现物流信息的获取和更新，`wx.onSocketMessage`可能用于监听WebSocket实时物流更新。 6. **页面路由与生命周期** 页面路由是小程序中控制页面跳转的关键，通过`wx....
购物商城demo.7z
05-17
7. **库存与物流管理**：后台系统需实时更新商品库存信息，并与物流服务商进行数据交换，跟踪订单配送状态。 8. **购物车与结算流程**：购物车功能允许用户临时保存商品，结算流程需确保价格计算准确，处理优惠券、...
php生成二维码、条形码类库及Demo源码.zip
03-29
- 在物流跟踪中，条形码用于标识包裹，简化追踪流程。 - 在营销活动中，通过生成包含特定优惠信息的二维码，引导用户参与互动。 了解并掌握这些PHP类库的使用，可以帮助开发者提高效率，快速实现二维码和条形码...
HTML网站源码-国际物流快递公司网站模板-响应式源码.zip
03-26
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
h5自适应物流快递企业网站html静态模板
12-04
h5自适应物流快递企业网站html静态模板
HTML网站源码-城际物流运输公司网站模板-响应式源码.zip
03-26
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
HTML网站源码-国际海上运输物流网页模板-响应式源码.zip
03-26
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
echarts物流模板(HTML5物流大数据服务平台后台模板).zip
12-12
echarts物流模板(HTML5物流大数据服务平台后台模板).zip
斑马打印机JavaWeb开发Demo
06-20
通过分析这个Demo，开发者可以学习如何使用Java和Web服务技术与斑马打印机进行集成，这对于需要在业务流程中嵌入打印功能的开发者来说是极其有价值的。同时，这个示例也提供了良好的学习材料，帮助开发者理解和实践...
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
海碗吃饭的博客
04-14 1618
它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。使用全国快递物流查询 API，用户可以在自己的应用程序或网站上，快速、方便地查询快递物流信息。全国快递物流查询 API 的应用场景广泛，能够帮助各个行业和场景中的用户快速查询、管理和分析快递物流信息，提高工作效率和服务质量。本文从全国快递物流查询 API 的工作原理开始说起，给出包括 API 的应用场景、如何调用以及实际代码示例，供大家参考。
物流快递速递 企业官网 网页设计 html源码 大作业
最新发布
VX_laoxuezhangzy的博客
06-20 373
作品编号：0055 页面数目：5页技术特点：html+css+js Bootstrap框架 dw、hbuilder、vscode、sublime等编辑软件都可以查看或者修改图片文字代码 本网页作业作品共 5 页，以下为具有代表性的页面截图 运行效果图：
＜input＞标签构建快递信息界面(HTML+CSS)
小滕的Java学习旅途
11-28 5242
效果显示 HTML+CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>增加快递信息</title> <style type="text/css"> body{color:white;} header{text-align: center;font-size:25px} #main{width: 700px;height: 65.
Java物流配货系统演示及客户车源管理功能
资源摘要信息:"Java版本物流配货网源码demo是一个基于Java语言开发的物流配货网络应用系统的示例代码。该系统具备基本的用户管理、客户管理、车源信息管理和发货单查询功能，适合于教学或小型物流企业的实际应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值