效果图：
代码展示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>仿小米商城模块</title>
<style type="text/css">
.container_1 {
width: 1226px;
/* border: 1px solid red; */
margin: auto;
}
.box_1 {
width: 231px;
height: 165px;
background-color: #5F5750;
/* border: 1px solid black; */
float: left;
}
[class^="block"] {
width: 76px;
height: 82px;
float: left;
opacity: 0.5;
}
[class^="block"]:hover {
opacity: 1;
}
.box_1 a {
display: inline-block;
width: 70px;
height: 63px;
font-size: 12px;
text-decoration: none;
color: #FFFFFF;
padding: 18px 0px 0px;
text-align: center;
}
[class^="img_block"] {
width: 24px;
height: 24px;
margin: 0px 23px 4px;
}
[class^="h_line"] {
width: 1px;
height: 70px;
background-color: #665E57;
margin-top: 6px;
float: left;
}
[class^="w_line"] {
width: 64px;
height: 1px;
background-color: #665E57;
margin-left: 6px;
float: left;
}
.w_line_1,.w_line_2 {
margin-right: 6px;
}
.box_2,.box_3,.box_4 {
width: 316px;
height: 165px;
margin-left: 15px;
float: left;
}
[class^="p_box"] {
width: 316px;
}
[class^="p_box"]:hover {
box-shadow: 10px 10px 20px #ccc;
transition: 1s;
}
.box_5 {
width: 1226px;
height: 120px;
margin-top: 32px;
padding-top: 32px;
background-color: #F5F5F5;
float: left;
}
.big_box {
width: 1226px;
}
</style>
</head>
<body>
<div class="container_1">
<div class="box_1">
<div class="block_1">
<a href="">
<img class="img_block1" src="./img/保障服务.png" alt="">
保障服务
</a>
</div>
<div class="h_line_1"></div>
<div class="block_2">
<a href="">
<img class="img_block1" src="./img/企业团购.png" alt="">
企业团购
</a>
</div>
<div class="h_line_2"></div>
<div class="block_3">
<a href="">
<img class="img_block1" src="./img/F码通道.png" alt="">
F码通道
</a>
</div>
<div class="w_line_1"></div>
<div class="w_line_2"></div>
<div class="w_line_2"></div>
<div class="block_4">
<a href="">
<img class="img_block1" src="./img/米粉卡.png" alt="">
米粉卡
</a>
</div>
<div class="h_line_3"></div>
<div class="block_5">
<a href="">
<img class="img_block1" src="./img/以旧换新.png" alt="">
以旧换新
</a>
</div>
<div class="h_line_4"></div>
<div class="block_6">
<a href="">
<img class="img_block1" src="./img/话费充值.png" alt="">
话费充值
</a>
</div>
</div>
<div class="box_2">
<a href="#">
<img class="p_box_1" src="./img/K60.jpg" alt="">
</a>
</div>
<div class="box_3">
<a href="#">
<img class="p_box_2" src="./img/mi13.jpg" alt="">
</a>
</div>
<div class="box_4">
<a href="#">
<img class="p_box_3" src="./img/mimix.jpg" alt="">
</a>
</div>
<div class="box_5">
<a href="#">
<img class="big_box" src="./img/米家.webp.jpg" alt="">
</a>
</div>
</div>
</body>
</html>
