html

src/main/webapp/ShoppingCart.html

@@ -30,7 +30,7 @@
                     <h4>20</h4>
                     <div id="count">
                         <div>-</div>
-                        <input name="count" type="text">
+                        <input name="count" type="text" value="1">
                         <div>+</div>
                     </div>
                 </div>
@@ -57,7 +57,7 @@
                     <h4>20</h4>
                     <div id="count">
                         <div>-</div>
-                        <input name="count" type="text">
+                        <input name="count" type="text" value="1">
                         <div>+</div>
                     </div>
                 </div>
@@ -73,16 +73,17 @@
                     <h4>20</h4>
                     <div id="count">
                         <div>-</div>
-                        <input name="count" type="text">
+                        <input name="count" type="text" value="1">
                         <div>+</div>
                     </div>
                 </div>
             </div>
         </div>
-        <div id="BottomBar">
+        <div id="BottomBar" style="background-color: whitesmoke;">
             <input type="submit" name="submit" value="删除商品">
             <input type="submit" name="submit" value="结算">
-
+            <h2 id="summary">0</h2>
+            <p>合计:</p>
         </div>
     </form>
 
@@ -93,16 +94,16 @@
                 let text = $(this).next()[0];
                 let num = Number.parseInt(text.value);
                 // console.dir(num);
-                if (num.toString() == "NaN") num = 0;
-                else num = Math.max(0, --num);
+                if (num.toString() == "NaN") num = 1;
+                else num = Math.min(Math.max(1, --num), 99);
                 text.value = num;
             } else
             if (this.innerHTML == "+") {
                 let text = $(this).prev()[0];
                 let num = Number.parseInt(text.value);
                 // console.dir(num);
-                if (num.toString() == "NaN") num = 1;
-                else num = Math.max(0, ++num);
+                if (num.toString() == "NaN") num = 2;
+                else num = Math.min(Math.max(1, ++num), 99);
                 text.value = num;
             }
         });
@@ -130,22 +131,26 @@
         })
         $("form>div.Store>div.goods>div#exp>div#count>input").focusout(function() {
             let num = Number.parseInt(this.value);
-            if (num.toString() == "NaN") num = 0;
+            if (num.toString() == "NaN") num = 1;
+            num = Math.min(Math.max(1, num), 99);
             this.value = num;
         }).keyup(function() {
             let num = Number.parseInt(this.value);
-            if (num.toString() == "NaN") num = 0;
+            if (num.toString() == "NaN") num = 1;
+            num = Math.min(Math.max(1, num), 99);
             this.value = num;
         }).keydown(function() {
             let num = Number.parseInt(this.value);
-            if (num.toString() == "NaN") num = 0;
+            if (num.toString() == "NaN") num = 1;
+            num = Math.min(Math.max(1, num), 99);
             this.value = num;
         });
         $("form>div#BottomBar>input[type='submit']").click(function() {
             let counts = $("form>div#Store>div.goods>div#exp>div#count>input");
             for (let index = 0; index < counts.length; index++) {
                 let num = Number.parseInt(counts[index].value);
-                if (num.toString() == "NaN") num = 0;
+                if (num.toString() == "NaN") num = 1;
+                num = Math.min(Math.max(1, num), 99);
                 counts[index].value = num;
             }
         });

src/main/webapp/css/CartCss.css

