题目
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one{
width: 246px;
height: 174px;
float: left;
}
.one ul{
margin: 0;
padding: 0;
}
.one li{
width: 80px;
height: 85px;
background-color: rgba(95,87,80,0.7);
list-style: none;
float: left;
border: 0.01px solid white;
}
.one img{
width: 24px;
height: 24px;
margin: 0 auto 1px;
display: block;
}
.one span{
font-size: 12px;
margin-left: 16px;
color: white;
}
.one div{
margin-top: 18px;
}
.two{
width: 998px;
height: 170px;
float: left;
}
.two ul{
margin: 0;
padding: 0;
float: left;
}
.two li{
list-style: none;
width: 316px;
height: 170px;
padding-left: 14px;
float: left;
}
.two img{
width: 316px;
height: 170px;
}
.head-two{
width: 100%;
height: 130px;
margin-top: 22px;
float: left;
}
.head-two img{
width: 1226px;
height: 120px;
}
</style>
</head>
<body>
<div id="center">
<div class="head">
<div class="one">
<ul>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="加载失败">
<span>保障服务</span>
</div>
</li>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="加载失败">
<span>企业团购</span>
</div>
</li>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="加载失败">
<span>F码通道</span>
</div>
</li>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="加载失败">
<span style="margin-left: 21px;">米粉卡</span>
</div>
</li>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="加载失败">
<span>以旧换新</span>
</div>
</li>
<li>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="加载失败">
<span>话费充值</span>
</div>
</li>
</ul>
</div>
<div class="two">
<ul>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" alt="加载失败">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" alt="加载失败">
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" alt="加载失败">
</li>
</ul>
</div>
</div>
<div class="head-two">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fffc6ee6d2c0867a8e3dee2c65c6067.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="加载失败">
</div>
</div>
</body>
</html>
代码展示
