效果：
http://115.159.53.185/test/vip/
html：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/header.css" /><link rel="stylesheet" href="css/classify.css" /><link rel="stylesheet" href="css/banner.css" /><link rel="stylesheet" href="css/content.css" /><link rel="stylesheet" href="css/navRight.css" /></head><body><div class="navBox"><div class="nav"><ul class="navList"><li class="navItem area"><a>北京</a></li><li class="navItem"><a>更多</a></li><li class="navItem"><a>手机版</a><span>/</span></li><li class="navItem"><a>客户服务</a><span>/</span></li><li class="navItem"><a>会员俱乐部</a><span>/</span></li><li class="navItem"><a>我的收藏</a><span>/</span></li><li class="navItem"><a>我的订单</a><span>/</span></li><li class="navItem"><a>注册</a><span>/</span></li><li class="navItem"><a>请登录</a><span>/</span></li></ul></div></div><div class="header"><img src="img/logo.png" class="logo"/><img src="img/package.png"/><img src="img/sendBack.png"/><img src="img/7days.png"/><img src="img/100good.png"/></div><div class="classify"><ul class="classList"><li class="classItem">首页</li><li class="classItem">唯品国际</li><li class="classItem">母婴</li><li class="classItem">居家</li><li class="classItem">男士</li><li class="classItem">美妆</li><li class="classItem">生活</li><li class="classItem">金融</li><li class="classItem">更多</li><li class="classItem">预告</li><li class="classItem otherClass">分类</li></ul></div><div class="banner"><div class="imageBox"><ul class="imageList"><li class="item"><p class="title">新人专享二重礼</p><img src="img/2.jpg"/></li><li class="item"><p class="title">暖心鞋包 让时尚升温</p><img src="img/3.jpg"/></li><li class="item"><p class="title">哥弟女装 0.8折起</p><img src="img/4.jpg"/></li><li class="item"><p class="title">罗莱集团VIP大牌日</p><img src="img/5.jpg"/></li><li class="item"><p class="title">暖肤美妆 最高满199减100</p><img src="img/6.jpg"/></li></ul></div></div><div class="content"><p class="title">新特卖每日早10晚8上新</p><ul class="clothes"><li class="item"><img src="img/clothing.png" class="img"/><img src="img/clothingDetail.png" class="detaiImg"/></li><li class="item"><img src="img/clothing.png" class="img"/><img src="img/clothingDetail.png" class="detaiImg"/></li><li class="item"><img src="img/clothing.png" class="img"/><img src="img/clothingDetail.png" class="detaiImg"/></li><li class="item"><img src="img/clothing.png" class="img"/><img src="img/clothingDetail.png" class="detaiImg"/></li></ul></div><div class="navRight"><ul class="list"><li class="item"><img src="img/user.png"/><a>账号</a></li><li class="item"><img src="img/money.png"/><a>券</a></li><li class="item"><img src="img/love.png"/><a>品牌</a></li><li class="item"><img src="img/star.png"/><a>商品</a></li><li class="item car"><img src="img/lock.png"/><a>购<br />物<br />袋</a></li><li class="item"><img src="img/pen.png"/></li></ul></div><div class="navRightSmall"><img src="img/lock.png"/><a>购<br />物<br />袋</a></div></body></html>
css
.navRight{width: 40px;height: 100%;position: fixed;right: 0;top: 0;background: rgb(38,38,38);z-index: 100;}.navRight .list{list-style: none;color: #999;font-size: 12px;text-align: center;}.navRight .list .item img{width: 100%;}.navRight .list .item{margin: 20px 0;}.navRight .list .item:nth-child(1){margin-top: 70px;}.navRight .list .car{border-top: 1px solid #555;line-height: 18px;margin-bottom: 100px;padding-top: 10px;}.navRightSmall{width: 40px;height: 150px;background: rgb(38,38,38);position: fixed;top: 300px;right: 0;color: #999;text-align: center;line-height: 18px;z-index: 99;display: none;}.navRightSmall img{width: 100%;}@media only screen and (max-width: 960px) {.navRight{display: none;}.navRightSmall{display: block;}}.banner{height: 450px;background-image: url(../img/bg.jpg);background-position: center center;background-repeat: no-repeat;background-size: 2000px 450px;}.banner .imageBox{width: 960px;height: 400px;background: rgba(255,255,255,0.9);margin: 0 auto;position: relative;top: 50px;}.imageBox .imageList{width: 100%;height: 40px;background: white;position: absolute;bottom: 0;}.imageList .item{float: left;width: 20%;list-style: none;color: #666;line-height: 40px;text-align: center;font-size: 12px;}.imageList .item img{width: 940px;height: 350px;position: absolute;left: 10px;top: -350px;opacity: 0;transition: all 1s;z-index: 5;}.imageList .item:nth-child(1) img{opacity: 1;}.imageList .item:hover img{opacity: 1;z-index: 7;}.classify{height: 40px;background:rgb(244,0,128);}.classify .classList{width: 960px;height: 100%;margin: 0 auto;list-style: none;color: white;line-height: 40px;}.classList .classItem{float: left;margin: 0 10px;}.classList .otherClass{float: right;}.content{width: 960px;border-top: 1px solid lightgray;margin: 100px auto 0;position: relative;}.content .title{width: 320px;height: 50px;background: white;text-align: center;line-height: 50px;font-size: 25px;color: #666;position: absolute;top: -25px;left: 320px;}.content .clothes{margin-top: 50px;list-style: none;}.clothes .item{width: 50%;height: 300px;float: left;position: relative;}.clothes .item img{position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}.clothes .item .img{width: 95%;height: 95%;}.clothes .item:hover .img{filter: blur(3px);-webkit-filter: blur(3px);}.clothes .item .detaiImg{width: 80%;height: 80%;border-radius: 5px;-webkit-border-radius: 5px;display: none;}.clothes .item:hover .detaiImg{display: block;}.header{width: 960px;height: 90px;margin: 0 auto;}.header img{height: 100%;float: right;}.header .logo{float: left;}.navRight{width: 40px;height: 100%;position: fixed;right: 0;top: 0;background: rgb(38,38,38);z-index: 100;}.navRight .list{list-style: none;color: #999;font-size: 12px;text-align: center;}.navRight .list .item img{width: 100%;}.navRight .list .item{margin: 20px 0;}.navRight .list .item:nth-child(1){margin-top: 70px;}.navRight .list .car{border-top: 1px solid #555;line-height: 18px;margin-bottom: 100px;padding-top: 10px;}.navRightSmall{width: 40px;height: 150px;background: rgb(38,38,38);position: fixed;top: 300px;right: 0;color: #999;text-align: center;line-height: 18px;z-index: 99;display: none;}.navRightSmall img{width: 100%;}@media only screen and (max-width: 960px) {.navRight{display: none;}.navRightSmall{display: block;}}*{padding: 0;margin: 0;}.navBox{height: 30px;background: rgb(245,245,245);}.navBox .nav{width: 960px;height: 100%;margin: 0 auto;}.nav .navList{list-style: none;width: 100%;height: 100%;}.navList .navItem{float: right;line-height: 30px;font-size: 14px;color: rgb(102,102,102);cursor: pointer;font-size: 12px;}.navList .area{float: left;}.navItem a{margin: 0 10px;}.navItem span{font-size: 12px;color: rgb(102,102,102);}.navItem:hover{color: white;}
