<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.fzy1 {
background-color: rgba(128, 128, 128, 0.1);
width: 1256px;
height: 615px;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
}
.fzy2 {
float: left;
width: 200px;
height: 614px;
margin: 0 auto;
}
.fzy1 ul li {
margin: 0 0 14px 14px;
height: 300px;
width: 250px;
float: left;
list-style: none;
}
.fzy2:hover {
box-shadow: 0 10px 10px 10px lightgrey;
}
ul li:hover {
box-shadow: 0 10px 10px 10px lightgrey;
}
.fzy {
height: 50px;
width: 1256px;
margin: 0 auto;
line-height: 50px;
font-size: 20px;
}
span a {
text-decoration: none;
}
.zy {
float: right;
}
.zy a:hover {
color: orange;
}
.czc {
float: left;
background-color: #3f3c3c;
width: 250px;
height: 483px;
padding-top: 20px;
padding-bottom: 40px;
}
.czc a {
display: block;
color: #ffff;
text-decoration: none;
line-height: 50px;
padding-left: 35px;
}
.czc a:hover {
background-color: #ff670d;
}
.zp {
height: 545px;
background-color: rgba(128, 128, 128, 0.1);
margin: 0 auto;
width: 1256px;
}
.fzyy {
height: 543px;
float: left;
width: 1006px;
}
</style>
</head>
<body>
<div class="zp">
<div class="czc">
<a href="">手机</a>
<a href="">电视></a>
<a href="">家电></a>
<a href="">笔记本></a>
<a href="">出行></a>
<a href="">耳机></a>
<a href="">健康></a>
<a href="">生活></a>
<a href="">智能></a>
<a href="">电源></a>
</div>
<div class="fzyy"><img src="./图片/微信图片_20221212174316.png" alt=""></div>
</div>
<div class="fzy">手机
<span class="zy"><a href="">查看更多></a></span>
</div>
<div class="fzy1">
<div class="fzy2"> <img src="./图片/1.png" alt=""></div>
<ul>
<li>
<a href=""><img src="./图片/2.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/3.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/4.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/5.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/6.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/7.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/8.png" alt=""></a>
</li>
<li>
<a href=""><img src="./图片/9.png" alt=""></a>
</li>
</ul>
</div>
</body>
</html>