前端HTML+CSS查漏补缺——仿制百度搜索首页的一些思考
在像素模仿百度搜索首页的时候,在实现的时候,遇到了一些值得记录的点。
在这个过程中,也顺便看了看百度的源码,感觉很有意思。
对了,QQ截屏里面获取到的颜色,是不大正确的,会有点误差。
这是我实现的效果,去掉了部分效果。
比如说,超链接的hover效果,以及更多页面的展开等效果。
最重要的是,没有写JS代码,只是一个页面展示而已。

首先就是顶部header的标签,我这里用的是无序列表,我一直以为大伙都是这么做的,直到我看到百度的源码。
才发现百度是直接采用了超链接标签进行:

少些一点代码,这何曾不是另外一种优雅呢?
用百度源码的方式实现这个展示效果还是蛮简单的,使用flex布局即可。
但是,更让我吃惊的在后面——对于更多内容的显示:

居然是做了div嵌套的,hover到更多的时候切换显示。
这个时候,想起了框架的重要性,如果没有框架的话,只能一个一个手打/CV了。
框架提供的便利性还是很强的,直接用个for循环即可实现这个效果。
当然,这不是最重要的。
下图是一个平平无奇的百度搜索框,如果你去检查可以发现,这不是一个简单的搜索框——里面还有不少display: none的元素。

不过,这都不是重点。
我关注的重点在于,怎么实现这么优雅的效果?

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