@@ -1,194 +1,207 @@
     body {
-    /* background-color: transparent; */
-    position: relative;
-    margin: 0;
-    font-family: 'Harmony SC';
-    min-height: 100px;
-    background-color: whitesmoke;
-}
-
-form {
-    border-radius: 10px;
-    /* position: relative; */
-    width: 100%;
-    min-height: 100px;
-    /* min-width: 500px; */
-}
-
-form>div.Store {
-    position: relative;
-    margin-top: 10px;
-    margin-left: 15px;
-    margin-right: 15px;
-    border-radius: 10px;
-    background-color: white;
-    font-size: 16px;
-    overflow: hidden;
-}
-
-
-/* div#Cartlist>div.Store:last-child
+        /* background-color: transparent; */
+        position: relative;
+        margin: 0;
+        font-family: 'Harmony SC';
+        min-height: 100px;
+        background-color: whitesmoke;
+    }
+    
+    form {
+        border-radius: 10px;
+        /* position: relative; */
+        width: 100%;
+        min-height: 100px;
+        /* min-width: 500px; */
+    }
+    
+    form>div.Store {
+        position: relative;
+        margin-top: 10px;
+        margin-left: 15px;
+        margin-right: 15px;
+        border-radius: 10px;
+        background-color: white;
+        font-size: 16px;
+        overflow: hidden;
+    }
+    /* div#Cartlist>div.Store:last-child
 {
     margin-bottom: 0;
 } */
