<!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: 0px;
padding: 0px;
}
.da1 {
width: 1537px;
height: 567px;
margin: 200px auto;
text-align: center;
}
.dd1 {
float: left;
background-color: #a09e9e;
width: 294px;
height: 567px;
}
.dd3 {
width: 1540px;
height: 567px;
background-image: url(831e0eb28e01980ebf713f867de5033f.webp);
background-position: center;
background-repeat: no-repeat;
}
ul {
margin-top: 10px;
margin-bottom: 10px;
}
li {
list-style: none;
display: block;
height: 55px;
font-size: 25px;
color: white;
text-align: left;
line-height: 55px;
}
li:hover {
background-color: rgb(233, 176, 19);
}
p {
margin-left: 30px;
font-weight: 400
}
</style>
</head>
<body>
<div class='da1'>
<div class='dd1'>
<ul>
<li>
<p> 手机</p>
</li>
<li>
<p>电视</p>
</li>
<li>
<p>笔记本 平板</p>
</li>
<li>
<p>家电</p>
</li>
<li>
<p>出行 穿戴</p>
</li>
<li>
<p>智能 路由器</p>
</li>
<li>
<p>电源 配件</p>
</li>
<li>
<p>健康 儿童</p>
</li>
<li>
<p>耳机 音响</p>
</li>
<li>
<p>生活 箱包</p>
</li>
</ul>
</div>
<a href='https://www.mi.com/buy/detail?product_id=15565' target='_blank'>
<div class='dd3'>
</div>
</a>
</div>
</body>
</html>
为了观察每个盒子加上去之后的效果,可以提前给他们一个背景颜色,看效果
<!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>
.box {
width: 1200px;
height: 460px;
margin: 0 auto;
background-color: pink;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: right;
;
width: 970px;
height: 460px;
background-color: blue;
}
</style>
</head>
<body>
<div class='box'>
<div class='left'>
</div>
<div class='right'></div>
</div>
</body>
</html>