可以看出这个效果不够优雅,因为获取焦点之后的颜色不一致,显得很突兀。
这简单啊,直接:
:focus { bordor: 2px solid #蓝色 }
但是,在输入这段代码之后,获取焦点之后,边框依旧是黑色的。
上面的GIF,就是在加入了这段代码之后录制的。
如果你只加上outline: #蓝色的话,也是不行的,效果是这样的:

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

这里有点疑惑。
但是突然又懂了,你可以这么理解:
Outline是一个CSS属性,用于在元素周围绘制一条线,这条线不占据布局空间,通常用于突出显示元素。如果Outline去掉了,再改变border颜色,这个时候就可以实现上面的效果了。
但是,这还不够优雅。
因为百度原来的效果里,右边边框是这样的:

而我写的:

虽然实现跟百度一样的效果就很简单,直接把右边框的颜色改为跟搜索的一致即可。
相较于百度这种完成度高的页面来说,里面很多东西都是包含了操作的,但是我这个只是模仿页面而已,并没有任何的操作的。
感兴趣的,可以自己去模仿一下百度里面的JS逻辑。
相关文章:
前端HTML+CSS查漏补缺——仿制百度搜索首页的一些思考
在像素模仿百度搜索首页的时候,在实现的时候,遇到了一些值得记录的点。 在这个过程中,也顺便看了看百度的源码,感觉很有意思。 对了,QQ截屏里面获取到的颜色,是不大正确的,会有点误差。 这是我…...
【Python】实现一个个人理财助手小程序
以下是一个简化的 Python 代码框架,以及如何实现上述功能点的基本思路,可以基于这个框架进一步开发和完善你的小程序。 以下是一个简化的 Python 代码框架,使用了基本的类和函数来模拟上述功能: import pandas as pd from crypt…...
【GCC】结合GPT4 延迟梯度学习2:延迟梯度的计算及阈值更新
上文,充分发现了 排队梯度延迟的重要性, 【GCC】结合GPT4 延迟梯度学习1:公式推导及理论分析 例如: 延迟梯度为正数时,是单位时间内的排队队列长度的“增长速度” 延迟梯度与 发送速率(接收速率?)有直接的关系。 因为有 观测误差、随机因素、噪声,所以要对延迟梯度进行…...
灰豚数字人MotionAI大模型完成备案,模型已超百亿参数!
据8月5日网信办公告,灰豚数字人MotionAI大模型已完成备案。灰豚大模型拥有超过百亿参数,是综合全面性的视频生成大模型,融合了数字人大模型、声音大模型、文本大模型、视频大模型、图像大模型等技术。 灰豚AI数字人隶属于温州专帮信息科…...
zsh 配置 docker 自动补全
zsh 配置 docker 自动补全 在终端中使用 docker 的命令的时候必须要全部手敲,没有提示,于是就在找是否有自动补全的脚本,搜索了一圈踩了一些坑总结了一下具体的步骤。 首先执行如下命令: mkdir -p ~/.zsh/completion curl -L h…...
鸿蒙第三方应用.hap打包、安装流程。
最近在华为手表上安装第三方应用(源码打包构建应用,需要签名)。网上看了教程,在此记录下。 准备工作:先安装DevEco Studio开发工具。 进入华为 appgallery connect网站(注册、开发者实名认证) …...
leetcode:找到字符串中所有字母异位词
题目: 给定两s和p中所有p的异位词的子串,返回这些子串的起始索引。不考虑答案输出的顺序。异位词指由相同字母重排列形成的字符串(包括相同的字符串)。 示例 : 输入 输出 解释 s "cbaebabacd", p "…...
C语言学习
学习内容 两道题目 猜数字游戏 goto语句 关机程序 代码 //4.编写代码,演示多个字符从两端移动,向中间汇聚 welcome to china!!!! //#include<windows.h> //#include<stdlib.h> //int main() //{ // char arr1[] "welcome to c…...
Java面试题:MySQL高频面试题
MySQL常见面试题01 1、B树跟B树的区别? MySQL为什么选择B树来存储索引? 层数低,可以存放的数据多 2、InnoDB和MyISAM的区别? i:天生支持行锁,手动支持表锁,有事务,索引和数据一起存储 m:支持表锁不支持行锁,无事务,索引和数据分开存储 3、…...
使用js给数字进位,比如23333元进位成2.33万元
文章目录 一、进位函数:二、使用:总结 一、进位函数: //数字进位getUnitObjWithNumber(value){let dataconst returnObj {}let dw let chengshu 1if (isNaN(value)) {data 0} else {data parseFloat(value)}if (Math.abs(data) < 100…...
Java二十三种设计模式-享元模式(12/23)
享元模式:高效管理大量对象的设计模式 引言 在软件开发中,有时需要处理大量相似或重复的对象,这可能导致内存使用效率低下和性能问题。享元模式提供了一种解决方案,通过共享对象的共同部分来减少内存占用。 基础知识,…...
腾讯云AI代码助手助力软件开发体验分享
引言 现在,AI工具在软件开发中变得越来越重要,它们能显著提升效率和代码质量。本文就来分享一下我用腾讯云AI代码助手的经历,看看它是怎么在开发中帮了大忙的。 开发环境介绍 这次的项目用的是JavaScript,开发环境是Windows 10…...
Leetcode力扣刷题——182.查找重复的电子邮箱
题目 编写解决方案来报告所有重复的电子邮件。 请注意,可以保证电子邮件字段不为 NULL。 以 任意顺序 返回结果表。 结果格式如下例。 结果 # Write your MySQL query statement below select Email from Person group by email having count(*)>1; 知识点 c…...
idea中好用的插件
输入法自动切换插件 自动切换输入法插件:Smart Input。编写代码时自动切换到英文输入法,注释代码自动切换为中文输入法。极大的提升我们的编码效率。 MyBatisX插件 MybatisX 是一款基于 IDEA 的快速开发插件,为效率而生。主要用于XML映射配…...
spring 代码执⾏ (CVE-2018-1273)漏洞
一 漏洞简介 Spring Data 是⼀个⽤于简化数据库访问,并⽀持云服务的开源框架,Spring Data Commons 是 Spring Data 下所有⼦项⽬共享的基础框架。Spring Data Commons 在 2.0.5 及 以前版本中,存在⼀处 SpEL 表达式注⼊漏洞,攻击…...
幺麻子曲折上市路:毛利率近四年下滑不少,存货出现较大增长
《港湾商业观察》廖紫雯 近期,幺麻子食品股份有限公司(以下简称:幺麻子)申请股票在全国股份转让系统挂牌并公开转让,拟挂牌新三板。 幺麻子此前上市之路可谓一波三折。2022年9月,公司向四川证监局提交辅导…...
Sol盗u、sol链上的USDT盗窃:警惕恶意智能合约
随着区块链技术的普及,Solana链上的应用和用户数量不断增加。然而,这也为不法分子提供了可乘之机,恶意智能合约逐渐成为盗取USDT等加密资产的一种常见手段。本文将详细介绍恶意智能合约的工作原理,并提供防范措施,帮助…...
jupyter for c++
jupyter for c++ jupyter for c++ jupyter for c++配置环境问题参考文档配置环境 需要 clang 编译器 安装 aconda 默认情况下,anaconda navigator包与anaconda Distribution一起安装,并包含依赖包qt。默认情况下,qt的所有依赖项也应安装,但某些版本的Anaconda Distribution…...
TCP Analysis Flags 之 TCP Window Full
前言 默认情况下,Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态,并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时,会对每个 TCP 数据包进行一次分析,数据包按照它们在数据包列表中出现的顺序进行处理。可…...
相关性检验
文章目录 Pearson相关系数Spearman等级相关系数Cochrans Q检验Kappa一致性系数Kendall相关系数实例分析总结 在数据分析的广阔天地中,相关性检验是探索变量间关系的一把钥匙。本文将带领大家了解几种常用的相关性检验方法:Pearson、Spearman、Cochran’s…...
杨氏矩阵找第N大(小)的O(N)线性算法 LeetCode 378. Kth Smallest Element in a Sorted Matrix 373. Find K Pairs 钓鱼问题
杨氏矩阵:一个N*N的矩阵,它的每行每列都单调递增(或者宽松一些,单调不减),即a[i][j]<a[i1][j], a[i][j]<a[i][j1]。遇到的两道面试题: 1. 输出杨氏矩阵中最小的N个数。 2. 两个升序数组A和B,长度都是N。从两个数…...
【arcgis进阶】高效实现线要素转面要素并保持属性同步的3种方法
1. 为什么需要线要素转面要素? 在GIS数据处理中,线要素和面要素是两种最基本的几何类型。线要素通常用于表示道路、河流等线性特征,而面要素则用于表示地块、湖泊等封闭区域。但在实际项目中,我们经常需要将线要素转换为面要素&am…...
JAVA面试-JVM内存结构详解
Java虚拟机(JVM)内存结构,也称内存模型,是程序运行时的数据存储区域。根据《Java虚拟机规范》,可划分为线程私有和线程共享两大部分,以实现高效的内存管理和线程安全。其主要构成如下表所示: 内…...
从‘电池’到‘胡萝卜’:聊聊构建YOLO生活垃圾数据集时遇到的坑与收获
从‘电池’到‘胡萝卜’:构建YOLO生活垃圾数据集的实战思考 去年夏天,我在自家小区做垃圾分类志愿者时,发现一个有趣现象:居民们对"1号电池属于有害垃圾"这类规则记得很牢,但面对"半个胡萝卜该扔哪个桶…...
Windows 11 + Python 3.10 下,用智谱GLM-4-Flash API零成本跑通DB-GPT(保姆级避坑指南)
Windows 11 Python 3.10 下零成本跑通DB-GPT全流程指南 最近发现不少朋友对DB-GPT这个开源项目很感兴趣,但被复杂的部署流程和硬件要求劝退。作为过来人,我完全理解这种困扰——去年第一次尝试时,光是处理依赖冲突就花了整整两天。不过现在…...
WarcraftHelper:魔兽争霸III现代优化解决方案全玩家实战指南
WarcraftHelper:魔兽争霸III现代优化解决方案全玩家实战指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专为魔兽…...
智能调压突破性能极限:AMD Ryzen处理器调试工具让多核效率提升150%
智能调压突破性能极限:AMD Ryzen处理器调试工具让多核效率提升150% 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址…...
CS4.0实战:手把手教你搭建Cobalt Strike渗透测试环境(附避坑指南)
CS4.0实战:从零构建企业级红队测试环境的完整指南 当企业安全团队需要模拟真实攻击者的战术时,Cobalt Strike 4.0(CS4.0)无疑是当前最强大的红队协作平台之一。不同于简单的漏洞扫描工具,CS4.0提供的是完整的攻击生命周…...
Django 与 FastAPI 架构对比:学习路径指南
在技术领域,我们常常被那些闪耀的、可见的成果所吸引。今天,这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力,让我们得以一窥未来的轮廓。然而,作为在企业一线构建、部署和维护复杂系统的实践者,我们深知…...
跨语言数据处理的高效解决方案:json-translator全方位指南
跨语言数据处理的高效解决方案:json-translator全方位指南 【免费下载链接】json-translator jsontt 💡 - AI JSON Translator with GPT / Gemma / Mixtral / llama other FREE translation modules to translate your json/yaml files into other lang…...
