vip唯品会仿页
效果：
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; }總結
- 上一篇： python re模块_python 正
- 下一篇： 小红书账号怎么做起来的呢？干货！快收藏起