![](https://img-blog.csdnimg.cn/direct/24a8855308034a67bb23aae42471e720.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../font/iconfont.css">
<link rel="stylesheet" href="./homework04.css">
</head>
<body>
<div class="top-nav">
<div class="container">
<div class="top-nav-left">
<a href="#">小米官网</a>
<span>|</span>
<a href="#">小米商城</a>
<span>|</span>
<a href="#">小米澎湃OS</a>
<span>|</span>
<a href="#">ioT</a>
<span>|</span>
<a href="#">云服务</a>
<span>|</span>
<a href="#">天星教科</a>
<span>|</span>
<a href="#">有品</a>
<span>|</span>
<a href="#">小爱开放平台</a>
<span>|</span>
<a href="#">资质证照</a>
<span>|</span>
<a href="#">协议规则</a>
<span>|</span>
<a href="#">下载app</a>
<span>|</span>
<a href="#">Select Location</a>
</div>
<div class="top-nav-right">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<button><em class="iconfont icon-sousuo"></em>购物车(0)</button>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="site-header-left"></div>
<div class="site-header-center">
<ul>
<li><a href="#">Xiaomi手机</a></li>
<li><a href="#">Redmi手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="site-header-right">
<input type="text">
<button><em class="iconfont icon-sousuo"></em> </button>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/040ed92b3a57bf23cbb3953a0519cb36.jpg?thumb=1&w=2452&h=920"
alt="" width="1226px">
<div class="banner-nav">
<ul>
<li><a href="#">手机<span>></span></a></li>
<li><a href="#">电视<span>></span></a></li>
<li><a href="#">家电<span>></span></a></li>
<li><a href="#">笔记本 平板<span>></span></a></li>
<li><a href="#">出行 穿戴<span>></span></a></li>
<li><a href="#">耳机 音箱<span>></span></a></li>
<li><a href="#">健康 儿童<span>></span></a></li>
<li><a href="#">生活 箱包<span>></span></a></li>
<li><a href="#">智能 路由器<span>></span></a></li>
<li><a href="#">电源 配件<span>></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.top-nav {
height: 40px;
background-color: #333;
line-height: 40px;
}
.container {
width: 1226px;
margin: 0 auto;
}
.top-nav .container {
display: flex;
justify-content: space-between;
}
.top-nav a {
font-size: 12px;
color: #B0B0B0;
}
.top-nav span {
color: #424242;
margin: 0 3px;
}
.top-nav-right button {
width: 120px;
height: 40px;
background-color: #B0B0B0;
font-size: 12px;
}
.site-header {
height: 100px;
line-height: 100px;
}
.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.site-header-left {
width: 56px;
height: 56px;
background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png) no-repeat;
background-size: 56px;
}
.site-header-center ul {
width: 660 px;
display: flex;
justify-content: space-between;
}
.site-header-center ul li a {
font-size: 18px;
color: #333;
}
.site-header-right {
position: relative;
width: 300px;
height: 50px;
}
.site-header-right input {
position: absolute;
top: 0;
outline: none;
width: 245px;
height: 50px;
border: 1px solid #e0e0e0;
}
.site-header-right button {
position: absolute;
top: 0;
right: 0;
width: 52px;
height: 51px;
border: 1px solid #e0e0e0;
}
.banner .container {
position: relative;
}
.banner-nav ul {
position: absolute;
top: 0;
left: 0;
width: 234px;
height: 460px;
background: rgba(105, 101, 101, .6);
padding: 20px 30px;
}
.banner-nav ul li {
height: 42px;
}
.banner-nav ul li a {
color: #FFFFFF;
font-size: 14px;
}