Material3顶部栏集成Google账户头像的搜索栏实现问询

下面是一套可直接复用的实现方案，完全匹配你想要的样式：

HTML 结构 #

先搭建基础DOM结构，包含顶部导航栏、搜索区域和头像按钮：

<header class="topbar">
  <!-- 左侧可按需添加品牌logo，此处省略 -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="搜索..." />
    <button class="search-icon-btn">🔍</button>
  </div>
  <button class="profile-btn">
    <img src="你的头像URL" alt="账户头像" class="profile-avatar" />
  </button>
</header>

CSS 样式 #

通过CSS还原Material风格的视觉效果，包含布局、配色和交互细节：

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif; /* 匹配Material官方字体 */
}

.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 顶部阴影增强层次感 */
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

/* 搜索区域样式 */
.search-container {
  flex: 0 1 480px; /* 限制最大宽度，支持自适应收缩 */
  margin: 0 auto 0 16px;
  display: flex;
  align-items: center;
  background: #f1f3f4;
  border-radius: 24px; /* 大圆角贴合Material风格 */
  padding: 8px 16px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 4px 8px;
}

.search-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: #5f6368; /* Material中性灰色 */
}

/* 头像按钮样式 */
.profile-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  padding: 4px;
  transition: background-color 0.2s ease;
}

.profile-btn:hover {
  background-color: #f1f3f4; /* hover时的背景过渡效果 */
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

自定义调整点 #

• 替换你的头像URL为实际的Google账户头像地址
• 修改.search-container的flex值可调整搜索栏的最大宽度
• 调整box-shadow、颜色值可匹配你的设计需求
• 如需添加左侧品牌logo，直接在.topbar内插入对应元素即可

内容的提问来源于stack exchange，提问作者Сергей Артемьев