模仿唯品会界面
<!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();}})
