网页的宽度，一般是在1000-1200这个范围左右，而我们的这个练习宽度是1226
我们需要专门设置一个类，用来表示中间容器的宽度
公共样式表中的内容
.w{
固定容器的宽度
width:1226px;
设置容器居中
margin: 0 auto;
}
.........
<body>
顶部导航条
顶部导航条的外部容器
<div class=“topbar-wrapper”>
创建内部容器
<div class=“topbar”>
左侧的导航条
<ul class=“service”>
<li><a href=“javascript:;”>小米商城</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>MTUI</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>loT</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>云服务</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>金融</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>有品</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>小爱开放平台</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>企业团购</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>资质证照</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>协议规则</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>下载app</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>Select location</a>
</li>
<li class=“line”>｜</li>
</ul>
购物车
<ul class=“shop-cart”>
<li><a href=“javascript:;”>
<i class=“fas fa-shopping-cart”> </i>
购物车
</a>
</li>
</ul>
用户的登录注册
<ul class=“user-info”>
<li><a href=“javascript:;”>登录</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>注册</a>
</li>
<li class=“line”>｜</li>
<li><a href=“javascript:;”>消息通知</a>
</li>
</ul>
</div>
</body>
导航条的结构基本写出来了，接下来是导航条的样式。
