1.思维导图
2.作业+练习
可参考
a.小米官网导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<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: 0;
padding: 0;
box-sizing: border-box;
}
body {
line-height: 1;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
height: 40px;
background-color: #333;
}
.w {
width: 1226px;
margin: 0 auto;
background-color: #f00;
}
.nav .w .lf {
float: left;
}
.nav .w .lf li {
float: left;
}
.nav .w .lf li a {
color: #ccc;
line-height: 40px;
font-size: 12px;
margin: 0 5px;
}
.nav .w .lr {
float: right;
}
.nav .w .lr li {
float: left;
}
.nav .w .lr li a {
color: #ccc;
line-height: 40px;
font-size: 12px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="nav">
<div class="w">
<ul class="lf">
<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>
<li><a href="#">资质证照</a></li>
<li><a href="#">协议规则</a></li>
<li><a href="#">下载app</a></li>
<li><a href="#">智能生活</a></li>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="lr">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">消息通知</a></li>
</ul>
</div>
</div>
</body>
</html>b.小米官网内容区
c.小米官网底部导航
（b和c有图片就不传啦）