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

标签栏

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

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

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

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

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

补充

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

缩放与布局的矛盾

查阅两篇文章

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

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

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

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

相关推荐
计算机魔术师30 分钟前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队31 分钟前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
全栈弄潮儿34 分钟前
初学者关于 AI 编程最常问的 10 个问题
aigc·openai·ai编程
RAOY的AI笔记1 小时前
Codex注册教程:从账号认证、环境配置到AI编程任务实践
chatgpt·ai编程
骥龙1 小时前
模块五:n8n自动化工作流 + Ollama + Health-MCP
人工智能·ai编程
计算机魔术师1 小时前
两年翻45倍!英伟达靠买买买建成千亿投资帝国
前端
paopaokaka_luck1 小时前
基于springboot3+vue3的精准扶贫管理系统(AI 问答、ECharts 图形化分析)
前端·人工智能·echarts
l1m0_2 小时前
智能电动自行车管理后台实战:AI生成页面与React组件化技巧
前端·react.js·ui·ai·设计
嘿嘿-662 小时前
Cherry Studio 接入ChatGpt:GPT-5.6 Sol 文本测试与 GPT-Image-2 出图教程
人工智能·gpt·ai·chatgpt·node.js·ai编程
Patrick_Wilson2 小时前
为什么gitlab的MR会默认有一个merge commit
前端·git·gitlab