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~

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

【HTML + CSS】模仿腾讯云页面——初步实现
前端入门实战练习之腾讯云页面实现样例图实现后的样子如图所示,ps:量的尺寸最开始肯定是没有的,都是写一步,测一步,最后就成这样啦使用的工具是 PxCook,方便我们量取图片设计尺寸实现效果初 ...
腾讯云前端性能优化大赛火热招募中！
腾讯云首届前端性能优化大赛即将启动,2021年11月29日至2021年12月12日,赛事正式向广大前端开发者与技术达人启动线上招募,一场首屏耗时之间的"巅峰对决"即将上演!赶紧参与 ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
html托管源码,产品经理用腾讯云静态网站免费托管自己的Axure原型html
产品经理用腾讯云静态网站托管自己的Axure原型html. 产品经理免费托管自己的axure原型来了,历史文章请自行搜索关键词. 静态网站托管简介静态网站托管(Website Hosting,WH) ...
杨婷：腾讯云在线教育解决方案分享
本文来自腾讯云技术沙龙,本次沙龙主题为在线教育个性化教学技术实践演讲嘉宾:杨婷,腾讯高级产品经理.2010年重庆大学通信工程毕业,6年音视频相关产品从业经验.先后负责过视频云平台.视频CDN.直播点 ...
腾讯云在线教育解决方案：除了AI+大数据，还有这些...
作者简介:杨婷,腾讯高级产品经理. 2010年重庆大学通信工程毕业,6年音视频相关产品从业经验.先后负责过视频云平台.视频CDN.直播点播.互动直播.视频会议及音视频互动类智能硬件终端产品,了解音视频 ...
腾讯云服务器标准型s2/sa1/sa2区别在哪？如何选择？
腾讯云服务器标准型实例包括很多种不同机型的型号.本文主要说S2实例.sa1实例和sa2实例.这三款实例都是腾讯云页面比较常见的机型.这样对于新用户就容易产生困扰,不知道该选择哪个.下面详细说说在腾讯云 ...
巧用 maxTimeMS 服务端超时，避免承载亿级用户的腾讯云数据库MongoDB服务雪崩
腾讯云数据库MongoDB作为一款基于开源社区MongoDB版本的文档数据库产品,其承载着公司内外包括微信.看点.QQ音乐在内的亿级用户重量级APP产品.在某些场景的使用过程中,用户在客户端请求超时后 ...
腾讯云中间件读者敬启：2022年热门技术文章集锦，建议收藏
各位读者:大家好! 回望刚刚过去的2022年,发生了太多的事情,北京冬奥会.神舟十四号航天员首次出舱.重庆山火.泸定地震,一幕幕或激动人心或舍生忘死的场景彷佛还在眼前. 技术领域的力量同样振奋人心,腾 ...

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

文章目录