用flex布局实现顶部导航栏：header设display: flex、justify-content: space-between；logo、搜索框（flex: 1）、头像（border-radius: 50%）水平对齐；确保input:focus有可见焦点样式；下拉菜单需absolute定位+足够z-index；小屏用媒体查询隐藏搜索框或调整布局。
如何用纯HTML+CSS实现带Logo、搜索框和用户头像的顶部导航栏
直接上手就能用，不需要框架或JS驱动——只要结构清晰、CSS定位得当，三者就能水平对齐且响应正常。
关键点在于：不能靠float（易塌陷、难维护），别用display: inline-block加间隙（像素级错位常见），优先用display: flex并设justify-content和align-items。
-
header设为display: flex，justify-content: space-between分配左右空间 - 中间的
form或div包住input[type="search"]，设flex: 1占剩余宽度 - Logo用
img或svg，建议加height: 100%和object-fit: contain防拉伸 - 头像用
img，设border-radius: 50%和固定尺寸（如width: 36px），避免文字行高干扰
搜索框聚焦时边框/阴影不生效？检查:focus伪类是否被覆盖
很多默认样式（比如Chrome的outline）会被重置CSS干掉，但没补全:focus状态，导致“看起来没反应”。
- 确保
input[type="search"]有明确的:focus定义，例如：outline: 2px solid #007bff - 如果用了
border，记得:focus里也改border-color，别只调box-shadow - 移动端Safari对
input[type="search"]有特殊渲染，加appearance: none统一外观 - 避免写
input:focus { outline: none; }却不提供替代焦点样式——这是可访问性硬伤
头像点击下拉菜单弹不出？别忘了z-index和定位上下文
头像本身是position: relative没问题，但下拉菜单（ul或div）必须脱离文档流且层级足够高。
- 头像容器（如
div.avatar-wrapper）设position: relative - 下拉菜单设
position: absolute、top: 100%、right: 0，并配z-index: 1000 - 确认父级
header没设overflow: hidden——这会把下拉内容直接裁掉 - 如果导航栏用了
transform（如缩放或3D效果），可能创建新的层叠上下文，导致z-index失效，此时需在头像容器上加isolation: isolate
小屏设备上Logo、搜索框、头像挤成一团？用媒体查询分断点重排
响应式不是“等它自己换行”，而是主动控制：小屏时让搜索框收进汉堡菜单，或折叠为仅显示头像+图标。
- 桌面端用
flex三列布局；小屏（max-width: 768px）把搜索框display: none，头像保留 - 如果坚持要小屏显示搜索框，改用
flex-direction: column+text-align: center，但注意input宽度设width: 100% - Logo在小屏可替换为更小尺寸的
srcset图，或用background-image配合padding-top做响应式宽高比 - 别依赖
viewport缩放来“适配”，iOS Safari对user-scalable=no已限制严格，应以真实布局为准
真正麻烦的是头像右对齐后，下拉菜单在窄屏里超出视口——这时候得加JavaScript判断滚动位置动态调整top/bottom，纯CSS搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
