效果图
要点
1.顶部栏与背景栏的空间位置关系
顶部导航栏 \] (固定在视口顶部，覆盖背景栏) ↓ 60px高度 \[ 顶部背景栏 \] (高度155px，仅在首页可见) ↓ 100px高度 \[ 标签栏 \] (与背景栏底部相邻) ↓ \[ 主内容区域
让AI分别生成一个顶部导航栏跟顶部背景栏， 背景栏的高度更大，他们都贴于顶部
2.顶部栏背景
顶部导航栏原本是透明背景的
顶部导航栏滚动到一定范围时，顶部导航栏背景从透明背景色变成白色底
3.顶部导航栏元素
有首页 搜索栏 头像 消息 收藏 历史 创作中心 投稿这几个元素
首页按钮在最左边，搜索栏居中显示， 头像 消息 收藏 历史 创作中心 投稿按钮在最右边
4.投稿按钮的细节
投稿按钮的背景色是粉色，并且边缘都要是润园的长方形
5. 消息 收藏 历史 创作中心的细节
消息 收藏 历史 创作中心按钮要图标在上，文字在下，图标和文字之间有一定的间距，图标之间又控制一定的内间距。并且图标和文字都要是居中对齐的
6.头像的细节
头像的上边要与消息图标的上边对齐，头像的下边要与消息文字的下边对齐
7.搜索栏和首页的水平位置
搜索栏和首页图标要与头像的中间点对齐
8.搜索栏的细节
搜索栏的问号按钮要放在搜索栏内部的右边
搜索栏的空间位置居中页面显示（这里我让AI实现这个功能，AI总是无法完成，因为AI总是想优先使用CSS代码完成，但根本无法完成这个任务，与是我观察B站的搜索栏每次刷新的时候也是先从一个地方闪烁到居中位置。所以这个功能是要用javascript完成）
9.搜索栏的展开
有搜索历史和热搜
热搜固定10条，并且一行2个，不需要显示搜索量，只显示序号和标题
搜索历史 横着排布 ，最多两行，超过了才显示展开更多
搜索栏打开时，点击搜索栏之外的地方，才折叠搜索栏
原本我是用原生搜索栏展开的方式实现的，但这样会导致右边头像消息等图标产生难以修复的BUG，目前没有精力应对，就只能用这种模拟展开的方法完成。