效果：
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;
}