【HTML + CSS】模仿腾讯云页面——细节优化

网友投稿 570 2022-05-29

对导航栏、列表进行细节优化

1.导航栏

初稿我们的样式中,导航栏的显示效果并不完美,logo 位置正常,但是显然后侧的文字效果并未实现精准定位,首先给出实现后的样式效果,清除需要优化的位置

图像位置定位

分析源码可知,初稿中将 img-logo 和 container 合并布局,造成无法留出间隔距离的情况

这次我们单独布局并设置浮动效果,留出间隔

index-nav.html

在原来单独的 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 浮动

top-list.css

控制浮动、边距尺寸

量取边距像素值

.top .list span { float: right; margin-right: 21px; }

css 更新位置

实现效果

两处细节优化完成 ing~

CSS HTML

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Redis安装大全涵盖Windows Linux Docker
下一篇:我不是CodeR系列-gitee基础入门之vscode篇
相关文章