对导航栏、列表进行细节优化
1.导航栏
初稿我们的样式中，导航栏的显示效果并不完美，logo 位置正常，但是显然后侧的文字效果并未实现精准定位，首先给出实现后的样式效果，清除需要优化的位置
图像位置定位
分析源码可知，初稿中将 img-logo 和 container 合并布局，造成无法留出间隔距离的情况
这次我们单独布局并设置浮动效果，留出间隔
index-nav.html
导航栏文字靠右
<div class="nav">
<h1>
<!-- 将 logo 和右侧导航分开布局 -->
<img src="https://cdn.jsdelivr.net/gh/PDPENG/jason-storage/blog-img/logo.png" alt="tencent-logo">
</h1>
<div class="container">
<!-- ...... -->
</div>
</div>在原来单独的 img 标签嵌套格式中，为 img 标签添加 h1 标签，并一定注意显示模式的转换，否则后侧文字会靠下显示（如图）
css-nav.css
注释掉的颜色方便我们实现精准定位，清除标签的位置，定位完成后注释掉即可，可以当做小技巧来用
/* 导航 */
.nav {
float: left;
width: 1680px;
height: 40px;
background-color: #2b303b;
/* background-color: orange; */
}
.nav h1 {
/* 不转换 h1 显示模式 后面 container 会换行显示 */
display: inline-block;
padding-left: 240px;
}
.nav .container {
float: right;
display: inline-block;
margin-right: 250px;
width: 638px;
height: 40px;
/* background-color: red; */
}优化位置示意
2.列表装饰元素
不知道大家有没有发现，Tencent-logo 下方列表对应字体后方有个装饰性的小标签，英文状态下的 > 符号，初稿使用伪元素实现，但是装饰元素和字体间的距离并没有控制
今天换一种思路解决该问题
在字体后添加装饰元素：英文状态下的 > 符号，添加浮动效果，设置 margin-right 尺寸即可
top-list.html
不再使用伪元素控制，更新为添加
float:right 浮动
<div class="top">
<div class="list">
<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>top-list.css
控制浮动、边距尺寸
量取边距像素值
.top .list span {
float: right;
margin-right: 21px;
}css 更新位置
实现效果
两处细节优化完成 ing~
