前端HTML+CSS查漏补缺——仿制百度搜索首页的一些思考

在像素模仿百度搜索首页的时候，在实现的时候，遇到了一些值得记录的点。

在这个过程中，也顺便看了看百度的源码，感觉很有意思。

对了，QQ截屏里面获取到的颜色，是不大正确的，会有点误差。

这是我实现的效果，去掉了部分效果。

比如说，超链接的hover效果，以及更多页面的展开等效果。

最重要的是，没有写JS代码，只是一个页面展示而已。

首先就是顶部header的标签，我这里用的是无序列表，我一直以为大伙都是这么做的，直到我看到百度的源码。

才发现百度是直接采用了超链接标签进行：

少些一点代码，这何曾不是另外一种优雅呢？

用百度源码的方式实现这个展示效果还是蛮简单的，使用flex布局即可。

但是，更让我吃惊的在后面——对于更多内容的显示：

居然是做了div嵌套的，hover到更多的时候切换显示。

这个时候，想起了框架的重要性，如果没有框架的话，只能一个一个手打/CV了。

框架提供的便利性还是很强的，直接用个for循环即可实现这个效果。

---

当然，这不是最重要的。

下图是一个平平无奇的百度搜索框，如果你去检查可以发现，这不是一个简单的搜索框——里面还有不少display: none的元素。

不过，这都不是重点。

我关注的重点在于，怎么实现这么优雅的效果？

这是我一开始做出来的效果：

可以看出这个效果不够优雅，因为获取焦点之后的颜色不一致，显得很突兀。

这简单啊，直接：

:focus { bordor: 2px solid #蓝色 }

但是，在输入这段代码之后，获取焦点之后，边框依旧是黑色的。

上面的GIF，就是在加入了这段代码之后录制的。

如果你只加上outline: #蓝色的话，也是不行的，效果是这样的：

但是，如果你两个一起使用的话，居然可以实现跟百度一模一样的效果：

这里有点疑惑。

但是突然又懂了，你可以这么理解：

Outline是一个CSS属性，用于在元素周围绘制一条线，这条线不占据布局空间，通常用于突出显示元素。

如果Outline去掉了，再改变border颜色，这个时候就可以实现上面的效果了。

---

但是，这还不够优雅。

因为百度原来的效果里，右边边框是这样的：

而我写的：

虽然实现跟百度一样的效果就很简单，直接把右边框的颜色改为跟搜索的一致即可。

---

相较于百度这种完成度高的页面来说，里面很多东西都是包含了操作的，但是我这个只是模仿页面而已，并没有任何的操作的。

感兴趣的，可以自己去模仿一下百度里面的JS逻辑。