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

标签栏

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

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

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

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

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

补充

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

缩放与布局的矛盾

查阅两篇文章

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

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

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

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

相关推荐
奔跑的web.16 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
集成显卡16 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
你知道“铁甲小宝”吗丶17 小时前
VSCode使用Claude Code(MCP服务)
vscode·ai·ai编程
pas13617 小时前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-18 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季66619 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
小北方城市网19 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
hxcat19 小时前
AI编程效率提升指南:everything-claude-code开源配置方案
ai编程
console.log('npc')19 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_8920005219 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter