对导航栏、列表进行细节优化
1.导航栏
初稿我们的样式中,导航栏的显示效果并不完美,logo 位置正常,但是显然后侧的文字效果并未实现精准定位,首先给出实现后的样式效果,清除需要优化的位置
图像位置定位
分析源码可知,初稿中将 img-logo
和 container
合并布局,造成无法留出间隔距离的情况
这次我们单独布局并设置浮动效果,留出间隔
index-nav.html
1 2 3 4 5 6 7 8 9
| <div class="nav"> <h1> <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
注释掉的颜色方便我们实现精准定位,清除标签的位置,定位完成后注释掉即可,可以当做小技巧来用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| .nav { float: left; width: 1680px; height: 40px; background-color: #2b303b; }
.nav h1 { display: inline-block; padding-left: 240px; }
.nav .container { float: right; display: inline-block; margin-right: 250px; width: 638px; height: 40px; }
|
优化位置示意
2.列表装饰元素
不知道大家有没有发现,Tencent-logo
下方列表对应字体后方有个装饰性的小标签,英文状态下的 >
符号,初稿使用伪元素实现,但是装饰元素和字体间的距离并没有控制
今天换一种思路解决该问题
在字体后添加装饰元素:英文状态下的 >
符号,添加浮动效果,设置 margin-right
尺寸即可
top-list.html
不再使用伪元素控制,更新为添加 float:right
浮动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <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
控制浮动、边距尺寸
量取边距像素值
1 2 3 4
| .top .list span { float: right; margin-right: 21px; }
|
css 更新位置
实现效果
两处细节优化完成 ing~