html2-CSDN博客

本文链接：https://blog.csdn.net/yushangjun/article/details/40094129

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
div{
width: 1160px;
height:260px;
margin: auto;
background-color:white;
}
.div1{
width: 1160px;
height:50px;
background-color:white;


}
.div1-3{
position: relative;
top: 10px;

}
.div1-1{
font-size: 25px;
color: #6F666B;
cursor: pointer;

position: relative;
top: 5px;
left: 10px;
}
.div1-2{
font-size: 20px;
color: #6F666B;
cursor: pointer;
word-spacing: 76px;
position: relative;
left: 80px;
top: 5px;
}
.div2{
width: 210px;
height:360px;
background-color:white;
float:left;

}
.div2-1{
cursor: pointer;
list-style-type: none;
font-size: 5px;
line-height: 25px;

/*position: absolute;
left: 210px;*/
padding:0px;
margin:0px;
}
.div2-2{
position: relative;
top: -350px;
float: right;
}
.div3{
width: 160px;
height: 360px;
float: left;
}
.div3-1{
width: 160px;
height:180px;
background-color:#CBC8C3;

}
.div3-2{
width: 160px;
height:180px;
background-color:#6F666B;
float:left;
}
.div4{
width:160px;
height:360px;
background-color:#CBC8C3;
float:left;
}
.div5{
width: 160px;
height: 360px;
float: left;
}
.div5-1{
width: 160px;
height:180px;
background-color:#CBC8C3;

}
.div5-2{
width: 160px;
height:180px;
background-color:#CBC8C3;
float:left;
}
.div6{
width:160px;
height:180px;
/* background-color:yellow; */
float:left;
}
.div7{
width: 160px;
height: 360px;
float: left;
}
.div7-1{
width: 160px;
height:180px;
/* background-color:#845343;*/

}
.div7-2{
width: 160px;
height:105px;
background-color:blue;
float:left;
}

li:hover{background-color: blue}
a:hover{background-color: blue}
.div1-1:hover{background-color: blue}
</style>
</head>
<body>
<div class="div">
<div class="div1">
<img src="3f.jpg" class="div1-3">
<span class="div1-1">服饰鞋包</span>
<span class="div1-2"><a>特价商品</a> <a>品牌男装</a> <a>品牌女装</a> <a>鞋靴箱包</a> <a>运动户外</a></span>

</div>
<div class="div2">

<ul class="div2-1">
<li>男装</li>
<li>女装</li>
<li>服装配饰</li>
<li>内衣</li>
<li>女鞋</li>
<li>男鞋</li>
<li>设计师</li>
<li>功能箱包</li>
<li>潮流箱包</li>
<li>时尚男包</li>
<li>户外装备</li>
<li>户外鞋服</li>
<li>运动器械</li>
<li>新版运动馆</li>
</ul>
<img src="1.jpg" class="div2-2">
</div>
<div class="div3">
<div class="div3-1">
<img src="2.jpg">
</div>
<div class="div3-2">
<img src="3.jpg">
</div>
</div>
<div class="div4">
<img src="4.jpg">
</div>
<div class="div5">
<div class="div5-1">
<img src="5.jpg">
</div>
<div class="div5-2">
<img src="6.jpg">
</div>
</div>
<div class="div6">
<img src="7.jpg">
</div>
<div class="div7">
<div class="div7-1">
<img src="8.jpg">
</div>
<div class="div7-2">
<img src="9.jpg">
</div>
</div>


</div>
</body>
</html>