diff --git a/新版闲书网主页/.idea/前端/css/order.css b/新版闲书网主页/.idea/前端/css/order.css
new file mode 100644
index 0000000..88bcf16
--- /dev/null
+++ b/新版闲书网主页/.idea/前端/css/order.css
@@ -0,0 +1,307 @@
+#header {
+    height: 122px;
+    margin-top: -26px !important;
+    width: auto !important;
+    position: relative;
+    z-index: 1000;
+    margin-bottom: 0;
+    min-width: 990px;
+    background: #fff;
+}
+
+#content, #footer, #header, #page {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.headerLayout {
+    width: 990px;
+    padding-top: 26px;
+    margin: 0 auto;
+}
+
+.headerCon {
+    position: relative;
+}
+
+#mallLogo {
+    float: left;
+    z-index: 9;
+    padding-top: 28px;
+    width: 400px;
+    height: 64px;
+    line-height: 64px;
+    position: relative;
+}
+
+h1, h2 {
+    font-weight: 500;
+}
+
+#mallLogo .mlogo {
+    float: left;
+    margin-right: 10px;
+    padding: 0;
+}
+
+#mallLogo .mlogo a {
+    height: 30px;
+    font-size: 22px;
+    width: 190px;
+    overflow: hidden;
+}
+
+.header-extra {
+    overflow: visible;
+}
+
+.tmall-stepbar {
+    padding-top: 25px;
+    width: 710px;
+}
+
+.next-step {
+    width: 100%;
+    position: relative;
+    border: none;
+}
+
+.next-step-circle.next-step-horizontal {
+    text-align: center;
+    white-space: nowrap;
+}
+
+.next-step-circle.next-step-horizontal {
+    text-align: center;
+    white-space: nowrap;
+}
+
+.next-step-horizontal>.next-step-item {
+    display: inline-block;
+    text-align: left;
+}
+
+.next-step-item {
+    position: relative;
+    vertical-align: middle;
+    outline: 0;
+    height: 100%;
+}
+
+.next-step-circle .next-step-item-container {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding: 0 8px;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-node-placeholder {
+    width: 32px;
+    height: 32px;
+    position: relative;
+}
+
+.next-step-circle .next-step-item-container .next-step-item-node-placeholder {
+    display: inline-block;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-node {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+}
+
+.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle {
+    background: #ff0036;
+    border-color: #ff0036;
+}
+
+.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle, .next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-dot {
+    background: #f50;
+    border-color: #f50;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-node-circle {
+    display: block;
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid;
+    border-radius: 50%;
+    -webkit-transition: background-color .1s linear;
+    transition: background-color .1s linear;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body {
+    width: 100px;
+    left: -26px;
+    text-align: center;
+    position: absolute;
+}
+
+.next-step-item-body {
+    outline: 0;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
+    white-space: nowrap;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title {
+    font-size: 16px;
+    line-height: 20px;
+    margin-top: 8px;
+    font-weight: 700;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content, .next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
+    white-space: normal;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-title {
+    color: #333;
+    word-break: break-word;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content {
+    margin-top: 4px;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content, .next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
+    white-space: normal;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-content {
+    color: #333;
+    font-size: 14px;
+    word-break: break-word;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail {
+    display: inline-block;
+    clear: both;
+    width: calc(100% - 48px);
+    vertical-align: middle;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay {
+    display: block;
+    height: 1px;
+    position: relative;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-tail-underlay {
+    background: #e6e7eb;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay {
+    position: absolute;
+    top: 0;
+    height: 1px;
+    -webkit-transition: all .1s linear;
+    transition: all .1s linear;
+    width: 100%;
+}
+
+.next-step-circle>.next-step-item-process .next-step-item-tail-overlay {
+    background: #c4c6cf;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail {
+    display: inline-block;
+    clear: both;
+    width: calc(100% - 48px);
+    vertical-align: middle;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay {
+    display: block;
+    height: 1px;
+    position: relative;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-tail-underlay {
+    background: #e6e7eb;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay {
+    position: absolute;
+    top: 0;
+    height: 1px;
+    -webkit-transition: all .1s linear;
+    transition: all .1s linear;
+    width: 100%;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-tail-overlay {
+    background: #c4c6cf;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-node-placeholder {
+    width: 32px;
+    height: 32px;
+    position: relative;
+}
+
+.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node {
+    color: #666;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-node {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+}
+
+.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle, .next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot {
+    background: #fff;
+    border-color: #a0a2ad;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-node-circle {
+    display: block;
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid;
+    border-radius: 50%;
+    -webkit-transition: background-color .1s linear;
+    transition: background-color .1s linear;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body {
+    width: 100px;
+    left: -26px;
+    text-align: center;
+    position: absolute;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title {
+    font-size: 16px;
+    line-height: 20px;
+    margin-top: 8px;
+    font-weight: 700;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-title {
+    color: #666;
+    word-break: break-word;
+}
+
+.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content {
+    margin-top: 4px;
+}
+
+.next-step-circle>.next-step-item-wait .next-step-item-content {
+    color: #666;
+    font-size: 14px;
+    word-break: break-word;
+}
\ No newline at end of file
diff --git a/新版闲书网主页/.idea/前端/html/cart.html b/新版闲书网主页/.idea/前端/html/cart.html
index 6721f47..0ba1de5 100644
--- a/新版闲书网主页/.idea/前端/html/cart.html
+++ b/新版闲书网主页/.idea/前端/html/cart.html
@@ -429,5 +429,5 @@
     </div>
 </div>
 
-<script></script>
+<script>appendBooks</script>
 </html>
\ No newline at end of file
diff --git a/新版闲书网主页/.idea/前端/html/order.html b/新版闲书网主页/.idea/前端/html/order.html
new file mode 100644
index 0000000..52ff93e
--- /dev/null
+++ b/新版闲书网主页/.idea/前端/html/order.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>订单结算</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/main.css" rel="stylesheet">
+    <link href="../css/reset.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/order.css">
+    <script type="text/javascript" src="../js/order.js"></script>
+</head>
+<body>
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.min.js"></script>
+    <div class="top-nav">
+        <div class="container clear-float">
+            <div class="fl">
+                <a class="item" href="#">首页</a>
+            </div>
+            <div class="fr">
+                <a  class="item"  href="#">购物车</a>
+                <a  class="item"  href="#">我的订单</a>
+                <a  class="item" href="#">收藏夹</a>
+                <a  class="item" href="#">登录</a>
+                <a  class="item" href="#">注册</a>
+            </div>
+        </div>
+    </div>
+    <div id="header" class="header-order-app">
+        <div class="headerLayout">
+            <div class="headerCon">
+                <h1 id="mallLogo">
+                    <span class="mlogo">
+                        <a href="#">
+                            <img src="../img/logo.png" alt="" class="logoPic">
+                        </a>
+                    </span>
+                </h1>
+                <div class="header-extra">
+                    <div class="stepbar-box">
+                        <div class="tmall-stepbar" style="padding-top: 25px;width: 710px;">
+                            <ol id="next-step" prefix="next-" direction="hoz" class="next-step next-step-circle next-step-horizontal next-step-label-vertical" style="width: auto; overflow: visible; height: 64px;">
+                                <script>createNextStepList()</script>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/新版闲书网主页/.idea/前端/js/order.js b/新版闲书网主页/.idea/前端/js/order.js
new file mode 100644
index 0000000..d8bc53d
--- /dev/null
+++ b/新版闲书网主页/.idea/前端/js/order.js
@@ -0,0 +1,53 @@
+function createNextStepList() {
+    let parentNode = document.getElementById("next-step")
+    for (i in [0,1,2,3,4]) {
+        let node = document.createElement("li")
+        if (i==0) {
+            node.classList.add("next-step-item", "next-step-item-process", "next-step-item-first")
+        } else if (i==4) {
+            node.classList.add("next-step-item", "next-step-item-wait")
+        } else {
+            node.classList.add("next-step-item", "next-step-item-wait", "next-step-item-last")
+        }
+        node.style.width = "20%"
+        parentNode.appendChild(node)
+
+        let container = document.createElement("div")
+        container.classList.add("next-step-item-container")
+        node.appendChild(container)
+        let placeholder = document.createElement("div")
+        placeholder.classList.add("next-step-item-node-placeholder")
+        container.appendChild(placeholder)
+        let itemNode = document.createElement("div")
+        itemNode.classList.add("next-step-item-node")
+        placeholder.appendChild(itemNode)
+        let circle = document.createElement("div")
+        circle.classList.add("next-step-item-node-circle")
+
+        circle.innerText = (Number(i)+1).toString()
+        itemNode.appendChild(circle)
+
+        let itemBody = document.createElement("div")
+        itemBody.classList.add("next-step-item-body")
+        itemBody.setAttribute("tabindex", "0")
+        itemBody.setAttribute("aria-current", "step")
+        node.appendChild(itemBody)
+        let itemtitle = document.createElement("div")
+        itemtitle.classList.add("next-step-item-title")
+        itemBody.innerText = "查看购物车"
+        itemBody.appendChild(itemtitle)
+        let itemContent = document.createElement("div")
+        itemContent.classList.add("next-step-item-content")
+        itemBody.appendChild(itemContent)
+        
+        let itemTail = document.createElement("div")
+        itemTail.classList.add("next-step-item-tail")
+        node.appendChild(itemTail)
+        let tailUnderlay = document.createElement("div")
+        tailUnderlay.classList.add("next-step-item-tail-underlay")
+        itemTail.appendChild(tailUnderlay)
+        let tailOverlay = document.createElement("div")
+        tailOverlay.classList.add("next-step-item-tail-overlay")
+        tailUnderlay.appendChild(tailOverlay)
+    }
+}  
\ No newline at end of file