<!DOCTYPE html>
<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>小米官网</title>
<link rel="icon" type="image/x-icon" href="https://s01.mifile.cn/favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<div class="header">
<img src="./images/favicon.ico" alt="" srcset="">
<ul class="nav">
<li><a href="#">小米官网</a></li>
<li><a href="#">小米商城</a></li>
<li><a href="#">小米影像</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">IoT</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 class="login">
<a href="#">登录   </a>|
<a href="#">   注册</a>
</div>
</div>
<div class="box">
<img src="./images/3.jpg" alt="" srcset="">
<img src="./images/2.jpg" alt="" srcset="">
<img src="./images/1.jpg" alt="" srcset="">
<a class="top" href="#"></a>
</div>
<div class="footer wrapper">
<div class="links">
<dl>
<dt>选购指南</dt>
<dd><a href="#">手机</a></dd>
<dd><a href="#">电视</a></dd>
<dd><a href="#">笔记本</a></dd>
<dd><a href="#">平板</a></dd>
<dd><a href="#">穿戴</a></dd>
<dd><a href="#">耳机</a></dd>
<dd><a href="#">家电</a></dd>
<dd><a href="#">路由器</a></dd>
<dd><a href="#">音箱</a></dd>
<dd><a href="#">配件</a></dd>
</dl>
<dl>
<dt>服务中心</dt>
<dd><a href="#">申请售后</a></dd>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">维修服务价格</a></dd>
<dd><a href="#">订单查询</a></dd>
<dd><a href="#">以旧换新</a></dd>
<dd><a href="#">保障服务</a></dd>
<dd><a href="#">防伪查询</a></dd>
<dd><a href="#">F码通道</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服务网点</a></dd>
<dd><a href="#">授权体验店/专区</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">加入小米</a></dd>
<dd><a href="#">投资者联系</a></dd>
<dd><a href="#">环境,社会及管制</a></dd>
<dd><a href="#">廉洁举报</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官方微信</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">公益基金会</a></dd>
</dl>
</div>
<div class="contact">
<p class="phone">400-100-5678</p>
<p>8:00-18:00(仅收市话费)</p>
<a> 人工客服</a>
</div>
</div>
</body>
</html>
.wrapper {
margin: 0 auto;
width: 1226px;
background-color: rgba(0, 0, 0, 0);
}
.header {
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 65px;
margin: 0 40px;
background-color: rgba(122, 127, 154, 0);
}
.header .login {
font-size: 14px;
}
.header .nav {
display: flex;
justify-content: center;
}
.header .nav li {
margin-left: 45px;
font-size: 13px;
}
.header .nav li a {
font-weight: 550;
}
.box img {
width: 100%;
}
.box .top {
background-image: url(../images/top-icon.png);
background-size: 100%;
width: 42px;
height: 62px;
position: fixed;
right: 100px;
bottom: 130px;
cursor: pointer;
}
.footer {
height: 350px;
padding: 40px;
position: relative;
}
.footer .links {
display: flex;
justify-content: space-between;
width: 70%;
}
.footer .links dt {
margin: -1px 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.footer .links dd {
line-height: 26px;
color: #757575;
}
.footer .contact {
text-align: center;
border-left: 1px solid #e0e0e0;
position: absolute;
padding-left: 70px;
float: right;
right: 50px;
top: 60px;
}
.footer .contact .phone {
font-size: 20px;
color: orange;
}
.footer .contact a {
margin-top: 5px;
display: inline-block;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
cursor: pointer;
border: 1px solid orange;
}
.footer .contact a::before {
font-family: iconfont;
content: "\e8bd";
}
.footer .contact a:hover {
background-color: #ff6700;
color: white;
}
完整代码链接