仿B站项目 前端 5 首页 标签栏

标签栏

标签栏有两个区域,左边是一个特殊的"热门"标签,是图标文字上下分布的结构,图标是红色底的火花形状,热门字体要加粗。右边的区域是两行每行11个标签显示,最后一个标签是一个更多标签,这是一个扩展显示的按钮。

要让热门标签的左侧边界与最右侧的标签的右侧边界确定下来。

右边两行标签都要上下左右对齐铺满

每个标签格子都要文字居中显示

如果滚轮滚过了这个标签栏,就会在顶层导航栏下面再出现一个新的单行导航栏

补充

顶层导航栏在浏览器缩放放大的时候,放大到一定程度,就会触发按钮折叠文字,并且让图标居中对齐左边的头像

缩放与布局的矛盾

查阅两篇文章

Html网页按住Ctrl+滚轮缩放后,盒子大小改变的罪魁祸首竟是border?(已解决)_html盒子放大影响别的盒子-CSDN博客

系统自适应,Ctrl+滚轮缩放界面等比例放大(页面不乱)_前端按ctrl实现页面缩放-CSDN博客

我发现用Ctrl+滚轮缩放界面会导致很多盒子挤在一起,各种互相影响。

我发现真正的B站在缩放67%至125%的时候,盒子是会根据缩放大小进行相应的布局的弹性变动的。但在这些缩放之外的缩放尺度下,不会改变盒子的布局位置,只会单纯放大与缩小显示界面,并且出现横向滚动栏显示。

相关推荐
ZC跨境爬虫5 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人5 小时前
HTML 字符引用完全指南
开发语言·前端·html
幼儿园技术家5 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠7 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker7 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
向量引擎7 小时前
向量引擎接入 GPT Image 2 和 deepseek v4:一个 api key 把热门模型串起来,开发者终于不用深夜修接口了
人工智能·gpt·计算机视觉·aigc·api·ai编程·key
donecoding8 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马9 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren9 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川9 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端