快递100 home.html代码

已于 2022-03-08 13:21:29 修改
阅读量2.5k 收藏 3
点赞数
文章标签： html css3 css
于 2021-12-08 17:47:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snpstudy/article/details/121797141
版权
这是一个关于快递100的网页设计代码，包括PC、pad和移动端的响应式布局。页面包含头部导航、时间显示、用户信息、寄件选项、服务统计数据、功能模块和底部导航。页面元素如快递二维码、邀请快递员等，以及JavaScript实现的时间动态更新和用户名显示。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>【快递100】</title>
        <!-- <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
        <style>
            /*PC端*/
            @media screen and (min-width:960px) {
              
            }
            /*pad端*/
            @media screen and (max-width:960px) and (min-width: 750px) {
                
            }
            /*移动端*/
            @media screen and (max-width:750) {
                
            }
            html, body {
                height:100%;
                margin:0;
                padding:0
            }
            body,ul,li,a{
                margin: 0px;
                padding: 0px;
                list-style: none;
                text-decoration: none;
            }
            body{
                background-color: #fff;
            }
            header{
                width: 100%;
                margin: 0 auto;
                position:absolute;
                top:0;
                height: 60px;
                /* 水平居中 横向 */
                align-items: center;
                background-color: rgb(84, 133, 240);
                color: white;
            }
            .top{
                margin:0 auto;
                height: 60px;
                width: 90%;
                display: flex;
                /*两边对齐*/
                justify-content: space-between;
            }
            .top-left{
                display: flex;
                height: 60px;
                width: 30%;
            }
            .top-left>div{
                display: flex;
                width: 100%;
                height: 60px;
                align-items: center;
            }
            #time{
                font-weight: bold;
                font-size: 60px;
                height: 60px;
            }
            .top-right{
                display: flex;
                align-items: center;
                justify-content:center;
            }
            .top-right>div{
                display: flex;
                width: 100%;
                height: 60px;
                align-items: center;
                justify-content:center;
            }
            .top-right>div>img{
                height: 60px;
            }
           
            #main {
                width:100%;
                overflow:auto;
                top:4rem;
                position:absolute;
                z-index:10;
                bottom:4rem;
            }
            #myInfo{
                display: flex;
                width: 100%;
                margin: 0 auto;
                height: 100px;
                background-color: rgb(84, 133, 240);
            }
            #myInfos{
                display: flex;
                width: 100%;
                margin: 0 auto;
                height: 100px;
                background-color: rgb(84, 133, 240);
            }
            #myInfo-1{
                display: flex;
                width: 30%;
                justify-content: space-between;
                align-items: center;
            }
            #myInfo-1>div>img{
                border-radius: 140px;
                border: 1px solid white;
                border: 1px solid rgb(84, 133, 240);
            }
            #myInfo-2{
                width: 40%;
                display: flex;
                align-items: center;
            }
            #myInfo-2{
                display: flex;
                justify-content:center;
            }
            #myInfo-3{
                width: 30%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            #text{
                display: flex;
                width: 100%;
                margin: 0 auto;
                height: 100px;
            }
            #text>div{
                display: flex;
                width: 90%;
                margin: 0 auto;
                justify-content:center;
            }
            #text>div>input{
                width: 100%;
                display: flex;
                border-radius: 40px;
                border:none;
                background-color: gainsboro;
                font-size: 40px;
            }
            #name{
                font-size: 60px;
                color: white;
            }
            #div-five{
                width: 96%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
                background-color: white;
            }
            #div-five>#div-five1{
                width: 33%; 
                display: flex;
                align-items: center;
                justify-content:center;
                border: 1px solid gainsboro;
            }
            #div-five>#div-five1>div{
                align-items: center;
                justify-content:center;
            }
            #div-five1>div>div>img{
                width: 100%;
            }
            #div-five1>div>#wenzispan{
                text-align: center;
                font-size: 35px;
            }
            #nums{
                text-align: center;
            }
            #miaoshu{
                font-size: 30px;
                color: white;
            }
            #center{
                display: flex;
                width: 100%;
                margin: 0 auto;
                border: 1px solid red;
                height: 200px;
            }
            #center>div{
                display: flex;
                width: 100%;
            }
            #center>div>div{
                border: 1px solid black;
                width: 100%;
                display: flex;
            }
            #center>div>div>div{
                align-items: center;
                width: 33.3%;
            }
            #list{
                width: 100%;
                display: flex;
                height: 120px;
                border: 1px solid rgba(31, 45, 61, 0.5);
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                align-items: center;
                justify-content:center;
            }
            #list>div{
                width: 95%;
                display: flex;
                justify-content: space-between;
            }
            footer {
                display: flex;
                width:100%;
                position:absolute;
                z-index:200;
                bottom:0;
                text-align:center;
                justify-content: space-between;
            }
            #title{
                font-size: 40px;
            }
            #footerBtn{
                display: flex;
                width: 50%;
            }
            #btn{
                width: 100%;
                border: none;
                font-size: 50px;
                border-radius: 40px;
                color: white;
                background-color: cornflowerblue;
            }
            #biaoti{
                display: flex;
                width: 96%;
                align-items: center;
                margin: 0 auto;
                height: 100px;
                border: 1px solid red;
                margin-bottom: 20px;
            }
            #biaoti>div{
                font-size: 40px;
            }
            
        </style>
    </head>
    <body>
        <header>
            <div class="top">
                <div class="top-left">
                    <div>
                        <span id="time"></span>
                    </div>
                </div>
                <div class="top-right">
                    <div>
                        <img src="../img/myxinhao.png" alt="">
                    </div>
                    <div id="dianchiimg">
                        <img src="../img/mydianchi.png" alt="">
                    </div>
                </div>
            </div>
        </header>
        <div id="main">
            <div id="myInfo">
                <div id="myInfos">
                    <div id="myInfo-1">
                        <div><img src="../img/tishi.png" alt=""></div>
                    </div>
                    <div id="myInfo-2">
                        <div>
                            <div><span id="name"></span></div>
                        </div>
                    </div>
                    <div id="myInfo-3"></div>
                </div>
            </div>
            <div id="text">
                <div>
                    <input type="text"placeholder="大连东软二期菜鸟驿站">
                </div>
            </div>
            <div id="div-five">
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/kuaidi.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>寄快递</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/shengxian.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>生鲜冷运</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/dajian.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>寄大件</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="div-five">
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/paotui.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>同城急送</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/guoji.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>国际件</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/kuaidibox.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>快递柜寄件</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="div-five">
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/shangjia.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>商家寄件</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/geri.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>隔日达</span>
                        </div>
                    </div>
                </div>
                <div id="div-five1">
                    <div>
                        <div id="nums">
                            <img src="../img/qidai.png" alt="">
                        </div>
                        <div id="wenzispan">
                            <span>敬请期待</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="biaoti">
                <div>
                    <span>快递100【丢必赔】服务今天已守护<span id="changeNum">213143</span>个包裹</span>
                </div>
            </div>

            
            <div id="list">
                <div>
                    <div><span id="title">寄件二维码</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">邀请快递员</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">电脑网页版</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">店铺管理</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">平台接单</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">快递员好友</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">协议客户管理</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
            <div id="list">
                <div>
                    <div><span id="title">打印机配置</span></div>
                    <div><img src="../img/gogo.png" alt=""></div>
                </div>
            </div>
        </div>
        <footer>
            <div id="footerBtn">
                <button id="btn" value="首页">首页</button>
            </div>
            <div id="footerBtn">
                <button id="btn" value="我的">我的</button>
            </div>
        </footer>
    </body>
