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,这是等于13
let 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 () {
//窗口滚动,对象是window
animate(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);
}
});