结论：仿百度首页成败关键在于四点——清除body默认边距、用flex垂直居中搜索框、logo用background-image精确控制、按钮与输入框统一使用#666边框色；90%失败源于这四点未落实。

直接说结论：用纯 HTML + CSS 仿百度首页，核心不是“写得多”，而是控制好 body 默认边距、居中逻辑、搜索框高度对齐和图标尺寸一致性——90% 的失败都卡在这四点上。

去掉默认 margin 和 padding 是第一步

浏览器会给 body 加默认外边距（通常是 8px），不处理会导致整个页面内容离顶部/左右有白边，看着就不像百度那种“顶天立地”的感觉。

实操建议：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 在 CSS 开头加 * { margin: 0; padding: 0; } 或更稳妥的 body { margin: 0; }
• 不要只重置 div 或 section，h1、p 等也自带上下 margin，百度首页的 logo 和搜索框之间是紧贴的
• 检查开发者工具里 body 元素 computed 样式中的 margin 是否真为 0

搜索框必须用 flex 垂直居中，不能靠 margin 硬调

百度首页搜索框在大屏下始终垂直居中于导航栏下方，靠手动设 margin-top 会随字号、行高、padding 变化而错位。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• 把 logo 区、搜索区、按钮区包进一个 div，设 display: flex; flex-direction: column; align-items: center;
• 搜索输入框 input 高度设为 44px（百度实际值），同时确保 padding、border、box-sizing 一致：box-sizing: border-box;
• 避免用 vertical-align: middle 处理行内元素，它依赖基线，不稳定

logo 图片要用 background-image 而非 img 标签

百度首页的 logo 是个带透明底的 PNG，但它是作为背景图加载的，不是 <img>。这点很多人忽略，结果导致响应式缩放异常或无法精确控制尺寸。

实操建议：

• 用 div 容器 + background-image: url(...); background-size: contain;
• 固定容器宽高（如 width: 270px; height: 128px;），并设 background-repeat: no-repeat; 和 background-position: center;
• 如果非要用 <img>，必须加 height 和 width 属性，并设 vertical-align: top; 消除底部空白

按钮文字和 input 边框颜色必须用 #666，不是 #999 或 #333

百度搜索按钮的灰色是精确的 #666，输入框边框也是这个色值。用错会立刻显得“不像”，尤其在高分辨率屏上对比更明显。

实操建议：

• 搜索按钮 background-color: #38f;，文字色 color: #fff;，边框 border: 1px solid #666;
• input 边框统一用 border: 1px solid #666;，聚焦时改 border-color: #3388ff;
• 别依赖系统默认 outline，显式设 outline: none; 再加 box-shadow 模拟聚焦效果

真正难的不是结构，是像素级对齐：搜索框上下 padding 是否等于 logo 下边距，按钮是否比 input 高 2px，图标是否刚好嵌在 input 左侧 12px 处——这些细节没有“通用解”，只能打开百度首页，用开发者工具逐项比对 computed 值。