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