web前端入门到实战：仿美团详情页与购物车源码-订单页

最新推荐文章于 2021-07-02 10:56:35 发布

白T恤架构师

最新推荐文章于 2021-07-02 10:56:35 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css html 前端前端开发 web开发

本文链接：https://blog.csdn.net/ITHHH111/article/details/105296060

版权

本文介绍了web前端开发中的实战项目，详细讲解了如何创建一个仿美团订单页面，包括order.html的构建，以及涉及到的reset.css、header.css、contentList.css和bottomBar.css等样式文件的使用。同时，还阐述了contentList.js和bottomBar.js的JavaScript实现，用于实现订单列表展示和底部栏功能。文章提供了项目整体图和最终订单页的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目整体图

首先是order.html

<!DOCTYPE html>
<html>
<head>
    <title>订单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <script type="text/javascript"> (function () { var docEl = document.documentElement; function setRemUnit(){ // 获取到rem的基准值
                var rem = docEl.clientWidth / 10; // 动态设置html根元素的font-size
 docEl.style.fontSize = rem + 'px';
            }
            setRemUnit(); // 窗口大小变化时 触发
 window.addEventListener('resize', setRemUnit); // 窗口出现在当前屏幕时 （有浏览器兼容性）
 window.addEventListener('pageshow', function(e){ if (e.persisted) {
                    setRemUnit();
                }
            });
        })(); </script>
    <link rel="stylesheet" type="text/css" href="../lib/reset.css">
    <link rel="stylesheet" type="text/css" href="./header/header.css">
    <link rel="stylesheet" type="text/css" href="./contentList/contentList.css">
   <link rel="stylesheet" type="text/css" href="../common/bottomBar/bottomBar.css">
</head>
<body>
    <!--头部开始-->
    <div class="header">订单</div>
    <!--头部结束-->
    <!--订单列表开始-->
    <div class="wrap">
        <div class="order-list"></div>
        <div class="loading">加载中</div>
    </div>
    <!--订单列表结束-->
    <!--底部栏开始-->
    <div class="bottom-bar"></div>
    <!--底部栏结束-->
    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="./contentList/contentList.js"></script>
    <script type="text/javascript" src="../common/bottomBar/

最低0.47元/天解锁文章