-
-form>div.Store>* {
-    border-bottom: 1px solid gainsboro;
-}
-
-form>div.Store>*:last-child {
-    border-bottom: 0;
-}
-
-form>div.Store>a#lable {
-    height: 48px;
-    line-height: 48px;
-    display: flex;
-    justify-items: center;
-    overflow: hidden;
-    background-color: transparent;
-}
-
-form>div.Store>a#lable>input {
-    height: 24px;
-    width: 24px;
-    margin: 12px;
-    margin-left: calc(1ch + 12px);
-}
-
-form>div.Store>a#lable>div#StoreIcon {
-    height: 40px;
-    width: 40px;
-    margin: 4px;
-    margin-left: calc(1ch + 4px);
-    text-align: center;
-}
-
-form>div.Store>a#lable>div#StoreIcon>img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-form>div.Store>a#lable>h3 {
-    margin: 0;
-}
-
-form>div.Store>div.goods {
-    height: 96px;
-    display: flex;
-    justify-items: center;
-    overflow: hidden;
-    background-color: transparent;
-}
-
-form>div.Store>div.goods>input {
-    height: 24px;
-    min-width: 24px;
-    margin: 36px;
-    margin-left: calc(1ch + 12px);
-    margin-right: calc(1ch + 12px);
-}
-
-form>div.Store>div.goods>div#GoodsIcon {
-    height: 88px;
-    min-width: 88px;
-    margin: 4px;
-    margin-left: calc(1ch + 4px);
-    text-align: center;
-}
-
-form>div.Store>div.goods>div#GoodsIcon>img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-form>div.Store>div.goods>div#exp {
-    position: relative;
-    margin: 8px;
-    height: 80px;
-    width: 100%;
-    min-width: 200px;
-}
-
-form>div.Store>div.goods>div#exp>* {
-    width: 100%;
-    margin: 0;
-}
-
-form>div.Store>div.goods>div#exp>p {
-    color: gray;
-}
-
-form>div.Store>div.goods>div#exp>h4 {
-    color: #E33333;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-
-form>div.Store>div.goods>div#exp>h4::after {
-    counter-reset: "$";
-    color: #E33333;
-}
-
-form>div.Store>div.goods>div#exp>div#count {
-    position: absolute;
-    width: 25%;
-    min-width: 16ch;
-    height: 24px;
-    border-radius: 10px;
-    border: 1px solid gray;
-    margin: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    overflow: hidden;
-}
-
-form>div.Store>div.goods>div#exp>div#count>* {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 1px solid gray;
-    text-align: center;
-    background-color: white;
-    user-select: none;
-}
-
-form>div.Store>div.goods>div#exp>div#count>*:hover {
-    background-color: gainsboro;
-}
-
-form>div.Store>div.goods>div#exp>div#count>*:active {
-    background-color: gray;
-}
-
-form>div#BottomBar {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    padding: 15px;
-}
-
-form>div#BottomBar input:nth-of-type(1) {
-    font-size: 15px;
-    padding: 10px;
-    color: #E33333;
-    background-color: rgb(236, 200, 200);
-    border: 2px solid #E33333;
-}
-
-form>div#BottomBar input:nth-of-type(2) {
-    font-size: 15px;
-    color: white;
-    padding: 10px 30px;
-    border: 2px solid rgb(82, 40, 236);
-    background-color: rgb(171, 151, 243);
+    
+    form>div.Store>* {
+        border-bottom: 1px solid gainsboro;
+    }
+    
+    form>div.Store>*:last-child {
+        border-bottom: 0;
+    }
+    
+    form>div.Store>a#lable {
+        height: 48px;
+        line-height: 48px;
+        display: flex;
+        justify-items: center;
+        overflow: hidden;
+        background-color: transparent;
+    }
+    
+    form>div.Store>a#lable>input {
+        height: 24px;
+        width: 24px;
+        margin: 12px;
+        margin-left: calc(1ch + 12px);
+    }
+    
+    form>div.Store>a#lable>div#StoreIcon {
+        height: 40px;
+        width: 40px;
+        margin: 4px;
+        margin-left: calc(1ch + 4px);
+        text-align: center;
+    }
+    
+    form>div.Store>a#lable>div#StoreIcon>img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    
+    form>div.Store>a#lable>h3 {
+        margin: 0;
+    }
+    
+    form>div.Store>div.goods {
+        height: 96px;
+        display: flex;
+        justify-items: center;
+        overflow: hidden;
+        background-color: transparent;
+    }
+    
+    form>div.Store>div.goods>input {
+        height: 24px;
+        min-width: 24px;
+        margin: 36px;
+        margin-left: calc(1ch + 12px);
+        margin-right: calc(1ch + 12px);
+    }
+    
+    form>div.Store>div.goods>div#GoodsIcon {
+        height: 88px;
+        min-width: 88px;
+        margin: 4px;
+        margin-left: calc(1ch + 4px);
+        text-align: center;
+    }
+    
+    form>div.Store>div.goods>div#GoodsIcon>img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    
+    form>div.Store>div.goods>div#exp {
+        position: relative;
+        margin: 8px;
+        height: 80px;
+        width: 100%;
+        min-width: 200px;
+    }
+    
+    form>div.Store>div.goods>div#exp>* {
+        width: 100%;
+        margin: 0;
+    }
+    
+    form>div.Store>div.goods>div#exp>p {
+        color: gray;
+    }
+    
+    form>div.Store>div.goods>div#exp>h4 {
+        color: #E33333;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+    
+    form>div.Store>div.goods>div#exp>h4::after {
+        counter-reset: "$";
+        color: #E33333;
+    }
+    
+    form>div.Store>div.goods>div#exp>div#count {
+        position: absolute;
+        width: 25%;
+        min-width: 16ch;
+        height: 24px;
+        border-radius: 10px;
+        border: 1px solid gray;
+        margin: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        overflow: hidden;
+    }
+    
+    form>div.Store>div.goods>div#exp>div#count>* {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: 1px solid gray;
+        text-align: center;
+        background-color: white;
+        user-select: none;
+    }
+    
+    form>div.Store>div.goods>div#exp>div#count>*:hover {
+        background-color: gainsboro;
+    }
+    
+    form>div.Store>div.goods>div#exp>div#count>*:active {
+        background-color: gray;
+    }
+    
+    form>div#BottomBar {
+        position: fixed;
+        bottom: 0;
+        width: calc(100% - 30px);
+        padding: 15px;
+    }
+    
+    form>div#BottomBar input:nth-of-type(1) {
+        font-size: 15px;
+        padding: 10px;
+        color: #E33333;
+        background-color: rgb(236, 200, 200);
+        border: 2px solid #E33333;
+    }
+    
+    form>div#BottomBar input:nth-of-type(2) {
+        font-size: 15px;
+        color: white;
+        padding: 10px 30px;
+        border: 2px solid rgb(82, 40, 236);
+        background-color: rgb(171, 151, 243);
+    }
     /* form>div#BottomBar input:nth-of-type(1) {
     float: right;
 } */
