网易严选网页源代码
gitee開源地址：https://gitee.com/lu147721/netease-strict-selection
?
效果 圖地址（已經放在服務器上）：網易嚴選
?
?index.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="font/demo.css"><link rel="stylesheet" href="font/iconfont.css"><link rel="stylesheet" href="font/iconfont.js"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/footer.css"><link rel="shortcut icon " type="images/x-icon" href="./images/favicon.ico"><script src="./js/index.js"></script><title>網易嚴選</title> </head><body><!-- nav導航欄 --><div class="navigation"><ul class="navigation_list"><li>登錄/注冊</li><li>我的訂單</li><li>會員</li><li>甄選家</li><li>企業采購<div class="prise"></div></li><li>客戶服務<div class="serve"></div></li><li><i class="iconfont"></i>APP</li></ul></div><!-- header頭部 --><header><div class="logo"><img src="./images/yanxuan.png" alt=""></div><div class="search"><div class="search_frame"><i class="iconfont"></i><input type="text" placeholder="杭州游禮" name="search_name"><button>搜索</button></div><ul class="search_tips"><li>牛奶</li><li>襪子</li><li>貓糧</li><li>元系列飛機杯</li><li>毛巾</li><li>濕巾</li><li>內褲</li><li>洗衣液</li></ul></div><div class="shopping_cart"><i class="iconfont"></i>購物車<i class="shopping_num">0</i></div><ul class="shopping_list"><li>首頁</li><li>居家生活<!-- <div class="living"></div> --></li><li>寵物生活</li><li>服飾鞋包</li><li>美食酒水</li><li>個護清潔</li><li>母嬰親子</li><li>運動旅行</li><li>數碼家電</li><li>嚴選全球</li><li>為你嚴選</li><li>眾籌</li></ul></header><!-- 宣傳圖片 --><div class="propaganda_image"><img src="./images/proda.webp" alt=""></div><!-- 左側邊欄 --><div id="hot_sale" class="hot_sale"><ul><li>--熱<span>銷</span>榜--</li><li><a href="#"><i class="iconfont"></i><span>全站<br>熱銷榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>居家<br>生活榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>服飾<br>鞋包榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>美食<br>酒水榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>數碼<br>家電榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>個護<br>清潔榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>運動<br>旅行榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>母嬰<br>親子榜</span></a></li><li><a href="#"><i class="iconfont"></i><span>全球<br>特色榜</span></a></li></ul></div><!-- 中間新品商品區域 --><div id="starting" class="starting"><div class="starting_tittle"><h3><a href="#">新品首發</a></h3><p>為你尋覓世間好物</p><a href="#">更多新品 ></a></div><div class="starting_details"><div class="left_btn"><</div> <div class="new_style"><img src="./images/blue_t.webp"><div><p class="qingli">【應季清倉】男式全棉200G<br>重磅基礎短袖T恤</p><p class="p_new">￥49</p><p class="p_odd">￥199</p></div></div><div class="new_style"><img src="./images/bai_t.webp" alt=""><div><p class="qingli">兒童天絲牛仔褲防蚊褲<br>順滑涼感防蚊</p><p class="p_new">￥49</p><p class="p_odd">￥199</p></div></div><div class="new_style"><img src="./images/qing_q.webp" alt=""><div><p class="qingli">女士純棉貼合抑菌內褲<br>4條裝</p><p class="p_new">￥69</p><p class="p_odd">￥89</p></div></div><div class="new_style"><img src="./images/qing_k.webp" alt=""><div><p class="qingli">君樂寶簡醇無無蔗糖酸奶<br>0蔗糖*2桶裝</p><p class="p_new">￥29.9</p><p class="p_odd">￥43.9</p></div></div><div class="right_btn">></div></div></div><!-- 右側邊欄區域 --><div id="setting" class="setting"><ul><li><img src="./images/ma.png" alt=""><p>掃碼領取</p><p>APP大額</p><p>新人紅包</p></li><li><i class="iconfont"></i><span>訂閱電子刊</span></li><li><i class="iconfont"></i><span>在線客服</span></li><li id="BackTop" class="backtop"><i>↑</i><span>返回頂部</span></li></ul></div><!-- 人氣推薦 --><div id="recommend" class="recommend"><div class="recommend_tittle"><h3><a href="#">人氣推薦</a></h3><p>編輯推薦</p><p>熱銷總榜</p><a href="#">更多新品 ></a></div><div class="recommend_products"><div class="products_left"><img src="./images/muyu.webp" alt=""><p>能除臭的空氣浴室香氛 13種<br>香型選擇</p><span class="recommend_new">￥14.9</span><span class="recommend_odd">￥19.9</span></div><div class="products_right"><div><img src="./images/chang.webp" alt=""><div><p>脆皮肉腸（原味）<br>250克/袋</p><span class="products_new">￥19</span><span class="products_odd">￥26</span></div></div><div><img src="./images/laji.webp" alt=""><div><p>一抽即提，免臟手，加厚垃圾袋<br>3卷60只</p><span class="products_new">￥11.9</span><span class="products_odd">￥14.9</span></div></div><div><img src="./images/binggan.webp" alt=""><div><p>【2盒】咖啡餅干<br>340克</p><span class="products_new">￥38</span><span class="products_odd">￥56</span></div></div><div><img src="./images/xinjiang.webp" alt=""><div><p>男女式純棉基礎T恤<br>新疆長絨棉</p><span class="products_new">￥69</span><span class="products_odd">￥99</span></div></div><div><img src="./images/tuoxie.webp" alt=""><div><p>玩趣彩虹四季拖鞋<br>抗菌防滑</p><span class="products_new">￥19.9</span><span class="products_odd">￥24.9</span></div></div><div><img src="./images/xianggao.webp" alt=""><div><p>車載居家推薦氣體香膏<br>固體除醛</p><span class="products_new">￥14.9</span><span class="products_odd">￥19.9</span></div></div></div></div></div><!-- 居家生活 --><div class="home"><!-- 標題 --><div class="home_tittle"><h3>居家生活</h3><ul><li>辦公椅</li><li>四季款</li><li>秋冬款</li><li>床墊床褥</li><li>經典人氣系列</li><li>被子</li><li>休閑椅</li><li><a href="#">查看更多 ></a></li></ul></div><!-- 售賣品 --><div class="home_products"><div class="home_head"><img src="./images/chuang.webp" alt=""></div><div><img src="./images/muzhuo.webp" alt=""><p>珠光色鑄鐵瑯過22cm<br>原創調色</p><span>￥188</span><span>￥288</span></div><div><img src="./images/huangguo.webp" alt=""><p>雙底面淘米洗菜水盆<br>不銹鋼</p><span>￥65</span><span>￥79</span></div><div><img src="./images/yinguo.webp" alt=""><p>實木餐桌椅<br>原素·北歐原木</p><span>￥899</span><span>￥999</span></div><div><img src="./images/huoguo.webp" alt=""><p>新升級 奶茶色精鑄鴛鴦火鍋30cm<br>一體壓鑄</p><span>￥159</span><span>￥199</span></div></div></div><!-- 大都在說 --><div class="everyone"><div class="everyone_said"><div class="ever_tittle"><h3>大家都在說</h3><small>生活，沒有統一標準</small></div><div class="ever_information"><div class="ever_left"><</div> <div><img src="./images/zuzi.webp" alt=""><div><span>張****</span><span>2022-07-23 08:24</span><h5>奢華長絨散粉粉撲</h5><p>包裝不錯，性價比也是挺高，非常滿意的一次購物，希望賣家多多左活動呀，全5分好評啦~</p></div></div><div><img src="./images/xun.webp" alt=""><div><span>陳****</span><span>2022-07-22 09:12</span><h5>粉柚桃桃限定無火香氛</h5><p>很好聞的味道</p></div></div><div><img src="./images/maiji.webp" alt=""><div><span>番****</span><span>2022-07-21 22:14</span><h5>清透柔霧粉底液</h5><p>不輸大牌，性價比超好，遮瑕可以，也自然</p></div></div><div class="ever_right">></div></div></div></div><!-- 客戶服務 --><div class="customer"><div class="cus_service"><p>客戶服務</p><div class="cus_seri on"><div class="online"><i class="iconfont"></i><p>在線客服</p></div><div class="online"><i class="iconfont"></i><p>用戶反饋</p></div></div></div><div class="cus_service"><p>何為網易嚴選</p><div class="cus_seri ex"><div class="explain">網易嚴選是深受新中產喜愛的生活方式品牌, 為消費者提供一站式、全品類、全方位的美好生活解決方案。我們通過簡約、實用、舒適的美學設計, 不斷帶來高品質靈感好物,陪伴3000萬新中產用戶「活出自己喜歡的樣子」, 共同倡導多元化的生活價值主張——每個人都可以把生活的選擇權交還給自己。</div><div class="follow"><span>關注我們：</span><i class="iconfont"></i><i class="iconfont"></i><i class="iconfont"></i></div></div></div><div class="cus_service"><p>掃碼下載嚴選APP</p><div class="cus_ma"><img src="./images/load.png" alt=""><p>下載領新人大禮包</p></div></div></div><!-- footer --><footer><ul class="sign"><li><i class="iconfont"></i><span>網易自營電商</span></li><li><i class="iconfont"></i><span>30天無憂退換貨</span></li><li><i class="iconfont"></i><span>滿99元免郵費</span></li><li><i class="iconfont"></i><span>品質保障</span></li></ul><ul class="copyright"><li><a href="#">關于我們</a><a href="#">幫助中心</a><a href="#">售后服務</a><a href="#">配送與驗收</a><a href="#">商務合作</a><a href="#">企業采購</a><a href="#">開放平臺</a><a href="#">搜索推薦</a><a href="#">友情鏈接</a><a href="#">廉政舉報</a></li><li><a href="#">食品經營許可證：JY13301080111719</a><a href="#">出版物經營許可證：新出發濱字第0132號</a><a href="#">妙得ICP證號：ICP 證浙B2-20160106</a><a href="#">浙杭食藥監械經營備20171029號</a><a href="#">營業執照</a><a href="#">網易公司版權所有 ? 1997-2022</a></li><li><a href="#">無線電發射設備銷售備案：42202011096855</a><a href="#">互聯網藥品信息服務資格證：（浙）-經營性-2022-0075</a><a href="#">醫療器械網絡交易第三方平臺備案：（浙）網械平臺備字[2020]第00029號</a></li><li><a href="#">（浙杭）網械企備字[2019]第00119號</a><a href="#">（粵）網械平臺備字（2019）第00004號</a><a href="#">（粵）-非經營性-2016-0023</a><a href="#">進口冷鏈食品管理承諾書</a></li><li><a href="#">食品經營許可證：JY14207050007694</a><a href="#">浙江省網絡食品銷售第三方平臺提供者備案：浙網食A33010009</a><a href="#">單用途商業預付卡備案證：330100AAC0024</a></li><li><a href="#">出版物網絡交易平臺服務經營備案：新出發浙備字第2021006號</a></li></ul></footer><!-- 完結！！！！ --> </body></html>index.css
* {padding: 0px;margin: 0; } a {text-decoration: none;color: black; } ol, ul {list-style: none; } input {outline: none; } @font-face {font-family: "iconfont"; /* Project id 3544879 */src: url("iconfont.woff2?t=1658729764816") format("woff2"),url("iconfont.woff?t=1658729764816") format("woff"),url("iconfont.ttf?t=1658729764816") format("truetype"); } body {background-color: #ffffff; } .navigation {width: 100%;height: 35px;background-color: #333333; } .navigation .navigation_list {width: 1300px;height: 100%;margin: auto;/* background-color: antiquewhite; */ } .navigation .navigation_list li {float: left;height: 20px;margin-top: 8px;color: #cccccc;line-height: 20px;padding: 0 15px;border-left: 1px solid #999999; } .navigation .navigation_list li:nth-child(1) {margin-left: 675px; } /* .navigation .navigation_list li:nth-child(5) {position: relative; } .navigation .navigation_list li:nth-child(5) .prise {position: absolute;width: 95px;height: 105px;background-color: white;margin-top: 7px;margin-left: -15px;box-shadow: 0px 1px 2px 1px ;z-index: 10; } .navigation .navigation_list li:nth-child(6) {position: relative; } .navigation .navigation_list li:nth-child(6) .serve {position: absolute;width: 95px;height: 105px;background-color: white; margin-top: 7px;margin-left: -15px;box-shadow: 0px 1px 2px 1px ;z-index: 10; } */ .navigation .navigation_list li:hover {color: white; } header {/* overflow: auto; */width: 1300px;height: 165px;/* background-color: beige; */margin: auto;padding: 1px; } header .logo {float: left;width: 300px;height: 100px;margin-left: 30px;margin-top: -32px;/* background-color: aquamarine; */ } header .logo img {width: 100%;height: 100%; } header .search {float: left;width: 590px;height: 70px;margin-top: 27px;margin-left: 108px;/* background-color: cornflowerblue; */ } header .search .search_frame {overflow: hidden;width: 100%;height: 40px;/* background-color: azure; */border-radius: 20px;border: 1px solid #cc9756; } header .search .search_frame i {margin-left: 20px;/* background-color: #ffffff; */ } header .search .search_frame input {width: 469px;height: 100%;border: 0;font-size: 16px; } header .search .search_frame button {float: right;border: 0;width: 80px;height: 100%;color: white;font-size: 17px;background-color: #cc9756; } header .search .search_frame button:hover {background-color: #e2c199; } header .search .search_tips {width: 100%;height: 30px;/* background-color: cadetblue; */ } header .search .search_tips li {float: left;height: 18px;font-size: 14px;color: #999999;padding: 0 10px;margin-top: 5px;/* border: 1px solid black; */ } header .search .search_tips li:nth-child(n + 2) {border-left: 1px solid #999999; } header .search .search_tips li:hover {color: #cc9756; } header .shopping_cart {float: left;overflow: hidden;width: 155px;height: 40px;margin-top: 27px;margin-left: 60px;border: 1px solid #cc9756;border-radius: 20px;line-height: 40px;text-align: center;color: #cc9756;font-size: 18px; } header .shopping_cart:hover {background-color: #f5f3ef; } header .shopping_cart i {display: inline-block;width: 28px;font-size: 22px; } header .shopping_cart .shopping_num {display: inline-block;width: 20px;height: 20px;border-radius: 10px;background-color: red;font-size: 16px;color: white;line-height: 20px; } header .shopping_list {width: 100%;height: 40px;/* clear: both; */margin-top: 125px; } header .shopping_list li {float: left;position: relative;height: 38px;margin-left: 31px;font-size: 20px; } header .shopping_list li .living {position: absolute;top: 20px;width: 40px;height: 100px;background-color: black;z-index: 999; } header .shopping_list li:hover {color: #cc9756;border-bottom: 2px solid #cc9756; } .propaganda_image {overflow: hidden;width: 1519px;height: 420px;background: url("../images/proda.webp") no-repeat;z-index: -1;margin: auto; }.new_products {display: flex;flex-direction: row;justify-content: space-between;width: 1400px;height: 500px;margin: auto;margin-top: 30px; } /* 左側邊欄 */ .hot_sale {position: absolute;left: 55px;top: 655px;width: 100px;height: 471px;/* background-color: #e2c199; */ } .hot_sale ul {width: 98px;border: 1px solid #e4e1d9;border-radius: 5px;text-align: center;background-color: #fff; } .hot_sale ul li {border-top: 1px solid #e6e2db;height: 46px;width: 84px;margin: auto; } .hot_sale ul li:nth-child(1) {width: 98px;line-height: 46px;color: #d4282d;background-color: #fffdf6;font-size: 18px;border-top: 0px; } .hot_sale ul li:nth-child(2) {width: 98px; } .hot_sale ul li:hover span {color: #d4282d; } /* 字體圖標樣式 */ .hot_sale ul i {display: inline-block;font-size: 26px;color: #d4282d; } .hot_sale ul span {display: inline-block;text-align: left; } /* 新品區域 */ .starting {width: 1200px;height: 500px;margin: auto;margin-top: 30px; } .starting .starting_tittle {width: 1090px;height: 48px;margin: auto; } .starting .starting_tittle h3 {font-size: 28px;font-weight: 700;line-height: 1;float: left;margin-right: 20px; } .starting .starting_tittle p {font-family: "Microsoft Yahei", "微軟雅黑", verdana;color: #333;padding-top: 13px;display: inline-block;line-height: 1; } .starting .starting_tittle a {float: right; } .starting .starting_tittle a:hover {color: #b4a078; } .starting .starting_details {position: relative;display: flex;flex-direction: row;justify-content: space-between;width: 1090px;height: 364.8px;margin: auto;margin-top: 5px; } .starting .starting_details .left_btn {position: absolute;left: -52px;top: 40%;width: 50px;height: 50px;border-radius: 25px;background-color: #e2c199;text-align: center;line-height: 50px;font-size: 40px;color: #f3f5dc; } .starting .starting_details .right_btn {position: absolute;left: 1092px;top: 40%;width: 50px;height: 50px;border-radius: 25px;background-color: #e2c199;text-align: center;line-height: 50px;font-size: 40px;color: #f3f5dc; } .starting .starting_details .left_btn:hover {background-color: #cc9756; } .starting .starting_details .right_btn:hover {background-color: #cc9756; } .starting .starting_details div {width: 265px;height: 100%;background-color: #f4f4f4; } .starting .starting_details .new_style:hover div {background-color: #f4f0ea; } .starting .starting_details div div {overflow: hidden;margin-top: 4.8px;width: 100%;height: 95px;background-color: #fff; } .starting .starting_details div div p {font-family: "Microsoft Yahei", "微軟雅黑", verdana;text-align: center; } .starting .starting_details div div .qingli {font-size: 14px;font-weight: bold;margin-top: 5px; } .starting .starting_details div div .p_new {font-size: 14px;font-weight: bold;color: #d4282d; } .starting .starting_details div div .p_odd {font-size: 12px;color: #999999;text-decoration: line-through; } /* 右側邊欄 */ .setting {/* position: fixed; */position: absolute;top: 655px;right: 50px;width: 100px;height: 490px;/* background-color: #e2c199; */ } .setting ul {width: 100px;height: 100%; } .setting ul li {width: 100px;height: 100px;border-top: 1px solid #e6e2db;text-align: center;color: #616762;background-color: #fff; } .setting ul li:hover {color: #d4282d; } .setting ul li:nth-child(1) {height: 180px;border: 0px;color: #d4282d; } .setting ul li:nth-child(1) img {width: 90px;height: 90px;margin-top: 5px; } .setting ul li:last-child {display: none;height: 110px; } .setting ul li i {display: block;font-size: 50px;margin-top: 10px; } .setting ul li span {display: block;margin-top: 10px; } /* 人氣推薦 */ .recommend {overflow: hidden;width: 1519px;height: 738px;background-color: #f4f0ea;margin: auto; } .recommend .recommend_tittle {width: 1090px;height: 48px;margin: auto;margin-top: 40px; }.recommend .recommend_tittle h3 {font-size: 28px;font-weight: 700;line-height: 1;float: left;margin-right: 20px; } .recommend .recommend_tittle p {font-family: "Microsoft Yahei", "微軟雅黑", verdana;color: #333;padding-top: 13px;display: inline-block;line-height: 1;margin-left: 30px;padding-bottom: 5px; } .recommend .recommend_tittle p:hover {color: #b4a078;border-bottom: 2px solid #b4a078; } .recommend .recommend_tittle a {float: right; } .recommend .recommend_tittle a:hover {color: #b4a078; } .recommend .recommend_products {display: flex;justify-content: space-around;width: 1090px;height: 570px;margin: auto;margin-top: 10px;background-color: #f4f0ea; } .recommend .recommend_products .products_left {width: 390px;height: 100%;text-align: center;background-color: #fff; } .recommend .recommend_products .products_left img {width: 390px;height: 401px;border-bottom: 1px solid #f4f0ea; } .recommend .recommend_products .products_left p {font-size: 18px;margin-top: 40px;font-weight: bold;font-family: "Microsoft Yahei", "微軟雅黑", verdana; } .recommend .recommend_products .products_left p:hover {color: #b4a078; } .recommend .recommend_products .products_left span {display: inline-block;margin-top: 15px; } .recommend .recommend_products .products_left .recommend_new {color: #d4282d;font-size: 18px; } .recommend .recommend_products .products_left .recommend_odd {color: #cccccc;text-decoration: line-through; } .recommend .recommend_products .products_right {width: 689px;height: 100%;margin-left: 11px;display: flex;flex-direction: row;justify-content: space-between;flex-flow: row wrap; } .recommend .recommend_products .products_right div {width: 223px;height: 280px;background-color: #fff;text-align: center;overflow: hidden; } .recommend .recommend_products .products_right div img {width: 180px;height: 180px; } .recommend .recommend_products .products_right div div {width: 223px;height: 100px;box-sizing: border-box;border-top: 1px solid #f4f0ea;font-size: 14px; } .recommend .recommend_products .products_right div div p {margin-top: 20px;font-weight: bold; } .recommend .recommend_products .products_right div div p:hover {color: #b4a078; } .recommend .recommend_products .products_right div div span {display: inline-block;margin-top: 5px; } .recommend .recommend_products .products_right div div .products_new {color: #d4282d; } .recommend .recommend_products .products_right div div .products_odd {font-size: 13px;color: #cccccc;text-decoration: line-through; } /* 居家生活 */ .home {display: flex;flex-direction: column;width: 1090px;height: 789px;margin: auto;margin-top: 60px; } .home .home_tittle {display: flex;flex-direction: row;justify-content: space-between;width: 1090px;height: 49px; } .home .home_tittle h3 {display: inline-block;width: 112px;font-size: 28px; } .home .home_tittle ul {display: inline-block;width: 780px;margin-top: 10px; } .home .home_tittle ul li {float: left;border-left: 1px solid #b6b2b2;padding: 0 10px; } .home .home_tittle ul li:hover {color: #b4a078; } .home .home_tittle ul li:first-child {border: 0; } .home .home_tittle ul li:last-child {float: right;border: 0; } .home .home_tittle ul li:last-child a:hover {color: #b4a078; } .home .home_products {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: space-between;width: 1090px;height: 100%;margin-top: 20px; } .home .home_products div:first-child {width: 1090px;height: 310px; } .home .home_products div:not(first-children) {width: 265px;height: 361px;text-align: center; } .home .home_products div:not(first-children):hover {background-color: #f4f0ea; } .home .home_products div p {margin-top: 15px;font-size: 13px;font-weight: bold; } .home .home_products div span {display: inline-block;height: 13px;margin-top: 5px;color: #d4282d; } .home .home_products div span:last-child {font-size: 12px;text-decoration: line-through;color: #999999; } /* 大家都在說部分 */ .everyone {display: flex;flex-direction: row;justify-content: center;align-items: center;width: 1519.2px;height: 660px;background-color: #f4f0ea;margin: auto; } .everyone_said {width: 1090px;height: 540px; } .everyone_said .ever_tittle {width: 1090px;height: 48px; } .everyone_said .ever_tittle h3 {display: inline-block;font-size: 28px; } .everyone_said .ever_tittle small {display: inline-block;margin-left: 20px;font-size: 14px; } .everyone_said .ever_information {display: flex;flex-direction: row;justify-content: space-between;position: relative;width: 1090px;height: 100%; } .everyone_said .ever_information .ever_left {position: absolute;top: 40%;left: -55px;text-align: center;color: #f4edd5;font-size: 40px;width: 50px;height: 50px;border-radius: 25px;background-color: #e2c199;line-height: 50px; } .everyone_said .ever_information .ever_left:hover {background-color: #cc9756; } .everyone_said .ever_information .ever_right {position: absolute;top: 40%;left: 1095px;text-align: center;color: #f4edd5;font-size: 40px;width: 50px;height: 50px;border-radius: 25px;background-color: #e2c199;line-height: 50px; } .everyone_said .ever_information .ever_right:hover {background-color: #cc9756; } .everyone_said .ever_information div {position: relative;width: 355px;height: 492px;background-color: #fff; } .everyone_said .ever_information div img {width: 355px;height: 355px; } .everyone_said .ever_information div div {position: absolute;width: 345px;height: 186.8px;top: 300px;left: 5px;border-radius: 5px;box-sizing: border-box;padding: 15px; }footer.css
* {margin: 0;padding: 0; } .everyone_said .ever_information div div span:first-child {color: #a4a4a4;font-size: 14px; } .everyone_said .ever_information div div span:nth-child(2) {color: #a4a4a4;font-size: 12px;margin-left: 20px; } .everyone_said .ever_information div div h5 {margin-top: 10px; } .everyone_said .ever_information div div p {font-size: 14px;margin-top: 15px; } .customer {display: flex;width: 1100px;height: 298px;margin: auto; } .customer .cus_service {width: 363.33px;height: 204px;box-sizing: border-box;margin-top: 47px;display: flex;flex-direction: column;justify-content: space-around;align-items: center; } .customer .cus_service .cus_seri {width: 288.33px;height: 150px; } .customer .cus_service .on {display: flex;justify-content: space-around;align-items: center; } .customer .cus_service .online {width: 80px;height: 100px;border: 1px solid #ebebeb;text-align: center;color: #666768; } .customer .cus_service .online:hover {color: #bc9f7d; } .customer .cus_service .online i {font-size: 50px;line-height: 70px; } .customer .cus_service:nth-child(2) {border-left: 1px solid #ebebeb;border-right: 1px solid #ebebeb; } .customer .cus_service .ex .explain {width: 100%;height: 108px;font-size: 12px;box-sizing: border-box;padding: 5px; } .customer .cus_service .ex .follow {width: 100%;height: 42px;line-height: 42px; } .customer .cus_service .ex .follow span {font-size: 14px; } .customer .cus_service .ex .follow i {font-size: 30px; } .customer .cus_service .ex .follow svg {font-size: 30px; } .customer .cus_service .ex .follow i:first-child {color: #251717; } .customer .cus_service .ex .follow i:nth-child(3) {color: #4ab43e; } .customer .cus_service .ex .follow i:last-child {color: #e33036; } .customer .cus_service .cus_ma {width: 104px;height: 127px; } .customer .cus_service .cus_ma img {width: 100%;height: 104px; } .customer .cus_service .cus_ma p {font-size: 12px;text-align: center;color: #b4a078; } /* footer */ footer {width: 1519.2px;height: 340px;background-color: #414141;overflow: hidden; } footer .sign {width: 1090px;height: 51px;margin: auto;display: flex;padding: 45px 0;border-bottom: 1px solid #fff;text-align: center; } footer .sign li {flex: 1;line-height: 50px; } footer .sign li i {display: inline-block;width: 44px;height: 44px;border-radius: 22px;border: 2px solid #fff;font-size: 40px;color: #fff;vertical-align: middle;margin-right: 10px; } footer .sign li span {font-size: 21px;vertical-align: middle;color: #fff; } footer .copyright {width: 1090px;height: 166.8px;margin: auto;margin-top: 16px;display: flex;flex-direction: column;justify-content: space-between; } footer .copyright li {text-align: center;font-size: 12px; } footer .copyright li a {color: #999999; } footer .copyright li:first-child a {display: inline-block;border-left: 2px solid #999999;padding: 0 15px; } footer .copyright li:first-child a:first-child {border: 0; } footer .copyright li:nth-child(2) a {margin-left: 5px; } footer .copyright li:nth-child(n + 3) a {padding: 0 10px; } footer .copyright li a:hover {color: #fff; }index.js
window.addEventListener("load", function () {// alert("Loading...");var hot = document.querySelector("#hot_sale");var sett = document.querySelector("#setting");var start = document.querySelector("#starting");var backTop = document.querySelector("#BackTop");var recom = document.querySelector("#recommend");// 左側邊欄定位之后數據,側邊欄被卷去的減去new商品被卷去的加7，這是等于13let hotTop = hot.offsetTop - start.offsetTop + 7;// 頁面滾動事件document.addEventListener("scroll", function () {// 打印window向上走了多少像素// console.log(window.pageYOffset);// 如果大于13就將左右側邊欄的定位改為粘性定位，否則則繼續是相對定位if (window.pageYOffset >= start.offsetTop - 7) {hot.style.position = "fixed";sett.style.position = "fixed";hot.style.top = hotTop + "px";sett.style.top = hotTop + "px";} else {hot.style.position = "absolute";sett.style.position = "absolute";hot.style.top = "655px";sett.style.top = "655px";}// 顯示人氣推薦的時候，返回頂部按鈕出現，沒到就隱藏if (window.pageYOffset >= recom.offsetTop) {backTop.style.display = "block";} else {backTop.style.display = "none";}});// 點擊返回頂部模塊，讓窗口滾動到頁面最上方backTop.addEventListener("click", function () {//窗口滾動，對象是windowanimate(window, 0);});//動畫函數function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 步長值寫到定時器的里面// 把步長值改為整數,不要出現小數的問題var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {clearInterval(obj.timer);// 回調函數位置：定時器結束的位置if (callback) {// 調用函數callback();}}// 把每次步長值給為逐漸變小的值(目標值-現在位置/10)// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);} });總結
- 上一篇： LeetCode：在线编程刷题网站
- 下一篇： zigbee的各种profile【裁剪】