</html>

<script type="text/javascript">
    // js——>span标签显示获取系统时间
    var myDate = new Date();
    var shi = myDate.getHours(); 
    var fen = myDate.getMinutes();
    var here = document.getElementById("time");
    var str = fen.toString();
    if(str.length<2){
        here.innerHTML=shi + ":0" + fen;
    } else {
        here.innerHTML=shi + ":" + fen;
    }
    //json
    var username = {
        "uname":"寄快递",
    }
    var uid = username.uname;
    document.getElementById("name").innerText = uid;
</script>
snpgogogo
关注
物流快递电子面单HTML接口API代码-快递100
kuaidi100API的博客
04-06 24万+
一、电子面单HTML接口 通过快递公司或网点、菜鸟与淘宝提供的电子面单账号，提交生成电子面单号，返回固定面单模板，调用本地打印机即可打印出电子面单。 1.1 接口格式 提供统一格式的HTTP POST或GET调用接口,并返回统一格式JSON数据。 1.2 请求地址 http://poll.kuaidi100.com/eorderapi.do 请求参数（header） 名称 类型 默认值 Content-Type string application/x-www-form-urlencoded
基于html+css+javascript+jquery+bootstarp响应式的鲜花预订网电商模板(21页)
m0_73260518的博客
08-13 255
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
home.html
03-29
home.html
快递查询.html
09-27
快递查询.html 简单易懂，很快就学会了，可以嵌在你自己的项目里面，自己写的，很实用
home_html_HomeHome_
10-03
绿色食品网网站首页，涵盖了商品会展，商城等多个导航页面
设为首页代码(html源码)
web开发
02-17 1664
&lt;astyle="cursor:hand"onclick="this.style.behavior=’url(#default#homepage)’; this.setHomePage(’http://elouai.com/bookmark-favorites.php’);"&gt; &lt;imgwidth=16height=16border=0src="images/house.png"...
HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
11-24 3179
HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可
基于Springboot的外卖系统代码
04-04
- 快递100开发文档：https://www.kuaidi100.com/openapi/applyapi.shtml 代码片段： 以下是一个简单的Springboot Controller代码片段，用于处理用户登录请求： ```java @Controller public class UserController ...
JAVA毕业设计HTML5寿光农产品资源展示平台计算机源码+lw文档+系统+调试部署+数据库
sheji112的博客
09-15 198
JAVA毕业设计HTML5寿光农产品资源展示平台计算机源码+lw文档+系统+调试部署+数据库。ssm基于大数据在线考试系统在线阅卷系统及大数据统计分析。ssm基于Vue的潍坊学院宿舍管理系统的设计与实现。springboot办公自动化系统的设计与实现。基于Java技术的社区物业管理的设计与实现。springboot编程训练系统设计与实现。ssm基于JAVA网上书店的设计与实现。
java计算机毕业设计体育城场地预定系统后台源代码+数据库+系统+lw文档1
影伴设计
09-27 339
java计算机毕业设计体育城场地预定系统后台源代码+数据库+系统+lw文档1。ssm基于HTML的互动游戏新闻网站的设计与实现。ssm基于ssm+vue的高校个性化选课推荐。ssm基于HTML的武昌理工学院二手交易网站。springboot基于微信小程序的二手商城。ssm基于SSM框架的在线健康系统设计与实现。springbootIn-Home阅读平台。ssm基于SSM的英语学习网站的设计与实现。
HTML-物流快递公司-网站网页H5源码.zip
最新发布
03-03
这套HTML源代码文件为您呈现了一款多功能的网页模板，旨在满足各类网站开发需求。借助前沿的HTML5和CSS3技术，该模板不仅具备了响应式设计，以确保无缝适配各式设备，还内置了众多JavaScript插件，以实现高级的交互功能。此源代码文件的设计考虑了极高的定制性，允许您依据个人或项目要求进行灵活的页面布局、颜色调整和内容更新，从而轻松塑造出独具特色的网站风格。代码的清晰结构和详尽注释，也使得即使是初学者也能快速掌握前端开发的核心技术。无论是面对课程设计、毕业设计的挑战，还是希望在专业领域展现自我，这份源代码文件都能成为您的得力伙伴。它的高效、实用和易用性，使其成为了无论是专业设计师还是编程爱好者的必备资源。选择这份源代码文件，让您的项目更加出色，让学习和应用变得更加轻松。
顺丰快递单html
11-17
顺丰快递单html div css 顺丰打印模版demo
home.html:网站设计
05-24
home.html 网站设计
Home(HTML)现方案XP
03-27
Home(HTML)现方案XP HTML开发的网页代码 XP系统
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
海碗吃饭的博客
04-14 1498
它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。使用全国快递物流查询 API，用户可以在自己的应用程序或网站上，快速、方便地查询快递物流信息。全国快递物流查询 API 的应用场景广泛，能够帮助各个行业和场景中的用户快速查询、管理和分析快递物流信息，提高工作效率和服务质量。本文从全国快递物流查询 API 的工作原理开始说起，给出包括 API 的应用场景、如何调用以及实际代码示例，供大家参考。
＜input＞标签构建快递信息界面(HTML+CSS)
小滕的Java学习旅途
11-28 4916
效果显示 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.
html快递详情界面,物流页面css,html
weixin_33245447的博客
06-03 1902
效果图微信图片_20190219160039.pngcss.trans{width: 100%;}.trans ul{list-style: none;padding: 0;margin: 0;}.trans ul li{display: inline-block;float: left;position: relative;}.left{width: 35%;text-align: center...
html禁用home,home.html
weixin_28681379的博客
06-08 3777
Welcome to the website of the Chicago & Aurora Divisions. This is a HO Scale representation of the Chicago Burlington & Quincy's Chicago to Aurora triple track mainline along with the Chicago ...
编写快递录入单的html代码,035 工作单快速录入 - bos(示例代码)
weixin_39776991的博客
06-18 549
一、前台代码理解及修改1.新增行也可完成提交原来编辑的行功能(如果有在编辑的行)//全局变量var editIndex;function doAdd() {if (editIndex != undefined) {//表示有一行正在编辑，先结束编辑的行(会触发onAfterEdit)$("#grid").datagrid(‘endEdit‘, editIndex);}//没有行在编辑状态才能进行新...
帮我解释下列Node.js代码：res.render("home.html", {username: req.session.username});
09-24
### 回答1： 这段 Node.js 代码使用了 res.render 方法来渲染名为 "home.html" 的模板文件，并将一个对象作为第二个参数传递给模板。这个对象包含一个键值对，其中键为 "username"，值为 req.session.username，即当前用户的用户名。在模板中，可以通过 {{username}} 来获取这个值并进行展示。 ### 回答2： 这段Node.js代码的作用是将一个名为"home.html"的视图文件渲染并发送给客户端，并同时向视图文件传递了一个对象{username: req.session.username}作为参数。 首先，Node.js平台是一种基于事件驱动和非阻塞I/O模型的服务器端JavaScript运行环境。它允许我们使用JavaScript编写服务器端应用程序，包括处理HTTP请求和响应等功能。 在这段代码中，我们可以看到res.render()方法的使用。这个方法是Express框架中用于渲染视图文件并发送给客户端的方法。它需要两个参数，第一个参数是要渲染的视图文件的路径或文件名，第二个参数是一个对象，存储了要传递给视图文件的数据或变量。 具体到这段代码的示例，"home.html"是要渲染的视图文件的路径或文件名。它可能是一个HTML文件，其中包含了页面的布局、样式和结构等内容。 而第二个参数{username: req.session.username}是一个对象，它包含了一个名为"username"的属性，属性的值为req.session.username。这里的req.session.username是从另外一个地方（可能是通过用户登录或其他逻辑设置的）传递过来的数据。这个对象会被传递给视图文件，在视图文件中可以通过对应的属性名来获取和使用这些数据。 总而言之，这段代码的作用是将名为"home.html"的视图文件渲染并发送给客户端，同时传递了一个包含了用户名信息的对象给视图文件，以便在视图文件中动态显示该用户名。 ### 回答3： 这段Node.js代码的作用是渲染名为"home.html"的模板，并将一个对象作为参数传递给模板。该对象包含一个键值对，键为"username"，值为"req.session.username"的值。 res.render()是一个Express框架中的方法，用于渲染模板。它接受两个参数，第一个参数是要渲染的模板文件名，可以是一个相对路径或者是一个在设定的模板文件夹中的文件名。第二个参数是一个对象，用于向模板传递数据。 在这个例子中，"home.html"模板将被渲染，并且可以在模板中通过"{{ username }}"来访问"req.session.username"的值。"req.session.username"是从请求对象(req)的session属性中获取的，而这个session属性可能是在用户登录成功后设置的。 换句话说，这段代码的目的是将"home.html"模板渲染并展示给用户，同时将当前用户的用户名(req.session.username)传递给模板，以便在模板中展示用户的个性化信息。这样，模板就可以根据用户的信息生成动态的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值