前端HTML+CSS查漏补缺——仿制百度搜索首页的一些思考
在像素模仿百度搜索首页的时候，在实现的时候，遇到了一些值得记录的点。
在这个过程中，也顺便看了看百度的源码，感觉很有意思。
对了，QQ截屏里面获取到的颜色，是不大正确的，会有点误差。
这是我实现的效果，去掉了部分效果。
比如说，超链接的hover效果，以及更多页面的展开等效果。
最重要的是，没有写JS代码，只是一个页面展示而已。
首先就是顶部header的标签，我这里用的是无序列表，我一直以为大伙都是这么做的，直到我看到百度的源码。
才发现百度是直接采用了超链接标签进行：
少些一点代码，这何曾不是另外一种优雅呢？
用百度源码的方式实现这个展示效果还是蛮简单的，使用flex布局即可。
但是，更让我吃惊的在后面——对于更多内容的显示：
居然是做了div嵌套的，hover到更多的时候切换显示。
这个时候，想起了框架的重要性，如果没有框架的话，只能一个一个手打/CV了。
框架提供的便利性还是很强的，直接用个for循环即可实现这个效果。
当然，这不是最重要的。
下图是一个平平无奇的百度搜索框，如果你去检查可以发现，这不是一个简单的搜索框——里面还有不少display: none的元素。
不过，这都不是重点。
我关注的重点在于，怎么实现这么优雅的效果？
这是我一开始做出来的效果：
可以看出这个效果不够优雅，因为获取焦点之后的颜色不一致，显得很突兀。
这简单啊，直接：
:focus { bordor: 2px solid #蓝色 }
但是，在输入这段代码之后，获取焦点之后，边框依旧是黑色的。
上面的GIF，就是在加入了这段代码之后录制的。
如果你只加上outline: #蓝色的话，也是不行的，效果是这样的：
但是，如果你两个一起使用的话，居然可以实现跟百度一模一样的效果：
这里有点疑惑。
但是突然又懂了，你可以这么理解：
Outline是一个CSS属性，用于在元素周围绘制一条线，这条线不占据布局空间，通常用于突出显示元素。如果Outline去掉了，再改变border颜色，这个时候就可以实现上面的效果了。
但是，这还不够优雅。
因为百度原来的效果里，右边边框是这样的：
而我写的：
虽然实现跟百度一样的效果就很简单，直接把右边框的颜色改为跟搜索的一致即可。
相较于百度这种完成度高的页面来说，里面很多东西都是包含了操作的，但是我这个只是模仿页面而已，并没有任何的操作的。
感兴趣的，可以自己去模仿一下百度里面的JS逻辑。