模仿唯品会界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/hgz.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/yt-style.css">
<link rel="stylesheet" href="./css/yj-header.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_508219_l4a64jmzei.css">
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/chenyh.css">
</head>
<body>
<section class="header">
<!-- 右侧导航 -->
<section class="rightbox">
<ul class="rightnav">
<li><a href="#"><i><img src="./images/da1.png" alt=""></i><span>账号</span> </a></li>
<li class="gowu"><a href="#"><i><img src="./images/gouwu_14.png" alt=""></i><p>购物袋</p><i><img src="./images/ling0000_14.png" alt=""></i></a></li>
<li><a href="#"><i><img src="./images/qianbao_14.jpg" alt=""></i></a>
<p class="qianbao"><a href="#">我的优惠券</a></p>
</li>
<li><a href="#"><i><img src="./images/aixin111_14.png" alt=""></i></a>
<p class="qianbao"><a href="#">品牌收藏</a></p>
</li>
<li><a href="#"><i><img src="./images/xingxing_14.png" alt=""></i></a>
<p class="qianbao"><a href="#">商品收藏</a></p>
</li>
<li><a href="#"><i><img src="./images/naozhong_14.png" alt=""></i></a>
<p class="qianbao"><a href="#">我的足迹</a></p>
</li>
<li><a href="#"><i><img src="./images/qianbi_14.png" alt=""></i></a>
<p class="qianbao"><a href="#">会员反馈</a></p>
</li>
<li><a href="#"><i><img src="./images/shangjiantou_14.png" alt=""></i></a>
<p class="qianbao"><a href="#">返回顶部</a></p>
</li>
</ul>
</section>
<!-- 最顶部导航 -->
<div class="tnav">
<div class="top-nav wrap">
<span>广州市</span>
<i><img src="./images/1111.png" alt=""></i>
<ul class="tz">
<li><a href="#" class="c1">请登录<img src="./images/sp_05.gif" alt=""></a></li>
<li><a href="#" class="c1">注册<img src="./images/sp_05.gif" alt=""></a></li>
<li><a href="#" class="c1">我的订单<img src="./images/sp_05.gif" alt=""></a></li>
<li class="temai"><a href="#" class="c1">我的特卖<i><img src="./images/1111.png" alt="" class="zhuang"></i><img src="./images/sp_05.gif" alt="" class="yinc"></a>
<p>
<a href="#">商品收藏</a>
<a href="#">品牌收藏</a>
<a href="#">我的足迹</a>
</p>
</li>
<li class="temai julebu"><a href="#" class="c1">会员俱乐部<i class="huiyuan"><img src="./images/1111.png" alt="" class="zhuang"></i><img src="./images/sp_05.gif" alt="" class="yinc"></a>
<p>
<a href="#">俱乐部首页</a>
<a href="#">唯品币兑换</a>
</p>
</li>
<li class="temai kefu"><a href="#" class="c1">客户服务<i class="kefu"><img src="./images/1111.png" alt="" class="zhuang"></i><img src="./images/sp_05.gif" alt="" class="yinc"></a>
<p>
<a href="#">联系客服</a>
<a href="#">帮助中心</a>
<a href="#">服务中心</a>
<a href="#">知识产权投诉</a>
</p>
</li>
<li class="appdown"><a href="#" class="c1"><i></i>手机版<img src="./images/sp_05.gif" alt="" class="yinc"></a>
<a href="#" class="app"><img src="./images/app.jpg" width="161px" height="161px" alt="">
<p>随时逛 及时抢</p>
</a>
</li>
<li class="geng"><a href="#" class="c1">更多<i class="duo"><img src="./images/1111.png" alt="" class="zhuang"></i></a>
<p class="hezuo bk">
<span>合作专区</span><a href="#">唯品卡</a>
</p>
<p class="hezuo">
<span>关于我们</span><a href="#">SELL on vip<a href="#" class="cn1"> 品牌招商</a><a href="#" class="cn2"> 官方博客</a></a>
</p>
</li>
</ul>
</div>
</div>
<!-- 顶部logo -->
<div class="searchbox wrap">
<a href="#"></a>
<h1><img src="./images/logo.jpg" alt=""></h1>
</a>
<ul>
<li><img src="./images/logo-1.jpg" alt=""><span>100%正品</span></li>
<li><img src="./images/logo-2.jpg" alt=""><span>7天放心退</span></li>
<li><img src="./images/logo-3.jpg" alt=""><span>退货反运费</span></li>
<li><img src="./images/logo-4.jpg" alt="" class="lasti"><span>我的购物袋</span></li>
</ul>
</div>
<!-- 商品导航 -->
<div class="shopnav">
<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>
<li class="many"><a href="#"> 更多</a><span class="rot"></span>
<div class="subnav">
<div class="item">
<a href="#">
<img src="images/more1.jpg" alt="">
<span>女装</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more2.jpg" alt="">
<span>鞋包</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more3.jpg" alt="">
<span>配饰</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more4.jpg" alt="">
<span>运动</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more5.jpg" alt="">
<span>唯品·奢</span>
</a>
</div>
</div>
</li>
<li class="yugao"><i class="iconfont icon-yugao"></i><a href="#"> 预告</a></li>
<li class="fenlei"><i class="iconfont icon-fenlei1"></i><a href="#"> 分类</a></li>
</ul>
</div>
<!-- 商品导航 -->
<div class="shopnav shopnav2">
<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>
<li class="many"><a href="#"> 更多</a><span class="rot"></span>
<div class="subnav">
<div class="item">
<a href="#">
<img src="images/more1.jpg" alt="">
<span>女装</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more2.jpg" alt="">
<span>鞋包</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more3.jpg" alt="">
<span>配饰</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more4.jpg" alt="">
<span>运动</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="images/more5.jpg" alt="">
<span>唯品·奢</span>
</a>
</div>
</div>
</li>
<li class="yugao"><i class="iconfont icon-yugao"></i><a href="#"> 预告</a></li>
<li class="fenlei"><i class="iconfont icon-fenlei1"></i><a href="#"> 分类</a></li>
</ul>
</div>
<!-- 轮播大图 -->
<section class="shuffling">
<div class="bgimg">
<div class="daimgbox">
<div class="nothing">
<div class="imgbox">
<img src="./images/banner.jpg" alt="">
<img src="./images/lunbo1.jpg" alt="">
<img src="./images/lunbo2.jpg" alt="">
</div>
<span class="pre"><</span><span class="next">></span>
<ul>
<li>UA品牌钜献 全场6折起</li>
<li>热辣沙滩最高满198减40</li>
<li>母婴冰点盛宴</li>
<li>宝姿VIP大牌日立抢红包</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 火热商品 -->
<div class="moveimgbox wrap">
<img src="./images/hot.jpg" alt="">
<div class="moveimg">
<a href="#"><img src="./images/hot1.jpg" alt=""><i></i></a>
<a href="#"><img src="./images/hot2.jpg" alt=""><i></i></a>
<a href="#"><img src="./images/hot3.jpg" alt=""><i></i></a>
</div>
</div>
<!-- yt -->
<div class="yt-new wrap">
<div>
<img src="./images/new.jpg" alt="新人优选好货专区">
</div>
<div class="top">
<ul>
<li>
<a href="#">
<img src="./images/new1.jpg" alt="美妆馆">
<p>美妆馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new2.jpg" alt="鞋包馆">
<p>鞋包馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new3.jpg" alt="男装馆">
<p>男装馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new4.jpg" alt="体用馆">
<p>体用馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new5.jpg" alt="母婴馆">
<p>母婴馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new6.jpg" alt="国家馆">
<p>国家馆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new7.jpg" alt="人气零食">
<p>人气零食</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/new8.jpg" alt="更多分类">
<p>更多分类</p>
</a>
</li>
</ul>
</div>
<div class="foot">
<div class="L">
<img src="./images/new_clothes.jpg" alt="">
<ul>
<li>
<a href="#">
<img src="./images/clothes01.jpg">
<p>连衣裙</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/clothes02.jpg">
<p>省心套装</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/clothes03.jpg">
<p>半身裙</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/clothes04.jpg">
<p>百搭T恤</p>
</a>
</li>
</ul>
</div>
<div class="R">
<img src="./images/new_beauty.jpg">
<ul>
<li>
<a href="#">
<img src="./images/beauty01.jpg">
<p>人气彩妆</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/beauty02.jpg">
<p>护肤套装</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/beauty03.jpg">
<p>口碑面膜</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/beauty04.jpg">
<p>清爽水乳</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- yt 结束 -->
<!-- main -->
<div class="chenyh" id="clothing">
<img src="./images/today_title.png" alt="">
<!-- 新特卖 -->
<div class="today">
<ul>
<li class="first">
<a href="#">
<img class="bacmask bac-mask" src="./images/today2.jpg" alt="">
<span class="content2 centered">
<img class="centered" src="./images/today2_logo.png" alt="">
<strong class="centered">雅意新韵 至美绽放</strong>
<p class="centered">购物即享折上8.5折优惠</p>
</span>
</a>
<div class="content1 centered">
<ul>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list1.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list2.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list3.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
</ul>
<span class="point-line"></span>
<span class="logo">
<img src="./images/today1_logo.jpg" alt="">
<a href="#">进入专场</a>
</span>
</div>
</li>
<li class="first">
<a href="#">
<img class="bacmask bac-mask" src="./images/today2.jpg" alt="">
<span class="content2 centered">
<img class="centered" src="./images/today2_logo.png" alt="">
<strong class="centered">雅意新韵 至美绽放</strong>
<p class="centered">购物即享折上8.5折优惠</p>
</span>
</a>
<div class="content1 centered">
<ul>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list1.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list2.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list3.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
</ul>
<span class="point-line"></span>
<span class="logo">
<img src="./images/today1_logo.jpg" alt="">
<a href="#">进入专场</a>
</span>
</div>
</li>
<li class="first">
<a href="#">
<img class="bacmask bac-mask" src="./images/today2.jpg" alt="">
<span class="content2 centered">
<img class="centered" src="./images/today2_logo.png" alt="">
<strong class="centered">雅意新韵 至美绽放</strong>
<p class="centered">购物即享折上8.5折优惠</p>
</span>
</a>
<div class="content1 centered">
<ul>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list1.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list2.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list3.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
</ul>
<span class="point-line"></span>
<span class="logo">
<img src="./images/today1_logo.jpg" alt="">
<a href="#">进入专场</a>
</span>
</div>
</li>
<li class="first">
<a href="#">
<img class="bacmask bac-mask" src="./images/today2.jpg" alt="">
<span class="content2 centered">
<img class="centered" src="./images/today2_logo.png" alt="">
<strong class="centered">雅意新韵 至美绽放</strong>
<p class="centered">购物即享折上8.5折优惠</p>
</span>
</a>
<div class="content1 centered">
<ul>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list1.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list2.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
<li>
<a href="#">
<img class="bacmask" src="./images/today_list3.jpg" alt="" width="140px">
</a>
<p>￥1148</p>
</li>
</ul>
<span class="point-line"></span>
<span class="logo">
<img src="./images/today1_logo.jpg" alt="">
<a href="#">进入专场</a>
</span>
</div>
</li>
</ul>
</div>
<!-- 左侧导航栏 -->
<div class="navbar navigation">
<ul>
<li>
<a class="a" href="#">
<i class="icon iconfont icon-jingxuan"></i>
<span>精选</span>
</a>
</li>
<li>
<a class="b" href="#clothing">
<i class="icon iconfont icon-nvzhuang"></i>
<span>女装</span>
</a>
</li>
<li>
<a class="b" href="#Shoe-bag">
<i class="icon iconfont icon-xiebao"></i>
<span>鞋包</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-nanshi"></i>
<span>男士</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-yundong"></i>
<span>运动</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-shipin"></i>
<span>饰品</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon nav- iconfont icon-meizhuang"></i>
<span>美妆</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-tongzhuang"></i>
<span>母婴</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-jujia"></i>
<span>居家</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-guoji"></i>
<span>国际</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-shuiguo"></i>
<span>生活</span>
</a>
</li>
<li>
<a class="b" href="#trailer">
<i class="icon iconfont icon-yugao"></i>
<span>预告</span>
</a>
</li>
</ul>
</div>
<!-- 左侧导航栏 -->
<div class="navbar navigation2">
<ul>
<li>
<a class="a" href="#">
<i class="icon iconfont icon-jingxuan"></i>
<span>精选</span>
</a>
</li>
<li>
<a class="b" href="#clothing">
<i class="icon iconfont icon-nvzhuang"></i>
<span>女装</span>
</a>
</li>
<li>
<a class="b" href="#Shoe-bag">
<i class="icon iconfont icon-xiebao"></i>
<span>鞋包</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-nanshi"></i>
<span>男士</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-yundong"></i>
<span>运动</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-shipin"></i>
<span>饰品</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon nav- iconfont icon-meizhuang"></i>
<span>美妆</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-tongzhuang"></i>
<span>母婴</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-jujia"></i>
<span>居家</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-guoji"></i>
<span>国际</span>
</a>
</li>
<li>
<a class="b" href="#">
<i class="icon iconfont icon-shuiguo"></i>
<span>生活</span>
</a>
</li>
<li>
<a class="b" href="#trailer">
<i class="icon iconfont icon-yugao"></i>
<span>预告</span>
</a>
</li>
</ul>
</div>
</div>
<!-- main -->
<!-- qah -->
<!-- top -->
<div class="QAH-top">
<div class="left-brand" id="Shoe-bag">
<h2>鞋包</h2>
<h2 class="brand">品牌</h2>
<span class="brand-name">SHOES&BAGS</span>
</div>
<span class="all-brand">
<a href="#">全部鞋包品牌
<img src="./images/jiantou-right.png" alt="" class="all-brand-img">
</a>
</span>
</div>
<!-- 内容 -->
<div class="QAH">
<div class="clear-fix">
<ul>
<li class="table1">
<a href="#"><img src="./images/shoes1.jpg" alt=""></a>
<div class="graph1">
满198减10 , 上不封顶
</div>
<br>
<div class="graph2">
<span class="price">1.5</span>
<span class="price-introduce1">折起 涉趣selftrand女鞋专场</span>
<span class="price-introduce2"><img src="./images/oclock.png" alt="">剩4天</span>
</div>
</li>
<li class="table1">
<a href="#"><img src="./images/shoes2.jpg" alt=""></a>
<div class="graph1">
满198减10 , 上不封顶
</div>
<br>
<div class="graph2">
<span class="price">1.4</span>
<span class="price-introduce1">折起 优哈.优哈HOW.R.U箱包专场</span>
<span class="price-introduce2"><img src="./images/oclock.png" alt=""> 剩2天</span>
</div>
</li>
<li class="table1">
<a href="#"><img src="./images/shoes2.jpg" alt=""></a>
<div class="graph1">
满298减60 , 上不封顶
</div>
<br>
<div class="graph2">
<span class="price">1</span>
<span class="price-introduce1">折起 卡洛黛茜CORALDAISY皮具专场</span>
<span class="price-introduce2"><img src="./images/oclock.png" alt=""> 剩4天</span>
</div>
</li>
<li class="table1">
<a href="#"><img src="./images/shoes1.jpg" alt=""></a>
<div class="graph1">
满298减60 , 上不封顶
</div>
<br>
<div class="graph2">
<span class="price">1</span>
<span class="price-introduce1">折起 卡洛黛茜CORALDAISY皮具专场</span>
<span class="price-introduce2"><img src="./images/oclock.png" alt=""> 剩4天</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 底部 -->
<div class="more-shoes"> <a href="#">逛更多鞋包品牌</a> <img src="./images/jiantou-bottom.png" alt=""></div>
<!-- qahejiesu -->
<!-- header jiesu -->
<div class="hgz" id="trailer">
<div class="wrap">
<!-- 头部 -->
<div class="hgz-header">
<img src="./images/tomorrow.png" alt="">
</div>
<!-- 下边的图片 -->
<div class="hgz-main ">
<ul class="hgzMain-list clearfix">
<!-- li列表内容 -->
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-1.jpg" alt="" class="hazFor-img">
<span class="hgzFor">
抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i class="Test"></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-15.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-2.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-3.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-9.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-5.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-1.jpg" alt="" class="hazFor-img">
<span class="hgzFor">
抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i class="Test"></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-15.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-2.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-3.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-7.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-5.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-1.jpg" alt="" class="hazFor-img">
<span class="hgzFor">
抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i class="Test"></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-15.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<a href="#"><span class="hgz-bot">提醒我</span></a>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-2.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-3.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-15.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
<li class="hzgLis-con">
<a href="#" class="hgzFor-con">
<img src="./images/product-5.jpg" alt="" class="hazFor-img">
<span class="hgzFor">抢先好货
<i></i>
</span>
<p class="hgzFor-p">
<span class="hgzFor-full">
<i></i>
购物满三件减一件
</span>
<span class="hgzFor-collect">
<i></i>
收藏品牌
</span>
</p>
</a>
<div class="hgzMainTitl">
<p class="hgzMain-title">
<span>JM收纳日用专场</span>
<span class="hgzMdiscount">
<span>3</span> 折封顶
</span>
</p>
<div class="hgz-phone">
<input type="text" name="" id="" class="hgz-inp" placeholder="请输入手机号码...">
<span class="hgz-bot">提醒我</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 结束 -->
<!-- lqs -->
<div class="yao">
<div class="yao-foot">
<ul class="yao-vip">
<li>
<h5 class="wph1"></h5>
</li>
<li>
<h5 class="wph2"></h5>
</li>
<li>
<h5 class="wph3"></h5>
</li>
<li>
<h5 class="wph4"></h5>
</li>
<li>
<h5 class="wph5"></h5>
</li>
<li>
<h5 class="wph6"></h5>
</li>
<li>
<h5 class="wph7"></h5>
</li>
<li>
<h5 class="wph8"></h5>
</li>
<li>
<h5 class="wph9"></h5>
</li>
<li>
<h5 class="wph10"></h5>
</li>
</ul>
<div class="liebiao">
<div class="liebiao-list">
<dl class="liebiao-1">
<dt>服务保障</dt>
<dd>
<a href="#"><span class="dian">正品保证</span></a>
</dd>
<dd>
<a href="#"><span class="dian">7天无理由放心退</span></a>
</dd>
<dd>
<a href="#"><span class="dian">退货返运费</span></a>
</dd>
<dd>
<a href="#"><span class="dian">7x15小时客户服务</span></a>
</dd>
</dl>
<dl class="liebiao-2">
<dt>购物指南</dt>
<dd>
<a href="#"><span class="dian">导购演示</span></a>
</dd>
<dd>
<a href="#"><span class="dian">订单操作</span></a>
</dd>
<dd>
<a href="#"><span class="dian">会员注册</span></a>
</dd>
<dd>
<a href="#"><span class="dian">账号管理</span></a>
</dd>
<dd>
<a href="#"><span class="dian">收货样品</span></a>
</dd>
<dd>
<a href="#"><span class="dian">会员等级</span></a>
</dd>
</dl>
<dl class="liebiao-3">
<dt>支付方式</dt>
<dd>
<a href="#"><span class="dian">快捷支付</span></a>
</dd>
<dd>
<a href="#"><span class="dian">23家主流网银支付</span></a>
</dd>
<dd>
<a href="#"><span class="dian">货到付款</span></a>
</dd>
<dd>
<a href="#"><span class="dian">支付宝、银联等支付</span></a>
</dd>
<dd>
<a href="#"><span class="dian">信用卡支付</span></a>
</dd>
<dd>
<a href="#"><span class="dian">零钱支付</span></a>
</dd>
</dl>
<dl class="liebiao-4">
<dt>配送方式</dt>
<dd>
<a href="#"><span class="dian">全场满288元免运费</span></a>
</dd>
<dd>
<a href="#"><span class="dian">配送范围及运费</span></a>
</dd>
<dd>
<a href="#"><span class="dian">验货与签收</span></a>
</dd>
</dl>
<dl class="liebiao-5">
<dt>售后服务</dt>
<dd>
<a href="#"><span class="dian">退货政策</span></a>
</dd>
<dd>
<a href="#"><span class="dian">退货流程</span></a>
</dd>
<dd>
<a href="#"><span class="dian">退款方式和时效</span></a>
</dd>
</dl>
<dl class="liebiao6">
<dt>唯品会APP二维码</dt>
<dd>
<img src="./images/page_bottom_dl_n.png" alt="">
</dd>
<dd>下载唯品会移动APP</dd>
</dl>
</div>
<div class="foot-liebiao">
<div class="about">
<a href="#">关于我们</a><span>丨</span>
<a href="#">About us</a><span>丨</span>
<a href="#">Investor Relations</a><span>丨</span>
<a href="#">媒体报道</a><span>丨</span>
<a href="#">品牌招商</a><span>丨</span>
<a href="#">隐私条款</a><span>丨</span>
<a href="#">唯品诚聘</a><span>丨</span>
<a href="#">365爱心基金</a><span>丨</span>
<a href="#">唯品卡</a><span>丨</span>
<a href="#">唯品地图</a><span>丨</span>
<a href="#">品牌大全</a><span>丨</span>
<a href="#">联系我们</a>
</div>
</div>
</div>
<div class="notice">
<p>
Copyright © 2008-2017 vip.com，All Rights Reserved 使用本网站即表示接受 <a>唯品会用户协议。</a>版权所有 <a>广州唯品会电子商务有限公司</a>
</p>
<p>
<span class="s-notice"></span> <a>粤公网安备 44010302111111号</a> <a>粤ICP备08114786号</a> <a>ICP经营许可证：粤B2-20080329</a> <a>网络文化经营许可证：粤网文〔2015〕5028-229</a>
<p>
<a>自营主体经营证照</a> <a>风险监测信息</a> <a>互联网药品信息服务资格证书：（粤C20140002）</a>
</p>
</p>
</div>
<div class="yao-logo">
<div class="b-logo">
<a href="#" class="logo1">
银联
</a>
<a href="#" class="logo2">
消费维护
</a>
<a href="#" class="logo3">
红盾
</a>
<a href="#" class="logo4">
网警
</a>
<a href="#" class="logo5">
公安
</a>
<a href="#" class="logo6">
诚信
</a>
<a href="#" class="logo7">
可信
</a>
</div>
</div>
</div>
</div>
<!-- lqs结束 -->
<script src="./js/jquery-3.1.1.js"></script>
<script src="./js/move.js"></script>
<script src="./js/nav.js"></script>
<script src="./js/leftnav.js"></script>
</body>
</html>
公共样式css
/* 公共的css样式 */
@charset"utf-8";
body {
color: #999999;
font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, \5FAE\8F6F\96C5\9ED1, tahoma, simsun, sans-serif;
}
.wrap {
width: 1170px;
margin: 0 auto;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clear-fix {
*zoom: 1;
}
.graph2 .price-introduce2 img {
position: relative;
width: 12px;
height: 12px;
bottom: -2px;
}
/* 向下箭头图标 */
.more-shoes img {
position: relative;
width: 12px;
height: 12px;
bottom: -2px;
}
**重置样式css
/* 重置的css样式 */
@charset "utf-8";
article,
aside,
blockquote,
body,
button,
code,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a {
text-decoration: none;
color: #cccccc;
}
i,
em {
font-style: normal;
}
input,
textarea,
button,
section,
a {
outline: none;
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
border: none;
vertical-align: middle;
}
详细样式
@charset "utf-8";
.header{
height: 0;
}
.shuffling{
position: relative;
z-index: -5;
}
/* 右侧导航 */
.rightbox{
position: fixed;
right: 0;
z-index: 10;
width: 37px;
height: 100%;
background-color: #262626;
}
.rightnav li{
position: absolute;
cursor: pointer;
}
.rightnav li i{
display: block;
width: 37px;
text-align: center;
line-height: 35px;
}
.rightnav li span{
display: block;
font-size: 12px;
color: #fff;
text-align: center;
margin-top: 4px;
}
.rightnav li:nth-child(1){
top: 208px;
height: 45px;
line-height: 0;
}
.rightnav li:nth-child(2){
height: 150px;
top:257px;
background-color: #df147f;
}
.rightnav .gowu i{
margin: 5px 0;
}
.rightnav .gowu p{
width: 27px;
font-size: 14px;
color: #fff;
text-align: center;
padding-left:5px ;
}
.rightnav li:nth-child(3){
height: 30px;
top: 423px;
background-color: #262626;
}
.rightnav li:nth-child(4){
height: 30px;
top: 465px;
background-color: #262626;
}
.rightnav li:nth-child(5){
height: 30px;
top: 505px;
background-color: #262626;
}
.rightnav li:nth-child(6){
height: 30px;
top: 545px;
background-color: #262626;
}
.rightnav li:nth-child(7){
height: 30px;
top: 685px;
background-color: #262626;
}
.rightnav li:nth-child(8){
height: 30px;
top: 720px;
background-color: #262626
}
.rightnav li:hover{
background-color: #df147f;
}
/* 滑过弹出 */
.rightnav .qianbao{
position: absolute;
width: 115px;
height: 28px;
top: 0;
background-color: #fff;
border:1px solid #cdcdcd;
border-right: 0;
border-radius: 3px 0 0 3px;
text-align: center;
line-height: 28px;
font-size: 14px;
visibility: hidden;
transition: 500ms;
z-index: -1;
}
.rightnav .qianbao a{
color: black;
}
.rightnav li:nth-child(3):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
.rightnav li:nth-child(4):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
.rightnav li:nth-child(5):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
.rightnav li:nth-child(6):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
.rightnav li:nth-child(7):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
.rightnav li:nth-child(8):hover .qianbao{
visibility: visible;
transform: translate(-116px);
}
/* 最顶上样式 */
.tnav{
background-color: #f5f5f5;
}
.top-nav{
height: 30px;
text-align: center;
line-height: 30px;
position: relative;
}
.top-nav span{
display: inline-block;
font-size: 12px;
height: 30px;
line-height: 30px;
position: absolute;
left: 0;
}
.top-nav i{
top: -3px;
left: 40px;
height: 30px;
line-height: 30px;
position: absolute;
cursor: pointer;
}
.top-nav ul{
display: inline-block;
font-size: 12px;
position: absolute;
right: 0;
}
.top-nav ul li{
float: left;
width: 76px;
padding-right: 10px ;
}
.top-nav ul li a{
display: block;
color: #777;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.top-nav ul li a img{
position: absolute;
top: 10px;
margin-left: 18px;
}
.tz li:hover .c1{
color: #f10;
}
.top-nav .tz i{
position: absolute;
top: -8px;
left: 303px;
}
.top-nav .tz .huiyuan{
top: -8px;
left: 402px;
}
.top-nav .tz .kefu{
top: -8px;
left: 490px;
}
.top-nav .tz .duo{
top: -8px;
left: 650px;
}
/* 顶部鼠标滑过下拉的样式 */
/* 二维码 */
.tz .appdown i{
width: 10px;
height: 14px;
background: url(../images/sprites.png);
background-position: -294px -142px;
position: absolute;
margin-top: 15px;
left: 535px;
margin-left: 2px;
}
.top-nav .tz .app{
width: 161px;
height: 190px;
display: inline-block;
position: absolute;
z-index: 12;
border-left: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
padding: 10px;
background-color: #fff;
left: 434px;
display: none;
}
.tz .app img{
top: 10px;
margin: 0;
right: 10px;
}
.tz .app p{
display: inline-block;
position: relative;
top: 165px;
font-size: 15px;
font-weight: 600;
}
.top-nav .tz .appdown:hover .app{
display: block;
}
.top-nav .tz .appdown:hover{
background-color: #fff;
outline: 1px solid #cdcdcd;
}
.top-nav .tz .appdown:hover .yinc{
display: none;
}
/* 特卖 */
.tz .temai p{
width: 76px;
height: 90px;
background-color: #fff;
display: none;
}
.tz .temai img{
transition: 500ms;
}
.tz .temai p a:hover{
color: #f10;
}
.tz .temai:hover{
background-color: #fff;
outline: 1px solid #cdcdcd;
}
.tz .temai:hover .zhuang{
top:13px;
transform: rotate(180deg);
}
.tz .temai:hover p{
display: block;
}
.tz .temai:hover .yinc{
display: none;
}
/* 俱乐部 */
.tz .julebu p{
height: 65px;
left: 0;
right: 0;
margin: 0 auto;
}
.top-nav .tz .julebu{
width: 90px;
}
/* 客服服务 */
.tz .kefu p{
height: 125px;
}
/* 更多 */
.top-nav .tz .geng .hezuo{
width: 220px;
height: 80px;
background-color: #fff;
position: relative;
left: -135px;
border-left: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
display: none;
}
.top-nav .tz .geng img{
transition: 500ms;
}
.top-nav .tz .geng .bk{
border-bottom: 1px dashed #f5f5f5;
}
.top-nav .tz .geng .hezuo a{
position: absolute;
top: 45px;
left: 20px;
}
.top-nav .tz .geng .hezuo .cn1{
top: 47px;
left: 96px;
}
.top-nav .tz .geng .hezuo .cn2{
top: 47px;
left: 154px;
}
.top-nav .tz .geng .hezuo span{
font-size: 17px;
font-weight: 700;
top: 15px;
left: 20px;
}
.tz .geng:hover{
background-color: #fff;
outline: 1px solid #cdcdcd;
}
.tz .hezuo a:hover{
color: #f10;
}
.tz .geng:hover .zhuang{
top:13px;
transform: rotate(180deg);
}
.tz .geng:hover .hezuo{
display: block;
}
/* logo样式 */
.searchbox{
position: relative;
z-index: -1;
}
.searchbox h1{
display: inline-block;
margin: 20px 0;
cursor: pointer;
}
.searchbox ul{
position: absolute;
display: inline-block;
right: 0;
}
.searchbox li{
float: left;
margin: 24px 90PX 24px 0;
}
.searchbox li .lasti{
position: relative;
top: 5px;
}
.searchbox li span{
position: absolute;
font-size: 14px;
top: 35px;
color: #eb0278;
}
/* 头部导航 */
.shopnav{
height: 40px;
background-color: #f10180;
position: relative;
z-index: -1;
}
.shopnav .rot{
width: 0;
height: 0;
border-top:5px solid #edffff ;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
top: 19px;
left: 55px;
transition: 500ms;
}
.shopnav ul{
width: 1170px;
height: 40px;
margin: 0 auto;
position: relative;
}
.shopnav ul li{
float: left;
padding: 0 20px;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
position: relative;
}
.shopnav ul li:nth-child(1){
background-color: #BD1167;
}
.shopnav ul li a{
font-size: 16px;
color: #fff
}
.shopnav ul li:hover{
background-color: #BD1167;
}
.shopnav ul li:hover a{
color: black;
}
.shopnav ul li:hover .rot{
top: 13px;
transform: rotate(180deg);
}
/* 导航更多 */
.shopnav ul .many{
position: relative;
}
.shopnav ul .many .subnav{
z-index: 9;
width: 596px;
height: 260px;
background-color: #fff;
position: absolute;
right: 0;
top: 40px;
box-shadow: 0 0 5px;
padding: 26px 0 0 26px;
box-sizing: border-box;
display: none;
}
.shopnav ul .many .subnav .item{
width: 170px;
height: 96px;
float: left;
margin: 0 16px 16px 0;
position: relative;
overflow: hidden;
}
.item span{
position: absolute;
left: 0;
top: 30px;
width: 100%;
line-height: 96px;
text-align: center;
background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
color: #fff;
font-size: 16px;
transition: 0.3s;
}
.item img{
transform: 3s;
}
.item:hover span{
top:0;
}
.item:hover img{
transform: scale(1.2);
}
.shopnav ul .many:hover .subnav{
display: block;
}
/* 头部导航的分类预告 */
.shopnav ul .fenlei{
float: right;
margin: 0 30px;
}
.shopnav ul .yugao{
float: right;
}
.shopnav ul .yugao i{
font-size: 25px;
position: absolute;
padding: 0 35px;
right: 36px;
}
.shopnav ul .fenlei i{
font-size: 25px;
position: absolute;
padding: 0 35px;
right: 36px;
}
.shopnav ul .fenlei::after{
content: "";
width: 1px;
height: 15px;
background-color: #ccc;
position: absolute;
top: 13px;
right: -1px;
}
/* 轮播图 */
.bgimg{
width: 100%;
height: 520px;
background: url(../images/banner_bg.jpg) no-repeat center top;
overflow: hidden;
position: relative;
z-index: -2;
}
.daimgbox{
width: 1170px;
height: 452px;
/* left: 11.4%; */
top: 34px;
position: absolute;
background: rgba(255,255,255,0.6);
box-shadow: 0 0 5px;
box-sizing: border-box;
padding: 12px 12px 0 ;
left: 50%;
transform: translate(-50%);
}
.bgimg .daimgbox .nothing {
width: 1146px;
height: 452px;
position: relative;
overflow: hidden;
}
.bgimg .daimgbox .imgbox{
height: 400px;
position: absolute;
}
.bgimg .daimgbox .imgbox img{
width: 1146px;
height: 400px;
float: left;
margin-right: 12px;
}
.bgimg .daimgbox span{
width:30px;
height:60px;
background:transparent;
text-align: center;
line-height:60px;
font-size:50px;
font-weight: 700;
color:#fff;
position: absolute;;
top:190px;
cursor: pointer;
}
.pre{
left:20px;
}
.next{
right:20px;
}
.bgimg .daimgbox ul li{
float: left;
width: 25%;
line-height: 40px;
text-align: center;
background-color: #fff;
top: 400px;
position: relative;
cursor: pointer;
}
.bgimg .daimgbox ul li::after{
content: "";
width: 1px;
height: 10px;
background-color: #ccc;
position: absolute;
top: 15px;
right: -1px;
z-index: 10;
}
/* 热卖 */
.moveimgbox{
height: 168px;
position: relative;
margin-bottom: 50px;
}
.moveimg{
width: 570px;
height: 168px;
position: absolute;
top: 0;
right: 0;
}
.moveimg img{
width: 166px;
height: 144px;
margin:16px 20px 0 0;
}
.moveimg img:hover{
animation: flash 0.8s;
}
.moveimg i{
display: inline-block;
width: 40px;
height: 32px;
background-color: yellowgreen;
z-index: 5;
position: absolute;
}
.moveimg i:nth-of-type(1){
left: 136px;
background: url(../images/icon.png) no-repeat;
background-position: 0 -9px;
}
.moveimg i:nth-of-type(2){
left: 327px;
background: url(../images/icon.png) no-repeat;
background-position: 0 -57px;
}
.moveimg i:nth-of-type(3){
left: 520px;
background: url(../images/icon.png) no-repeat;
background-position: 0 -104px;
}
/* 图片动画效果 */
@keyframes flash{
0%{opacity: 1;}
50%{opacity: 0.5;}
100%{opacity: 1;}
}
/* 变异导航 */
.fixnav {
position: fixed;
top: 0px;
left: 0px;
}
.shopnav2{
width: 100%;
z-index: 9;
}
.yt-new {
margin-bottom: 50px;
margin-top: 50px;
}
.yt-new .top {
margin-top: 10px;
}
.yt-new .top ul {
width: 1150px;
margin-left: 10px;
text-align-last: justify;
}
.yt-new .top ul li {
display: inline-block;
text-align-last: center;
}
.yt-new .top img {
float: left;
margin-left: 50%;
transform: translate(-50%, 0);
}
.yt-new .top p {
font-size: 16px;
color: #333;
text-align: center;
text-shadow: 0 0 0 1px #333;
}
.yt-new .foot .L {
float: left;
position: relative;
/* width: 570px; */
/* overflow: hidden; */
}
.yt-new .foot {
margin-top: 10px;
}
.yt-new .foot .R {
float: right;
width: 570px;
}
.yt-new .foot .L ul {
position: absolute;
width: 570px;
margin-left: 18px;
}
.yt-new .foot .L li {
float: left;
position: relative;
bottom: 138px;
width: 120px;
height: 120px;
border-radius: 8px;
background-color: #fff;
text-align: center;
margin-right: 18px;
}
.yt-new .foot .L li img {
margin-top: 15px;
}
.yt-new .foot .L li p {
margin-top: 5px;
font-size: 16px;
color: #333;
}
.yt-new .foot .R {
position: relative;
}
.yt-new .foot .R ul {
position: absolute;
width: 570px;
height: 0;
margin-left: 18px;
}
.yt-new .foot .R li {
float: left;
position: relative;
bottom: 138px;
width: 120px;
height: 120px;
border-radius: 8px;
background-color: #fff;
text-align: center;
margin-right: 18px;
}
.yt-new .foot .R li img {
margin-top: 15px;
}
.yt-new .foot .R li p {
margin-top: 5px;
font-size: 16px;
color: #333;
}
.yt-new ul a:hover p {
color: #f10582;
}
.yt-new .R li:hover p {
color: #f10582;
}
.yt-new .L li:hover p {
color: #f10582;
}
.yt-new {
overflow: hidden;
min-width: 1000px;
}
.yt-new .foot li:hover img {
transform: scale(2);
transform-origin: bottom center;
box-shadow: 3px 3px 3px #aaa;
}
/* 第一个单元图 */
.QAH {
width: 1170px;
/* background-color: #eaea; */
margin: 0 auto;
border-top: 1px solid #333;
border-bottom: 1px solid #eaeaea;
overflow: hidden;
}
/* 清除浮动效果 */
.QAH .clear-fix {
content: "";
clear: both;
display: inline-block;
}
/* 右箭头图标 */
.QAH-top .all-brand img {
position: absolute;
margin-left: 2px;
width: 12px;
height: 12px;
bottom: 4px;
}
/* li 盒子浮动 */
.QAH ul li {
float: left;
margin-right: 30px;
}
.QAH ul li:nth-child(2n) {
margin-right: -30px;
}
/* 修改图片大小 */
.QAH ul li img {
width: 570px;
height: 250px;
}
.QAH ul li img:hover {
transform: scale(1.1);
transition: all 200ms ease-in-out 50ms;
}
/* 倒数两个单元格子的上下距离调整 */
.QAH ul .table1:nth-last-child(-n+2) {
padding-top: 15px;
margin-bottom: 15px;
}
.QAH ul .table1:nth-child(-n+2) {
padding-top: 15px;
}
.QAH .table1 {
position: relative;
}
.QAH ul li .graph1 {
position: absolute;
width: 545px;
bottom: 25px;
background-color: rgba(5, 5, 5, .6);
color: #eee;
padding: 5px;
padding-left: 20px;
font-size: 12px;
}
.QAH ul li .graph2 {
width: 550px;
display: inline-block;
padding-left: 20px;
}
.QAH ul li .graph2:hover {
/* transform: scale(1.1); */
}
.QAH ul li .graph2 .price {
font-size: 18px;
font-weight: bold;
color: #ff1e32;
}
.graph2 .price-introduce1 {
font-size: 12px;
}
.graph2 .price-introduce1:hover {
/* transform: scale(2); */
color: rgba(0, 255, 255, 0.87);
}
.graph2 .price-introduce2 {
position: relative;
float: right;
margin-top: 10px;
margin-right: 20px;
font-size: 12px;
}
.graph2 .price-introduce2 img {
position: absolute;
bottom: 3px;
left: -15px;
}
.graph2 .price-introduce2:hover {
/* transform: scale(2); */
color: #ff1e32;
}
.graph1 {
display: none;
}
.QAH ul li:hover .graph1 {
display: block;
}
/* 顶部 */
.QAH-top {
margin-top: 50px;
position: relative;
width: 1170px;
margin: 0 auto;
}
.QAH-top h2,
.brand,
.brand-name,
.all-brand {
display: inline;
}
.QAH-top .brand {
font-weight: normal;
}
.QAH-top .brand-name {
font-size: 12px;
color: #999999;
}
.all-brand {
position: absolute;
font-size: 12px;
right: 17px;
top: 15px;
}
.all-brand:hover {
text-decoration: underline;
}
.QAH-top .left-brand {
width: 190px;
border-bottom: 2px solid #333;
}
.left-brand h2 {
font-size: 25px;
color: #333333;
}
/* 底部 */
.more-shoes {
background-color: rgb(255, 0, 170);
width: 250px;
padding: 5px;
text-align: center;
margin: 0 auto;
}
.more-shoes a:hover {
color: #cf0;
}
.more-shoes:hover {
transform: scale(2);
}
.hgz {
margin-top: 50px;
background: white;
}
/* hgz-header */
.hgz-header {
overflow: hidden;
margin-bottom: 20px;
}
/* hgz-main */
.hgz-main {
background: white;
overflow: hidden;
}
.hgzMain-list {
margin-right: -30px;
}
/* hgz li */
.hzgLis-con {
position: relative;
float: left;
width: 270px;
height: 200px;
margin-top: 10px;
background: white;
margin-right: 30px;
}
/* hgz a元素 */
.hgzFor-con {
position: relative;
display: block;
height: 153px;
}
/* 阿元素背景图片 */
.hgzFor-con img {
width: 270px;
height: 153px;
}
/* 抢货 */
.hzgLis-con .hgzFor {
position: absolute;
top: 40px;
left: 50%;
transform: translate(-50%);
width: 140px;
height: 40px;
text-align: center;
font-size: 14px;
line-height: 40px;
font-weight: 700;
background: rgba(0, 0, 0, .5);
border-radius: 5px;
color: white;
display: none;
}
.hzgLis-con .hgzFor:hover {
color: #f10582;
}
.hzgLis-con .hgzFor i {
position: relative;
display: inline-block;
height: 8px;
width: 8px;
border-top: 2px solid #e7e7e7;
border-left: 2px solid #e7e7e7;
background: transparent;
transform: rotate(135deg);
}
.hgzFor-con .hgzFor-p {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
line-height: 25px;
font-size: 12px;
color: white;
background: rgba(0, 0, 0, .5);
display: none;
}
.hgzFor-con .hgzFor-full {
float: left;
margin-left: 5px;
}
.hgzFor-con .hgzFor-full i {
position: relative;
bottom: -4px;
width: 16px;
height: 16px;
display: inline-block;
background: url(../images/qizhi-icon.png) no-repeat;
}
.hgzFor-con .hgzFor-collect {
position: relative;
float: right;
height: 20px;
width: 55px;
padding-left: 25px;
margin-right: 5px;
margin-top: 2.5px;
background: white;
color: #484848;
line-height: 20px;
border-radius: 40px;
}
.hgzFor-collect:hover {
color: #f10582;
}
.hgzFor-collect i {
position: absolute;
left: 4px;
top: 50%;
transform: translate(0, -50%);
height: 16px;
width: 16px;
display: inline-block;
/* background-color: red; */
background: url(../images/sprite.png) no-repeat -158px -172px;
}
.hgzFor-collect:hover i {
background-position: -138px -173px;
}
/* 标题 */
.hgzMainTitl {
background: white;
height: 47px;
line-height: 47px;
}
.hgzMain-title {
margin-left: 5px;
height: 47px;
font-size: 16px;
color: #484848;
font-weight: 700;
/* display: none; */
}
.hgzMdiscount {
float: right;
}
.hgzMdiscount span {
font-size: 20px;
margin-right: 5px;
font-weight: 400;
color: #f10582;
}
/* 输入手机账号 */
.hgz-phone {
margin-top: 5px;
width: 268px;
height: 30px;
line-height: 30px;
border: 1px solid #c1c1c1;
border-radius: 2px;
position: relative;
display: none;
}
/* 手机号输入框 */
.hgz-phone input {
float: left;
color: #666;
border: 0;
background: #fff;
float: left;
width: 160px;
padding: 3px 10px;
height: 24px;
line-height: 24px;
border-radius: 2px;
font-size: 14px;
}
/* 手机号提醒 */
.hgz-phone span {
float: left;
width: 83px;
height: 30px;
line-height: 30px;
color: #42a7db;
background: 0 0;
border: 0 none;
font-size: 14px;
border-left: 1px solid #e7e7e7;
text-align: center;
}
.hzgLis-con .hgzFor-con .hgzFor-p:hover .hgzFor-collect {
display: block;
}
.hgz .hzgLis-con:hover .hgzFor {
display: block;
}
.hgz .hzgLis-con:hover .hgzFor-p {
display: block;
}
.hgz .hzgLis-con:hover .hgzMain-title {
display: none;
}
.hgz .hzgLis-con:hover .hgz-phone {
display: block;
}
.AA {
height: 22px;
background: #000;
}
.chenyh {
width: 1170px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 50px;
color: #000;
}
.chenyh img {
display: block;
}
.chenyh .today {
margin-right: -30px;
}
.chenyh .centered {
position: absolute;
transform: translate(-50%);
left: 50%;
}
.chenyh .today .first{
position: relative;
float: left;
width: 570px;
height: 350px;
margin: 15px 30px 15px 0 ;
}
/* 新特卖内容动态 */
.chenyh .today .first:hover .bac-mask {
filter: blur(3px);
}
.chenyh .today ul li .bacmask:hover {
animation: flsah 0.8s;
}
@keyframes flsah {
0% {opacity: 1;}
50% {opacity: 0.8;}
100% {opacity: 1;}
}
.chenyh .today .first .content1 {
display: none;
}
.chenyh .today .first:hover .content1 {
display: inline-block;
}
/* 新特卖内容样式 */
.chenyh .today .first .content1 {
border-radius: 5px;
top: 25px;
width: 520px;
height: 300px;
background-color: #fff;
position: absolute;
}
.chenyh .today .first .content1 ul {
width: 468px;
margin: 0 auto;
}
.chenyh .today .first .content1 ul li {
float: left;
width: 140px;
height: 177px;
margin: 15px 8px 10px 8px;
}
.chenyh .today .first .content1 p {
text-align: center;
font-size: 16px;
font-weight: bolder;
margin-top: 5px;
}
.chenyh .today .first .point-line {
position: absolute;
border-top: 1px dotted #000;
width: 100%;
right: 0;
bottom: 66px;
}
.chenyh .today .first .logo {
position: absolute;
left: 30px;
bottom: 10px;
}
.chenyh .today .first .logo img,
.chenyh .today .first .logo a {
float: left;
}
.chenyh .today .first .logo a {
position: absolute;
border: 1px solid #000;
width: 140px;
height: 28px;
left: 315px;
top: 10px;
text-align: center;
line-height: 28px;
}
.chenyh .today .first .content2 {
background: #fff;
opacity: .9;
width: 320px;
height: 100px;
bottom: 25px;
border-radius: 5px;
}
.chenyh .today .first .content2 img {
top: 5px;
}
.chenyh .today .first .content2 strong {
font-size: 14px;
bottom: 23px;
}
.chenyh .today .first .content2 p {
bottom: 6px;
}
/* 左侧导航栏 */
.chenyh .navbar {
position: absolute;
left: 10px;
top: 911px;
padding: 7px;
border-radius: 4px;
line-height: 20px;
border: 1px solid #ccc;
background-color: #fff;
z-index: 8;
}
.chenyh .navbar .icon,
.navbar span {
float: left;
}
.chenyh .navbar a {
display: block;
width: 52px;
height: 20px;
padding: 8px 8px 10px 8px;
border-radius: 4px;
border-bottom: 1px solid #eaeaea;
}
.chenyh .navbar ul li:hover .b {
color: #f10180;
}
.chenyh .navbar ul li .a {
background-color: #f10180;
color: #fff;
}
.chenyh .navbar .icon {
display: block;
font-size: 20px;
width: 18px;
height: 18px;
margin-right: 6px;
}
/* 变异导航 */
.chenyh .leftnavigation{
position: fixed;
top:50%;
transform: translate(0,-50%);
}
.yao .yao-foot {
width: 1170px;
margin: 0 auto;
margin-top: 50px;
/* background-color:#fff; */
}
.yao .yao-foot .yao-vip {
/* margin-left: 250px; */
margin: 0 auto;
}
.yao .yao-foot ul {
width: 960px;
height: 105px;
}
.yao .yao-foot ul li h5 {
vertical-align: middle;
float: left;
margin-left: 25px;
}
.yao .yao-vip li h5 {
width: 70px;
height: 75px;
background: url("../images/footer_vip_.png") no-repeat;
text-indent: -999px;
}
.yao .yao-vip li .whp1 {
background-position: 0 0;
}
.yao .yao-vip li .wph2 {
background-position: -80px 0;
}
.yao .yao-vip li .wph3 {
background-position: -160px 0;
}
.yao .yao-vip li .wph4 {
background-position: -240px 0;
}
.yao .yao-vip li .wph5 {
background-position: -320px 0;
}
.yao .yao-vip li .wph6 {
background-position: -400px 0;
}
.yao .yao-vip li .wph7 {
background-position: -480px 0;
}
.yao .yao-vip li .wph8 {
background-position: -560px 0;
}
.yao .yao-vip li .wph9 {
background-position: -640px 0;
}
.yao .yao-vip li .wph10 {
background-position: -720px 0;
}
.yao .yao-foot .liebiao {
margin-top: 5px;
margin: 0 auto;
margin-bottom: 15px;
overflow: hidden;
}
.yao .yao-foot .liebiao dd a {
color: #999;
}
.yao .yao-foot .liebiao dd:hover {
transform: translate(2px);
}
.yao .yao-foot .liebiao dd a:hover {
color: #f10180;
}
.yao .yao-foot .liebiao dd:hover span {
background: url("../images/footer-hash-3de6f1ae.png") no-repeat;
padding-left: 8px;
background-position: -5px -517px;
}
/* .yao .yao-foot .liebiao, */
/* .yao .yao-foot .liebiao dl {
float: left;
} */
.liebiao-list {
width: 1006px;
overflow: hidden;
margin: 0 auto;
}
.liebiao-1 {
margin-left: 35px;
}
.yao .yao-foot .liebiao dl {
float: left;
width: 145px;
height: 145px;
border-right: 1px solid #eaeaea;
padding-left: 16px;
}
.yao .yao-foot .liebiao dt {
color: #000;
font-size: 12px;
margin-bottom: 5px;
}
.yao .yao-foot .liebiao a .dian {
background-image: url("../images/dian11_14.jpg");
background-repeat: no-repeat;
padding-left: 8px;
background-position: 0 5px;
}
.yao .yao-foot .liebiao .liebiao6 {
border-right: none;
}
.yao .yao-foot .liebiao .liebiao6 dd:hover {
transform: none;
}
.yao .yao-foot .liebiao .liebiao6 dt {
font-size: 12px;
margin-left: 3px;
margin-bottom: 5px;
}
.yao .yao-foot .liebiao .liebiao6 dd {
color: #333;
}
.yao .yao-foot .foot-liebiao {
/* float: left; */
/* margin-left: 160px; */
/* display: inline-block; */
overflow: hidden;
background: white;
}
.yao .yao-foot .foot-liebiao .about {
width: 920px;
height: 30px;
margin: 0 auto;
text-align: center;
background-color: #f10180;
}
.yao .yao-foot .foot-liebiao .about span {
position: relative;
top: 7px;
}
.yao .yao-foot .foot-liebiao .about {
color: #eaeaea;
}
.yao .yao-foot .foot-liebiao .about a {
top: 7px;
bottom: 0;
vertical-align: middle;
padding-left: 2px;
font-size: 10px;
color: #eaeaea;
position: relative;
}
.yao .yao-foot .foot-liebiao .about a:hover {
color: #ccc;
}
.yao .yao-foot .notice {
display: inline-block;
text-align: center;
width: 1170px;
margin: 0 auto;
margin-top: 10px;
}
.yao .yao-foot .notice p .s-notice {
padding-left: 14px;
height: 20px;
width: 20px;
background-image: url("./img/police_icon.png");
}
.yao .yao-foot .notice p a {
color: #999;
}
.yao .yao-foot .notice p a:hover {
/* color: rgb(193, 39, 116); */
color: #f10180;
cursor: pointer;
}
.yao .yao-foot .yao-logo .b-logo {
width: 960px;
margin: 0 auto;
line-height: 40px;
margin-right: -85px;
margin-top: 20px;
}
.b-logo a {
width: 103px;
height: 30px;
/* background-image: url("./img/footer-hash-3de6f1ae.png"); */
text-indent: -999px;
display: inline-block;
}
.b-logo .logo1 {
width: 110px;
background-image: url("../images/22.jpg");
}
.b-logo .logo2 {
width: 110px;
height: 28px;
background-image: url("../images/23.jpg");
}
.b-logo .logo3 {
width: 84px;
background-image: url("../images/24.jpg");
}
.b-logo .logo4 {
width: 85px;
background-image: url("../images/25.jpg");
}
.b-logo .logo5 {
width: 85px;
background-image: url("../images/21.jpg");
}
.b-logo .logo6 {
width: 85px;
height: 28px;
background-image: url("../images/26.jpg");
}
.b-logo .logo7 {
width: 85px;
height: 28px;
background-image: url("../images/25.jpg");
}
js
先引入jQuery
这是左边的固定导航
$(".navigation2").hide();
$(window).scroll(function() {
if($(document).scrollTop() >= 900) {
$(".navigation").hide();
$(".navigation2").show().addClass("leftnavigation");
} else {
$(".navigation2").hide();
$(".navigation").show();
}
})
轮播图
var
oImgbox = $('.imgbox'),
aImg = $('.imgbox img'),
oPre = $('.pre'),
oNext = $('.next'),
count = 0;
$(aImg[0]).clone().appendTo(oImgbox);
oImgbox.css('width',(aImg.length + 1 ) * 1158);
// 图片运动的方法
function toImg(){
oImgbox.stop(true).animate({
left: -1158 * count
},800)
}
// 下一张
function next(){
if(count >=aImg.length){
oImgbox.css('left',0)
count = 1;
}else{
count++;
}
toImg();
}
oNext.click(function(){
next();
})
// 自动切换
var timer = setInterval (function(){
oNext.click();
// console.log(2222);
},2000)
// 上一张
function pre(){
if(count <= 0){
oImgbox.css('left',aImg.length * -1146);
count = aImg.length - 1;
}else{
count --;
}
toImg();
}
oPre.click(function(){
pre();
})
头部的导航下拉固定
$(".shopnav2").hide();
$(window).scroll(function() {
if($(document).scrollTop() >= 180) {
$(".shopnav2").addClass("fixnav").slideDown();
} else {
$(".shopnav2").hide();
}
})
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
