<!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>lol</title>
<style>
*{
margin: 0;
padding: 0;
}
.banner{
width: 820px;
height: 380px;
background-color: blue;
}
.banner_img{
width: 820px;
height: 340px;
background-color: red;
}
.banner_nav{
width: 820px;
height: 40px;
background-color: green;
}
.banner_nav li{
width: 164px;
height: 40px;
float: left;
list-style: none;
font-size: 12px;
text-align: center;
line-height:40px;
background-color: #e3e2e2;
}
.banner_nav .active{
background-color: white;
color: #ab8e66;
border-bottom: 2px solid #cea861;
height: 38px;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner_img">
< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220428/beaa2ebcdb1a4bbf808ee901fc80032c.jpeg" alt="">
</div>
<div class="banner_nav">
<ul>
<li class="active">EDG冠军战队皮肤预售 </li>
<li>精选皮肤限时五折</li>
<li>EDG冠军皮肤预售直播</li>
<li>杰作宝箱里程碑上线</li>
<li>开启你的赏金之旅
</li>
</ul>
</div>
</div>
</body>
</html>