【前端实战拆解】手写百度首页第一步：导航栏 + Logo + 搜索框到底如何实现？

最新推荐文章于 2025-11-20 22:28:09 发布

原创最新推荐文章于 2025-11-20 22:28:09 发布 · 744 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

html 同时被 2 个专栏收录

8 篇文章

订阅专栏

python爬虫

8 篇文章

订阅专栏

本文不展示完整代码，而是挑关键代码片段 + 讲知识点，适合新手理解“为什么我的页面能还原成百度那样”。

你能在网上看到很多“百度首页源码复刻”，但直接贴一堆 HTML/CSS 没啥用。
我自己在写这个练习的时候，把过程拆成了三个关键模块：

顶部导航布局怎么实现？
Logo 怎么让它真正“视觉居中”？
搜索框撑满、圆角、边框怎么控制？

只要搞懂这几个点，你写任何门户网站的布局都能举一反三。

一、顶部导航条：为什么一定要用 flex？

百度顶部导航是典型两端布局：

左边：新闻 / 贴吧 / 视频 …
右边：设置 / 登录

❌ 如果你用 float 或 margin 推来推去，会非常不稳。
✔ 所以直接上 Flex，是最现代、最稳定的做法。

关键代码（只展示核心）

.top-bar {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 40px 0;
}

关键知识点：justify-content vs align-items

属性	控制方向	在百度首页中的作用
justify-content	水平	左、右两组导航自动分开
align-items	垂直	让文字跟图标整体垂直居中

如果只用 justify-content: space-between 而忘记 align-items，导航会出现“上下不齐”的情况，这就是很多新手页面看着别扭的原因。

二、左侧导航的“间距”为什么不用 margin？

你会看到我用了这个写法：

.nav-left {
    display: flex;
    gap: 24px;
}

为什么推荐 gap？

以前我们会写：

.nav-left a {
    margin-right: 20px;
}

但 margin 有两个问题：

最后一个会多出空隙（不好控制）
代码污染更重

gap 是用来解决“内部元素之间的距离”的，它不会影响容器外部，是最适合导航栏的方式。

🔥 gap 是做导航、做宫格布局时最干净的写法。

三、Logo 区域：为什么要“父元素 + 子元素”两层？

很多人写成：

<img src="logo.png">

然后靠 margin 推来推去。
这样几乎永远不可能在各种电脑上完全居中。

正确做法是：

.center(整个中间区域)
    → logo-container (控制 logo 所在盒子)
         → img(真正的图片)

设计师为什么要这样？
因为：

逻辑分层更清晰

层级	作用
center	控制整个上下大区块
logo-container	控制 Logo 的尺寸比例
logo_img	控制图片的铺满方式

对应关键代码：

.center {
    width: 800px;
    margin: 0 auto;     /* 水平居中核心 */
}

.logo-container {
    width: 300px;
    height: 150px;
    margin: auto;        /* 包含垂直方向的自动居中 */
}

.logo_img {
    width: 100%;
    height: 100%;
}

这里的知识点亮点：

为什么 margin: auto 能让 logo-container 居中？

在 flex 布局内部
或者你给父级设定了宽度

时，margin: auto 会自动吸收剩余空间，从而保持居中。

所以不是所有 margin: auto 都能居中，需要布局条件满足才行。

四、搜索框：为什么直接继承父级宽高？

这段代码看似简单，但非常关键：

.center_value{
    width: 100%;
    height: 80px;
}

.value_data{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #4E6EF2;
}