- 纯粹HTML+css（达到样式统一，没有用js实现功能等）
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="header">
<div class="userIfoCon">
<ul>
<div>
<i></i>
<p>蘑菇街首页</p>
</div>
<ol>
<li>
<a href="#">登录</a>
</li>
<b></b>
<i class="dingdan"></i>
<li>
<a href="#">我的订单</a>
</li>
<b></b>
<i class="shoppingcat"></i >
<li>
<a href="#">购物车</a>
</li>
<b></b>
<li>
<a href="#">客户服务</a>
<span></span>
</li>
<b></b>
<i class="houtai"></i>
<li>
<a href="#">商家后台</a>
<span></span>
</li>
</ol>
</ul>
</div>
<div class="searchCon">
<div>
<a href="#"><img src="img/img-6.jpg"></a>
</div>
<ul>
<li class="searchbar">
<form>
<div>
<span>搜商品</span>
<i></i>
</div>
<input class="shuru" type="text">
<input class="btn" type="image" src="img/btn.jpg">
</form>
</li>
<li class="hotwords">
<span>口红</span>
<span class="red">连衣裙</span>
<span>拖鞋</span>
<span>包包</span>
<span class="red">外套</span>
<span>泳衣</span>
<span>手机壳</span>
<span>书包</span>
<span>卫衣</span>
<span class="red">睡衣</span>
</li>
</ul>
<ol></ol>
</div>
</div>
<div class="rightNav">
<div><img src="img/rightnav.png"></div>
</div>
<div class="contentCon">
<div class="navCon">
<div>
<i><img src="img/img-10.jpg"></i>
<p><a>主题市场</a></p>
<ol class="subnav" >
<li>
<span>上衣</span>
<a class="red " href="#">T恤</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">夏上新</a>
<a class="border red" href="#">入夏套装</a>
<i><img src="img/hot.png"></i>
</li>
<li>
<span>裙子</span>
<a href="#">套装</a>
<i><img src="img/hot.png"></i>
<a class="red border" href="#">连衣裙</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">高腰裙</a>
<b></b>
</li>
<li>
<span>裤子</span>
<a class="red" href="#">牛子裤 </a>
<a class="red border" href="#">打底裤</a>
<a class="red border" href="#">休闲裤</a>
</li>
<li>
<span>女鞋</span>
<a class="red" href="#">休闲运动</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">单鞋</a>
<a class="border" href="#">凉鞋</a>
</li>
<li>
<span>包包</span>
<a href="#">双肩包</a>
<i><img src="img/hot.png"></i>
<a class="red border" href="#">斜挎包</a>
<a class="border" href="#">迷你小包</a>
</li>
<li>
<span>男友</span>
<a href="#">潮T </a>
<a class="border" href="#">休闲裤</a>
<a class="border" href="#">休闲鞋</a>
<i><img src="img/hot.png"></i>
</li>
<li>
<span>运动</span>
<a href="#">运动套装</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">运动鞋</a>
<a class="red border" href="#">性感泳衣</a>
</li>
<li>
<span>配饰</span>
<a href="#">棒球帽</a>
<i><img src="img/hot.png"></i>
<a class="red border" href="#">连耳饰</a>
<a class="border" href="#">墨镜</a>
</li>
<li>
<span>美妆</span>
<a href="#">护肤套装 </a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">面膜</a>
<i><img src="img/hot.png"></i>
<a class="red border" href="#">防晒</a>
</li>
<li>
<span>家居</span>
<a href="#">家居鞋</a>
<a class="border" href="#">四件套</a>
<a class="border" href="#">小家具</a>
</li>
<li>
<span>内衣</span>
<a href="#">少女内衣</a>
<a class="border" href="#">睡衣</a>
<a class="border" href="#">内裤</a>
</li>
<li>
<span>母婴</span>
<a href="#">新生儿</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">孕妇装</a>
<a class="red border" href="#">萌宝童鞋</a>
</li>
<li>
<span>电器</span>
<a class="red" href="#">手机壳</a>
<a class="border" href="#">卷发棒</a>
<i><img src="img/hot.png"></i>
<a class="border" href="#">移动电源</a>
</li>
<li>
<span>食品</span>
<a href="#">超值零食</a>
<i><img src="img/hot.png"></i>
<a class="red border" href="#">进口</a>
<a class="border" href="#">怀旧零食</a>
</li>
</ol>
</div>
<ol>
<a href="#" class="navCon-ol-a">品牌团购</a>
<a href="#">限时快枪</a>
</ol>
</div>
<div class="bill">
<div class="banner">
<ol>
<li class="advcon1"></li>
<li class="advcon2"></li>
</ol>
</div>
</div>
<div class="contentCon1">
<div class="contentCon1-1">
<ul>
<li>
<i></i>
<input type="image" src="img/img-12.jpg"></input>
</li>
<ol>
<div>
<i class="wow slideInDown"><a href="#"><img src="img/img-13.jpg"></a></i>
<p>显瘦格子吊带连衣裙</p>
<span>
<p>¥79.90</p>
<b>¥165.00</b>
</span>
</div>
<div>
<i data-wow-delay="0.5s" class="wow slideInDown"><a href="#"><img src="img/img-14.jpg"></a></i>
<p>Chic同款潮搭撞色马...</p>
<span>
<p>¥39.90</p>
<b>¥82.86</b>
</span>
</div>
<div>
<i data-wow-delay="1.0s" class="wow slideInDown"><a href="#"><img src="img/img-15.jpg"></a></i>
<p>郑爽同款徽章绣线香...</p>
<span>
<p>¥45.00</p>
<b>¥84.29</b>
</span>
</div>
<div style="margin-right: 15px;">
<i data-wow-delay="1.5s" class="wow slideInDown"><a href="#"><img src="img/img-16.jpg"></a></i>
<p>针织卫衣搭配松紧腰...</p>
<span>
<p>¥89.00</p>
<b>¥150.00</b>
</span>
</div>
<input type="image" src="img/img-17.jpg"></input>
</ol>
</ul>
<ol></ol>
</div>
</div>
<div class="contentCon2">
<div style="width: 470px;"><a href="#"><img src="img/img-18.jpg"></a></div>
<div><a href="#"><img src="img/img-19.jpg"></a></div>
<div><a href="#"><img src="img/img-20.jpg"></a></div>
<div style="margin-right: 0;"><a href="#"><img src="img/img-21.jpg"></a></div>
</div>
<div class="contentCon3">
<ul>
<p>女装</p>
<div>
<li>印花T恤</li>
<li>爆款套装</li>
<li >连衣裙</li>
<li>休闲裤</li>
<li>衬衫</li>
</div>
</ul>
<ol>
<li class="shufu"></li>
<div class="div3-1">
<li class="wow slideInUp"><img src="img/b-1.jpg"></li>
<li data-wow-delay="0.5s" class="wow slideInUp"><img src="img/b-2.jpg"></li>
<li data-wow-delay="1s" class="wow slideInUp"><img src="img/b-3.jpg"></li>
<li data-wow-delay="1.5s" class="wow slideInUp"><img src="img/b-4.jpg"></li>
</div>
<div class="div3-2">
<li><img src="img/div3-2-1.jpg"></li>
<li><img src="img/div3-2-2.jpg"></li>
<li><img src="img/div3-2-3.jpg"></li>
</div>
<div class="div3-3">
<li><img src="img/div3-3-1.jpg"></li>
<li><img src="img/div3-3-2.jpg"></li>
<li><img src="img/div3-3-3.jpg"></li>
<li><img src="img/div3-3-4.jpg"></li>
</div>
</ol>
</div>
<div class="contentCon4">
<ul>
<p>内衣&配饰</p>
<div>
<li>睡衣</li>
<li>短袜</li>
<li>内衣套装</li>
<li>棒球帽</li>
<li>手表</li>
</div>
</ul>
<ol>
<li><img src="img/shufu2.png"></li>
<li><img src="img/medium.jpg"></li>
<li class="last4"><img src="img/right.jpg"></li>
</ol>
</div>
<div class="contentCon5">
<ul>
<p>家居&家电</p>
<div>
<li>家纺好货</li>
<li>收纳宝盒</li>
<li>手机壳</li>
<li>美发神器</li>
<li>充电宝</li>
</div>
</ul>
<ol>
<li><img src="img/shufu3.png"></li>
<li><img src="img/medium2.jpg"></li>
<li class="last4"><img src="img/right2.jpg"></li>
</ol>
</div>
</div>
<div class="footer">
<li><img src="img/foot.jpg"></li>
</div>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.userIfoCon{
background-color: #f2f2f2;
}
.userIfoCon>ul{
width: 1200px;
margin: auto;
overflow: hidden;
}
.userIfoCon>ul>div{
float: left;
}
.userIfoCon>ul>div>i{
float: left;
width: 15px;
height: 12px;
background: url(../img/img-1.jpg) center no-repeat;
margin: 9px 5px 0 20px;
}
.userIfoCon>ul>div>p{
font-family: "微软雅黑";
font-size: 12px;
float: right;
color: #333;
line-height: 30px;
}
.userIfoCon>ul>ol{
float: right;
}
.userIfoCon>ul>ol>li{
float: left;
line-height: 35px;
}
.userIfoCon>ul>ol>i{
float: left;
width: 19px;
height: 19px;
margin: 8px 5px 0 0;
}
.userIfoCon>ul>ol>b{
float: left;
width: 1px;
height: 14px;
background-color: #ddd;
margin: 10px 12px 0 12px;
}
.userIfoCon>ul>ol>li>a{
font-family: "微软雅黑";
font-size: 12px;
color: #333333;
float: left;
}
.userIfoCon>ul>ol>li>span{
float: left;
width: 9px;
height: 9px;
margin-top: 12px ;
margin-left: 5px;
background: url(../img/img-5.jpg);
}
.dingdan{
background: url(../img/img-4.jpg) center no-repeat;
}
.shoppingcat{
background: url(../img/img-3.jpg) center no-repeat;
}
.houtai{
background: url(../img/img-2.jpg) center no-repeat;
}
.searchCon{
width: 1200px;
margin: auto;
overflow: hidden;
margin-top: 12px;
}
.searchCon>div{
width: 141px;
height:44px;
float: left;
margin-top: 11px;
}
.searchCon>ul{
width: 486px;
height :56px;
float: left;
margin: 8px 0 0 219px;
}
.searchCon>ol{
width: 166px;
height: 67px;
float: right;
background: url(../img/img-8.jpg) center no-repeat;
}
.searchbar{
border-left: 1px solid #ff0078;
}
.searchbar>form{
display: block;
overflow: hidden;
}
.searchbar>form>div{
width: 63px;
height: 34px;
float: left;
border-top: 1px solid #ff0087;
border-bottom: 1px solid #ff0087;
}
.searchbar>form>div>span{
font-family: "微软雅黑";
font-size: 12px;
line-height: 35px;
color: #ff0078;
float: left;
width: 47px;
text-align: right;
line-height: 34px;
}
.searchbar>form>div>i{
float: right;
width: 10px;
height: 8px;
background: #0F0;
margin: 15px 4px 0 0;
background: url(../img/img-7.jpg) center no-repeat;
}
.searchbar>form>input{
float: left;
}
.shuru{
width: 320px;
height: 34px;
border: none;
border-top: 1px solid #ff0087;
border-bottom: 1px solid #ff0087;
}
.btn{
width: 101px;
height: 36px;
border: none;
border: 1px solid #ff087;
border-radius: 0 4px 4px 0;
}
.hotwords>span{
font-family: "微软雅黑";
font-size: 12px;
color: #333333;
padding-left: 1px;
padding-right: 6px;
}
.red{
color: #ff0087 !important;
}
.navCon{
width: 1190px;
height: 42px;
margin: auto;
margin-top: 23px;
}
.navCon>div{
width: 257px;
background-color: #ff0087;
border-radius: 10px 10px 0px 0px;
float: left;
border-bottom: 1px solid #ff0087;
position: relative;
}
.navCon>div>i{
float: left;
width: 19px;
height: 19px;
margin: 15px 6px 0 6px;
}
.navCon>div>p>a{
font-family: "微软雅黑";
font-size: 18px;
line-height: 42px;
color: #fff;
}
.border{
border-left: 1px solid #fff;
padding-left: 6px;
}
.subnav{
width: 100%;
position: absolute;
top: 44px;
height: 440px;
left: 0;
background-color: rgba(255,255,255,0.8) ;
}
.subnav>li>span{
font-family: "微软雅黑";
font-size: 12px;
color: #333;
font-weight: bold;
margin-left: 20px;
}
.subnav>li>a{
font-family: "微软雅黑";
font-size: 10px;
color: #333;
line-height: 30px;
}
.subnav>li>b{
width: 11px;
height: 12px;
background-color: #fff;
}
.subnav>li>b{
float: left;
width: 1px;
height: 14px;
background-color: #fff;
}
.contentCon{
background-color: #f5f5f5;
}
.navCon>ol{
float:left;
}
.navCon>ol>a{
font-family: "微软雅黑";
font-size: 18px;
line-height: 42px;
margin-left: 34px;
color:#323335 ;
}
.navCon-ol-a{
border-right:1px solid #ddd ;
padding-right: 34px;
}
.bill{
width: 100%;
height:440px;
border-top: 2px solid #ff0087;
border-bottom: 15px solid #f5f5f3;
background: url(../img/banner.png) center no-repeat;
}
.banner>ol{
width: 1200px;
height:440px;
margin: auto;
position: relative;
}
.banner>ol>li{
width: 168px;
height: 205px;
background-color: #ffecfe;
position: absolute;
right: 0;
}
.advcon1{
margin-top:10px;
background: url(../img/a-1.jpg) center no-repeat;
}
.advcon2{
margin-top:225px;
background: url(../img/a-2.jpg) center no-repeat;
}
.contentCon1{
width: 1190px;
margin: auto;
overflow: hidden;
}
.contentCon1-1>ul{
width: 1190px;
overflow: hidden;
border-bottom: 10px solid #f5f5f5;
}
.contentCon1-1>ul>li{
width: 255px;
overflow: hidden;
position: relative;
float: left;
}
.contentCon1-1>ul>li>i{
float: left;
width: 230px;
height: 294px;
background: url(../img/img-11.jpg) center no-repeat;
}
.contentCon1-1>ul>li>input{
width: 30px;
height: 294px;
position: absolute;
background: url(../img/img-12.jpg);
}
.contentCon1-1>ul>ol{
overflow: hidden;
width: 935px;
height: 294px;
background-color: #fff;
float: left;
}
.contentCon1-1>ul>ol>div{
width: 190px;
float: left;
margin-right: 40px;
margin-top: 30px;
}
.contentCon1-1>ul>ol>div>i{
width: 190px;
height: 190px;
float: left;
margin-bottom: 6px;
}
.contentCon1-1>ul>ol>div>p{
font-family: "微软雅黑";
font-size: 16px;
line-height: 36px;
text-align: center;
color: #666;
}
.contentCon1-1>ul>ol>div>span{
width: 190px;
height: 32px;
display: block;
}
.contentCon1-1>ul>ol>div>span>p{
font-family: "微软雅黑";
font-size: 22px;
margin-left: 10px;
color: #ff0087;
float: left;
}
.contentCon1-1>ul>ol>div>span>b{
font-family: "微软雅黑";
font-size: 14px;
margin-left: 45px;
color: #a8aaa9;
float: left;
margin-top: 5px;
text-decoration: line-through;
}
.contentCon1-1>ul>ol>input{
width: 25px;
height: 42px;
float: right;
margin-top: 122px;
}
.contentCon2{
overflow: hidden;
width: 1190px;
margin: auto;
}
.contentCon2>div{
width: 230px;
float: left;
margin-right: 10px;
overflow: hidden;
height: 150px;
}
.firstCon{
width: 470px;
}
.lastCon{
margin-right: 0px;
}
.contentCon3{
border-top: 48px solid #f5f5f5;
width: 1190px;
margin: auto;
}
.contentCon3>ul{
width: 1190px;
overflow: hidden;
background-color: #f5f5f5;
padding-bottom: 12px;
}
.contentCon3>ul>p{
width: 60px;
line-height: 20px;
font-family: "微软雅黑";
font-weight: bold;
font-size: 20px;
margin-right: 26px;
float: left;
border-left: 8px solid #ff0087;
padding-left: 10px;
margin: 0 16px 0 0;
}
.contentCon3>ul>div{
width: 420px;
float: left;
overflow: hidden;
}
.contentCon3>ul>div>li{
font-family: "微软雅黑";
font-size: 12px;
float: left;
line-height: 16px;
border-right:2px solid black;
padding: 0 20px;
}
.contentCon3>ol{
width: 1190px;
height: 624px;
display: block;
background-color: #f5f5f5;
}
.div3-1{
overflow: hidden;
}
.div3-1>li{
float: left;
margin-left: 9px;
}
.shufu{
width: 230px;
height: 625px;
background: url(../img/shufu.png) center no-repeat;
float: left;
}
.div3-2{
overflow: hidden;
}
.div3-2>li{
float: left;
margin-left: 9px;
}
.div3-3{
overflow: hidden;
}
.div3-3>li{
float: left;
margin-left: 9px;
}
.contentCon4{
border-top: 48px solid #f5f5f5;
width: 1190px;
margin: auto;
}
.contentCon4>ul{
width: 1190px;
overflow: hidden;
background-color: #f5f5f5;
padding-bottom: 12px;
}
.contentCon4>ul>p{
width: 112px;
line-height: 20px;
font-family: "微软雅黑";
font-weight: bold;
font-size: 20px;
margin-right: 26px;
float: left;
border-left: 8px solid #ff0087;
padding-left: 10px;
margin: 0 16px 0 0;
}
.contentCon4>ul>div{
width: 420px;
float: left;
overflow: hidden;
}
.contentCon4>ul>div>li{
font-family: "微软雅黑";
font-size: 12px;
float: left;
line-height: 16px;
border-right:2px solid black;
padding: 0 20px;
}
.contentCon4>ol{
width: 1190px;
height: 624px;
display: block;
background-color: #f5f5f5;
overflow: hidden;
}
.contentCon4>ol>li{
float: left;
margin-right: 9px;
}
.last4{
float: right;
margin-right: 0 !important;
}
.contentCon5{
width: 1190px;
margin: auto;
}
.contentCon5>ul{
width: 1190px;
overflow: hidden;
background-color: #f5f5f5;
padding-bottom: 12px;
}
.contentCon5>ul>p{
width: 112px;
line-height: 20px;
font-family: "微软雅黑";
font-weight: bold;
font-size: 20px;
margin-right: 26px;
float: left;
border-left: 8px solid #ff0087;
padding-left: 10px;
margin: 0 16px 0 0;
}
.contentCon5>ul>div{
width: 500px;
float: left;
overflow: hidden;
}
.contentCon5>ul>div>li{
font-family: "微软雅黑";
font-size: 12px;
float: left;
line-height: 16px;
border-right:2px solid black;
padding: 0 20px;
}
.contentCon5>ol{
width: 1190px;
height: 624px;
display: block;
background-color: #f5f5f5;
overflow: hidden;
}
.contentCon5>ol>li{
float: left;
margin-right: 9px;
}
.last5{
float: right;
margin-right: 0 !important;
}
.footer{
background-color: #F5F5F5;
}
.footer>li{
width: 1427px;
height: 307px;
margin: auto;
}
.rightNav{
width: 38px;
height: 3460px;
background-color: #202020;
float: right;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 1864px;
}
.rightNav>div{
margin-top: 100px;
position: fixed;
}
