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

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

文章目录

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

1.导航栏

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

图像位置定位

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

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

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~



相关文章
|
28天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
190 77
|
9天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6天前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
103 79
|
29天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
9月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
291 7
|
9月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
138 6
|
9月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
246 4
|
9月前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
242 3
|
9月前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
334 2
|
9月前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
145 2

热门文章

最新文章