+    
+    form>div#BottomBar>h2#summary {
+        float: right;
+        margin: 0;
+        color: #E33333;
+        line-height: 30px;
+    }
+    
+    form>div#BottomBar>p {
+        float: right;
+        margin: 0;
+        line-height: 30px;
+    }
+    
     @font-face {
         font-family: 'Harmony SC';
         src: url(../fonts/HarmonyOS_Sans_SC_Medium.ttf);

src/main/webapp/index1.html

@@ -0,0 +1,754 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
+    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
+    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/backTop.css">
+    <script src="js/jquery.min.js"></script>
+    <script src="js/index.js"></script>
+</head>
+
+<body>
+    <div class="shortcut">
+        <div class="w">
+            <div class="fl">
+                <ul>
+                    <li>品优购欢迎您！</li>
+                    <li>
+                        <c:if test="${sessionScope.user == null}">
+                            <a href="login">请登录</a>&nbsp;<a href="register" class="style_red">免费注册</a>
+                        </c:if>
+                        <c:if test="${sessionScope.user != null}">
+                            <p>${sessionScope.user.email}</p>
+                        </c:if>
+                    </li>
+                </ul>
+            </div>
+            <div class="fr">
+                <ul>
+                    <li><a href="#">我的订单</a></li>
+                    <li class="spacer"></li>
+                    <li>
+                        <a href="#">我的品优购</a>
+                        <i class="icomoon"></i>
+                    </li>
+                    <li class="spacer"></li>
+                    <li><a href="#">品优购会员</a></li>
+                    <li class="spacer"></li>
+                    <li><a href="#">企业采购</a></li>
+                    <li class="spacer"></li>
+                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
+                    <li class="spacer"></li>
+                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
+                    <li class="spacer"></li>
+                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="header w">
+        <div class="logo">
+            <h1>
+                <a href="index.html" title="品优购">品优购</a>
+            </h1>
+        </div>
+        <div class="search">
+            <input type="text" class="text" value="请搜索内容...">
+            <button class="btn">搜索</button>
+        </div>
+        <div class="hotwrods">
+            <a href="#" class="style-red">优惠购首发</a>
+            <a href="#">亿元优惠</a>
+            <a href="#">9.9元团购</a>
+            <a href="#">美满99减30</a>
+            <a href="#">办公用品</a>
+            <a href="#">电脑</a>
+            <a href="#">通信</a>
+        </div>
+        <div class="shopcar">
+            <i class="car"> </i> <i class="arrow">  </i>
+            <a href="../../gwc/gwc.html" title="我的购物车">我的购物车</a>
+            <i class="count">80</i>
+        </div>
+    </div>
+
+    <div class="nav">
+        <div class="w">
+            <div class="dropdown fl">
+                <div class="dt"> 品优购 </div>
+                <div class="dd">
+                    <ul>
+                        <li class="menu_item"><a href="a">所有商品</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="ten/list.html">十大人气商品排行</a><i>  </i></li>
+                        <li class="menu_item"><a href="ten/list.html">十大销售商品排行</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">运动户外、钟表</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">汽车、汽车用品</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">母婴、玩具乐器</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">医药保健</a> <i>  </i> </li>
+                        <li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li>
+                        <li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li>
+                        <li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i>  </i> </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="navitems fl">
+                <ul>
+                    <li><a href="#">服装城</a></li>
+                    <li><a href="#">美妆馆</a></li>
+                    <li><a href="#">传智超市</a></li>
+                    <li><a href="#">全球购</a></li>
+                    <li><a href="#">闪购</a></li>
+                    <li><a href="#">团购</a></li>
+                    <li><a href="#">拍卖</a></li>
+                    <li><a href="#">有趣</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="w">
+        <div class="main">
+            <div class="focus fl">
+                <a href="javascript:;" class="arrow-l">
+                    &lt;
+                 </a>
+                <a href="javascript:;" class="arrow-r">  </a>
+                <ul>
+                    <li>
+                        <a href="#"><img src="upload/focus.jpg" alt=""></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="upload/focus1.jpg" alt=""></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
+                    </li>
+                    <li>
+                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
+                    </li>
+                </ul>
+                <ol class="circle">
+
+                </ol>
+            </div>
+            <div class="newsflash fr">
+                <div class="news">
+                    <div class="news-hd">
+                        品优购快报
+                        <a href="https://news.hao123.com/wangzhi">更多</a>
+                    </div>
+                    <div class="news-bd">
+                        <ul>
+                            <li><a href="#"><strong>[公告]</strong> 已上线苹果20，快来抢购。</a></li>
+                            <li><a href="#"><strong>[公告]</strong> 中国即将进口各国的蔬菜水果。</a></li>
+                            <li><a href="#"><strong>[公告]</strong> 互联网将在明年有大变动。</a></li>
+                            <li><a href="#"><strong>[公告]</strong> 北京大兴国际机场今日试飞。</a></li>
+                            <li><a href="#"><strong>[公告]</strong> 白宫以"不合作战略"应对国会调查。</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="lifeservice">
+                    <ul>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_huafei"></i>
+                                <p>话费</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                            <span class="hot"></span>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="service_ico service_ico_feiji"></i>
+                                <p>机票</p>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bargain">
+                    <img src="upload/bargain.jpg" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="recommend w">
+        <div class="recom-hd fl">
+            <img src="img/clock.png" alt="">
+            <h3>今日推荐</h3>
+        </div>
+        <div class="recom-bd fl">
+            <ul>
+                <li>
+                    <a href="#">
+                        <img src="upload/pic.jpg" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <img src="upload/pic.jpg" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <img src="upload/pic.jpg" alt="">
+                    </a>
+                </li>
+                <li class="last">
+                    <a href="#">
+                        <img src="upload/pic.jpg" alt="">
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+
+    <div class="floor">
+        <div class="jiadian w">
+            <div class="box-hd">
+                <h3>家用电器</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#" class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气/净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">4K电视</a>
+                            </li>
+                            <li>
+                                <a href="#">空气净化器</a>
+                            </li>
+                            <li>
+                                <a href="#">IH电饭煲</a>
+                            </li>
+                            <li>
+                                <a href="#">滚筒洗衣机</a>
+                            </li>
+                            <li>
+                                <a href="#">电热水器</a>
+                            </li>
+                        </ul>
+                        <img src="upload/floor-1-1.png" alt="">
+                    </li>
+                    <li class="w329">
+                        <img src="upload/pic1.jpg" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-2.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-3.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-4.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-5.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-6.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="shouji w">
+            <div class="box-hd">
+                <h3>手机通讯</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#" class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气/净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">4K电视</a>
+                            </li>
+                            <li>
+                                <a href="#">空气净化器</a>
+                            </li>
+                            <li>
+                                <a href="#">IH电饭煲</a>
+                            </li>
+                            <li>
+                                <a href="#">滚筒洗衣机</a>
+                            </li>
+                            <li>
+                                <a href="#">电热水器</a>
+                            </li>
+                        </ul>
+                        <img src="upload/floor-1-1.png" alt="">
+                    </li>
+                    <li class="w329">
+                        <img src="upload/pic1.jpg" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-2.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-3.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-4.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-5.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-6.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="diannao w">
+            <div class="box-hd">
+                <h3>电脑办公</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#" class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气/净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">4K电视</a>
+                            </li>
+                            <li>
+                                <a href="#">空气净化器</a>
+                            </li>
+                            <li>
+                                <a href="#">IH电饭煲</a>
+                            </li>
+                            <li>
+                                <a href="#">滚筒洗衣机</a>
+                            </li>
+                            <li>
+                                <a href="#">电热水器</a>
+                            </li>
+                        </ul>
+                        <img src="upload/floor-1-1.png" alt="">
+                    </li>
+                    <li class="w329">
+                        <img src="upload/pic1.jpg" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-2.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-3.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-4.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-5.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-6.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="jiaju w">
+            <div class="box-hd">
+                <h3>精品家具</h3>
+                <div class="tab-list">
+                    <ul>
+                        <li><a href="#" class="style-red">热门</a>|</li>
+                        <li><a href="#">大家电</a>|</li>
+                        <li><a href="#">生活电器</a>|</li>
+                        <li><a href="#">厨房电器</a>|</li>
+                        <li><a href="#">个护健康</a>|</li>
+                        <li><a href="#">应季电器</a>|</li>
+                        <li><a href="#">空气/净水</a>|</li>
+                        <li><a href="#">新奇特</a>|</li>
+                        <li><a href="#">高端电器</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box-bd">
+                <ul class="tab-con">
+                    <li class="w209">
+                        <ul class="tab-con-list">
+                            <li>
+                                <a href="#">节能补贴</a>
+                            </li>
+                            <li>
+                                <a href="#">4K电视</a>
+                            </li>
+                            <li>
+                                <a href="#">空气净化器</a>
+                            </li>
+                            <li>
+                                <a href="#">IH电饭煲</a>
+                            </li>
+                            <li>
+                                <a href="#">滚筒洗衣机</a>
+                            </li>
+                            <li>
+                                <a href="#">电热水器</a>
+                            </li>
+                        </ul>
+                        <img src="upload/floor-1-1.png" alt="">
+                    </li>
+                    <li class="w329">
+                        <img src="upload/pic1.jpg" alt="">
+                    </li>
+                    <li class="w219">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-2.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-3.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-4.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                    <li class="w220">
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-5.png" alt="">
+                            </a>
+                        </div>
+                        <div class="tab-con-item">
+                            <a href="#">
+                                <img src="upload/floor-1-6.png" alt="">
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="fixedtool">
+        <ul>
+            <li class="current">家用电器</li>
+            <li>手机通讯</li>
+            <li>电脑办公</li>
+            <li>精品家具</li>
+
+        </ul>
+    </div>
+    <div class="footer">
+        <div class="w">
+            <div class="mod_service">
+                <ul>
+                    <li>
+                        <i class="mod-service-icon mod_service_zheng"></i>
+                        <div class="mod_service_tit">
+                            <h5>正品保障</h5>
+                            <p>正品保障，提供发票</p>
+                        </div>
+                    </li>
+                    <li>
+                        <i class="mod-service-icon mod_service_kuai"></i>
+                        <div class="mod_service_tit">
+                            <h5>正品保障</h5>
+                            <p>正品保障，提供发票</p>
+                        </div>
+                    </li>
+                    <li>
+                        <i class="mod-service-icon mod_service_bao"></i>
+                        <div class="mod_service_tit">
+                            <h5>正品保障</h5>
+                            <p>正品保障，提供发票</p>
+                        </div>
+                    </li>
+                    <li>
+                        <i class="mod-service-icon mod_service_bao"></i>
+                        <div class="mod_service_tit">
+                            <h5>正品保障</h5>
+                            <p>正品保障，提供发票</p>
+                        </div>
+                    </li>
+                    <li>
+                        <i class="mod-service-icon mod_service_bao"></i>
+                        <div class="mod_service_tit">
+                            <h5>正品保障</h5>
+                            <p>正品保障，提供发票</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="mod_help">
+                <dl class="mod_help_item">
+                    <dt>购物指南</dt>
+                    <dd> <a href="#">购物流程 </a></dd>
+                    <dd> <a href="#">会员介绍 </a></dd>
+                    <dd> <a href="#">生活旅行/团购 </a></dd>
+                    <dd> <a href="#">常见问题 </a></dd>
+                    <dd> <a href="#">大家电 </a></dd>
+                    <dd> <a href="#">联系客服 </a></dd>
+                </dl>
+                <dl class="mod_help_item">
+                    <dt>购物指南</dt>
+                    <dd> <a href="#">购物流程 </a></dd>
+                    <dd> <a href="#">会员介绍 </a></dd>
+                    <dd> <a href="#">生活旅行/团购 </a></dd>
+                    <dd> <a href="#">常见问题 </a></dd>
+                    <dd> <a href="#">大家电 </a></dd>
+                    <dd> <a href="#">联系客服 </a></dd>
+                </dl>
+                <dl class="mod_help_item">
+                    <dt>购物指南</dt>
+                    <dd> <a href="#">购物流程 </a></dd>
+                    <dd> <a href="#">会员介绍 </a></dd>
+                    <dd> <a href="#">生活旅行/团购 </a></dd>
+                    <dd> <a href="#">常见问题 </a></dd>
+                    <dd> <a href="#">大家电 </a></dd>
+                    <dd> <a href="#">联系客服 </a></dd>
+                </dl>
+                <dl class="mod_help_item">
+                    <dt>购物指南</dt>
+                    <dd> <a href="#">购物流程 </a></dd>
+                    <dd> <a href="#">会员介绍 </a></dd>
+                    <dd> <a href="#">生活旅行/团购 </a></dd>
+                    <dd> <a href="#">常见问题 </a></dd>
+                    <dd> <a href="#">大家电 </a></dd>
+                    <dd> <a href="#">联系客服 </a></dd>
+                </dl>
+                <dl class="mod_help_item">
+                    <dt>购物指南</dt>
+                    <dd> <a href="#">购物流程 </a></dd>
+                    <dd> <a href="#">会员介绍 </a></dd>
+                    <dd> <a href="#">生活旅行/团购 </a></dd>
+                    <dd> <a href="#">常见问题 </a></dd>
+                    <dd> <a href="#">大家电 </a></dd>
+                    <dd> <a href="#">联系客服 </a></dd>
+                </dl>
+                <dl class="mod_help_item mod_help_app">
+                    <dt>帮助中心</dt>
+                    <dd>
+                        <img src="upload/erweima.png" alt="">
+                        <p>品优购客户端</p>
+                    </dd>
+                </dl>
+            </div>
+
+            <div class="mod_copyright">
+                <p class="mod_copyright_links">
+                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
+                </p>
+                <p class="mod_copyright_info">
+                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <button onclick="topFunction()" id="myBtn" style="bottom: -5em;">返回顶部</button>
+
+
+
+
+
+    <script>
+        var scrollBack = 0;
+
+        window.onscroll = function() {
+            document.body.scrollTop += scrollBack;
+            document.documentElement.scrollTop += scrollBack;
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                document.getElementById("myBtn").style.bottom = null;
+            } else {
+                document.getElementById("myBtn").style.bottom = "-5em";;
+            }
+        }
+
+        window.onwheel = function() {
+            scrollBack = 0;
+        }
+        window.ontouchstart = window.onwheel;
+
+        function topFunction() {
+            scrollBack = -(document.body.scrollTop || document.documentElement.scrollTop) / (40);
+            document.body.scrollTop += scrollBack;
+            document.documentElement.scrollTop += scrollBack;
+        }
+    </script>
+
+
+</body>
+
+</html>

