小米官网静态页面：
导航栏部分：
这里用id选择器，猫脸动画：class选择器（复习！）
F12
导航栏分了左右两个部分：
下图18行少了个v，记得补上，是navCenter
设置好网页的边距
图片原本是带着框线的，要去掉
a标签本来是带着下划线的，要去掉
小米官网~Selection Location
naCenter的div里写无序列表ul，里面写小米官网~Selection Location
每个类别后都有一个竖线，最后一个li的后面没有竖线，所以最后一个li要用上class属性，因为它在后面需要单独设置
鼠标悬停设置：
达到效果字体颜色改变，并且没有下划线
购物车
购物车标
用的时候一定要删掉里面的点
购物车是和无序列表ul是并列关系
小知识点：href="#"是一种临时链接的写法，这样写就是说这个链接目前不可用，点击了也不会有作用，还是会跳转到本页，当#被有效链接替换才会起作用。
下图是鼠标放在上面的效果：
登录注册消息通知
登录注册消息通知 是和 购物车 和 li 同级
效果是鼠标放上去字变白色，并且是没有下划线的
导航栏效果展示：
代码：
html：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>小米商城</title><!-- 对应图标库的引入 --><!-- Bootstrap --><link rel="stylesheet" href="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- 外部文件引入 --><link rel="stylesheet" type="text/css" href="css/mi.css" /></head><body><div id="container"><div id="header"><div id="nav"><div id="navCenter"><ul><li><a href="#">小米官网</a></li><li><a href="#">小米商城</a></li><li><a href="#">MIUI</a></li><li><a href="#">oT</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 class="lastli"><a href="#">SelectLocation</a></li></ul><div id="navRightCar"><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>购物车(0)</a></div><div id="navRightLogin"><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a><span>|</span></div></div></div></div></div></body></html>
css：
/* 初始化 */*{margin: 0;padding: 0;}ul{list-style: none;}body{font-family: "微软雅黑";}img{border: none;}a{/* 去掉a标签下划线 */text-decoration: none;}#container{width: 100%;}#header{width: 100%;height: 140px;}#nav{width: 100%;height: 40px;background-color: #333;}#navCenter{width: 1226px;height: 40px;/* 位置居中 */margin: 0 auto;/* background-color: red; */}#navCenter ul{margin-top: 16px;float: left;}#navCenter ul li{float: left;font-size: 12px;line-height: 14px;/* 右边框 */border-right: 1px solid #424242;}#navCenter ul li a{color: #b0b0b0;margin-right: 8px;margin-left: 8px;}#navCenter ul .lastli{border: none;}#navCenter ul li a:hover{color: #E0E0E0;text-decoration: none;}#navRightCar{background-color: #424242;width: 120px;height: 40px;float: right;line-height: 40px;/* 设置鼠标移动上去，变成手的形状 */cursor: pointer;/* 设置父级div里面的内容水平居中 */text-align: center;}#navRightCar a{font-size: 12px;color: #B0B0B0;}#navRightCar:hover{background-color: white;}#navRightCar:hover a{color: #ff6700;/* 去掉a标签下划线 */text-decoration: none;}#navRightLogin{float: right;height: 40px;line-height: 40px;/* 设置父级div里面的内容水平居中 */text-align: center;margin-right: 15px;}#navRightLogin span{color: #424242;/* 去掉a标签下划线 */text-decoration: none;}#navRightLogin a{color: #B0B0B0;font-size: 12px;margin-left: 5px;margin-right: 5px;}#navRightLogin a:hover{color: #E0E0E0;}
