前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【HTML + CSS】模仿腾讯云页面——细节优化

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

作者头像
攻城狮杰森
发布2022-06-03 13:05:02
1.7K0
发布2022-06-03 13:05:02
举报
文章被收录于专栏:技术集锦技术集锦

文章目录

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

1.导航栏

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

图像位置定位

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

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

index-nav.html

代码语言:javascript
复制
<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

注释掉的颜色方便我们实现精准定位,清除标签的位置,定位完成后注释掉即可,可以当做小技巧来用

代码语言:javascript
复制
/* 导航 */
.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 浮动

代码语言:javascript
复制
    <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

控制浮动、边距尺寸

量取边距像素值

代码语言:javascript
复制
.top .list span {
    float: right;
    margin-right: 21px;
}

css 更新位置

实现效果

两处细节优化完成 ing~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 1.导航栏
    • 图像位置定位
      • index-nav.html
      • css-nav.css
  • 2.列表装饰元素
    • top-list.html
      • top-list.css
        • css 更新位置
        • 实现效果
    相关产品与服务
    云数据库 MySQL
    腾讯云数据库 MySQL(TencentDB for MySQL)为用户提供安全可靠,性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性,包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL,可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理,不仅经济实惠,而且稳定可靠,易于运维。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档