src/main/webapp/ten/detail_1.html

@@ -13,16 +13,7 @@
     <script src="js/detail.js"></script>
 
 </head>
-<style>
-    .yourGoods {
-        position: absolute;
-        right: 0;
-        border: 1px solid red;
-        width: 200px;
-        height: 500px;
-        z-index: 999;
-    }
-</style>
+
 
 <body>
     <div class="shortcut">
@@ -88,7 +79,7 @@
         </div>
 
 
-        <div class="yourGoods"></div>
+        <div class="yourGoods"> </div>
 
     </div>
 

target/classes/myBatisMap/NodeinfoMapper.xml

@@ -1,141 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
-<mapper namespace="group04.myBatis.NodeinfoMapper" >
-  <resultMap id="BaseResultMap" type="group04.myBatis.Nodeinfo" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    <id column="id" property="id" jdbcType="BIGINT" />
-    <result column="prev_id" property="prevId" jdbcType="BIGINT" />
-    <result column="next_id" property="nextId" jdbcType="BIGINT" />
-    <result column="parent_id" property="parentId" jdbcType="BIGINT" />
-    <result column="child_id" property="childId" jdbcType="BIGINT" />
-    <result column="obj_type" property="objType" jdbcType="VARCHAR" />
-  </resultMap>
-  <sql id="Base_Column_List" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    id, prev_id, next_id, parent_id, child_id, obj_type
-  </sql>
-  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    select 
-    <include refid="Base_Column_List" />
-    from nodeinfo
-    where id = #{id,jdbcType=BIGINT}
-  </select>
-  <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    delete from nodeinfo
-    where id = #{id,jdbcType=BIGINT}
-  </delete>
-  <insert id="insert" parameterType="group04.myBatis.Nodeinfo" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    insert into nodeinfo (id, prev_id, next_id, 
-      parent_id, child_id, obj_type
-      )
-    values (#{id,jdbcType=BIGINT}, #{prevId,jdbcType=BIGINT}, #{nextId,jdbcType=BIGINT}, 
-      #{parentId,jdbcType=BIGINT}, #{childId,jdbcType=BIGINT}, #{objType,jdbcType=VARCHAR}
-      )
-  </insert>
-  <insert id="insertSelective" parameterType="group04.myBatis.Nodeinfo" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    insert into nodeinfo
-    <trim prefix="(" suffix=")" suffixOverrides="," >
-      <if test="id != null" >
-        id,
-      </if>
-      <if test="prevId != null" >
-        prev_id,
-      </if>
-      <if test="nextId != null" >
-        next_id,
-      </if>
-      <if test="parentId != null" >
-        parent_id,
-      </if>
-      <if test="childId != null" >
-        child_id,
-      </if>
-      <if test="objType != null" >
-        obj_type,
-      </if>
-    </trim>
-    <trim prefix="values (" suffix=")" suffixOverrides="," >
-      <if test="id != null" >
-        #{id,jdbcType=BIGINT},
-      </if>
-      <if test="prevId != null" >
-        #{prevId,jdbcType=BIGINT},
-      </if>
-      <if test="nextId != null" >
-        #{nextId,jdbcType=BIGINT},
-      </if>
-      <if test="parentId != null" >
-        #{parentId,jdbcType=BIGINT},
-      </if>
-      <if test="childId != null" >
-        #{childId,jdbcType=BIGINT},
-      </if>
-      <if test="objType != null" >
-        #{objType,jdbcType=VARCHAR},
-      </if>
-    </trim>
-  </insert>
-  <update id="updateByPrimaryKeySelective" parameterType="group04.myBatis.Nodeinfo" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    update nodeinfo
-    <set >
-      <if test="prevId != null" >
-        prev_id = #{prevId,jdbcType=BIGINT},
-      </if>
-      <if test="nextId != null" >
-        next_id = #{nextId,jdbcType=BIGINT},
-      </if>
-      <if test="parentId != null" >
-        parent_id = #{parentId,jdbcType=BIGINT},
-      </if>
-      <if test="childId != null" >
-        child_id = #{childId,jdbcType=BIGINT},
-      </if>
-      <if test="objType != null" >
-        obj_type = #{objType,jdbcType=VARCHAR},
-      </if>
-    </set>
-    where id = #{id,jdbcType=BIGINT}
-  </update>
-  <update id="updateByPrimaryKey" parameterType="group04.myBatis.Nodeinfo" >
-    <!--
-      WARNING - @mbggenerated
-      This element is automatically generated by MyBatis Generator, do not modify.
-    -->
-    update nodeinfo
-    set prev_id = #{prevId,jdbcType=BIGINT},
-      next_id = #{nextId,jdbcType=BIGINT},
-      parent_id = #{parentId,jdbcType=BIGINT},
-      child_id = #{childId,jdbcType=BIGINT},
-      obj_type = #{objType,jdbcType=VARCHAR}
-    where id = #{id,jdbcType=BIGINT}
-  </update>
-  <update id="commit">
-    commit
-  </update>
-</mapper>