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

标签栏

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

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

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

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

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

补充

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

缩放与布局的矛盾

查阅两篇文章

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

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

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

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

相关推荐
RuoyiOffice6 分钟前
超级个体接私活必看:后端+前端+移动端三端一体企业管理系统怎么选(2026)
java·spring boot·vue·uniapp·全栈·企业管理·接私活
IT_陈寒15 分钟前
Python的线程池把我CPU跑满了,原来少传了个参数
前端·人工智能·后端
喜欢的名字被抢了24 分钟前
写-Chrome-扩展时踩过的那些-MV3-的坑
前端·chrome
网安老伯34 分钟前
网络安全基础要点知识介绍(非常详细),零基础入门到精通,看这一篇就够了
运维·前端·网络协议·web安全·网络安全·职场和发展
wuqingshun31415939 分钟前
springBoot是如何通过main方法启动web项目的?
前端·spring boot·后端
xxwl58539 分钟前
HTML 小总结:从骨架到枝叶,系统掌握网页结构
前端·html
●VON41 分钟前
鸿蒙 PC Markdown 编辑器 Bridge 协议:原生外壳与 Web 内核的状态同步
前端·华为·编辑器·harmonyos·鸿蒙
AINative软件工程1 小时前
MCP Server 权限边界工程实践:OAuth、最小权限与工具沙箱,别让 Agent 拿到整台机器
架构·llm·ai编程
MrDJun1 小时前
分享一款免费实用的网页变动监控工具:PageWatch.tech
前端·javascript·vue.js
米码收割机1 小时前
【web】邻里悦站—社区便民服务平【独一无二】(源码+说明文档)
前端