当前位置：首页 > news >正文

【后端学前端】第三天 css动画动态搜索框（定位、动态设置宽度）

news 2025/12/9 19:59:35

1、学习信息

视频地址：css动画动态搜索框（定位、动态设置宽度）_哔哩哔哩_bilibili

2、源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test3</title><link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100vw;height: 100vh;background: linear-gradient(to bottom, skyblue, #003462);display: flex;justify-content: center;align-items: center;}.searchBar {width: 400px;height: 60px;background-color: #ffffff;box-shadow: 0 0 10px rgba(0, 0, 0, .4);border-radius: 60px;position: relative;overflow: hidden;transition: .5s;}.icon {width: 60px;height: 60px;display: flex;justify-content: center;align-items: center;cursor: pointer;}.icon i{color: dodgerblue;font-size: 30px;}.textInput {width: 320px;height: 60px;position: absolute;top: 0;left: 60px;display: flex;justify-content: center;align-items: center;background-color: blue;}.textInput input {width: 100%;height: 100%;border: none;outline: none;font-size: 18px;}.clear {width: 15px;height: 15px;position: absolute;right: 22%;top: 50%;transform: translateY(-50%);cursor: pointer;display: flex;justify-content: center;align-items: center;}.clear i{color: #999;}.goBtn {width: 12%;height: 60%;position: absolute;top: 20%;right: 0;border-radius: 8px;outline: none;border: none;color: #ffffff;box-shadow: 0 0 2px rgba(0, 0, 0, .4);background: linear-gradient(skyblue, deepskyblue);cursor: pointer;}.searchBar{width: 60px;}.changeWidth{width: 400px;}</style><script>window.onload =()=>{let searchIcon = document.querySelector(".icon")let clearIcon = document.querySelector(".clear")let searchBar = document.querySelector(".searchBar")let inp = document.querySelector(".inp")searchIcon.addEventListener("click",()=>{searchBar.classList.toggle("changeWidth")})clearIcon.addEventListener("click",()=>{inp.value=""})}</script>
</head>
<body><div class="searchBar"><div class="icon"> <i class="iconfont icon-sousuoxiao"></i></div><div class="textInput"><input class="inp" type="text" placeholder="请输入搜索关键字"><button class="goBtn">go</button><div class="clear"><i class="iconfont icon-close"></i></div></div></div>
</body>
</html>

3、怎么实现拉出

通过对大的容器动态设置宽度按，也就是

searchBar 的宽度设置为400px

这里学到一个注意点：在class后的属性会覆盖先写的属性

searchBar的最早宽度是400px，在后面又新定义了一个searchBar的样式为60px

4、关于<i>

看教程，<i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

但是在代码中却用图标，在知乎也看到了类似的问题

问题地址：为什么大家都用i标签<i></i>用作小图标? - 知乎

貌似这样不对，但是大家都这样用

5、关于布局

布局一直我想学习的，一直也没总结出什么

找了一个文章【CSS】CSS布局解决方案（终结版） - 掘金

1.2 页面整体布局

先分析行模块
如果一行当中有多个模块，一定要放在同一个父模块中

1.3 单个模块布局

先给模块宽高背景颜色
然后再分析模块的文本属性背景其他属性

CSS书写顺序：

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文本(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

6、缩起来只显示搜索

        .textInput {width: 320px;height: 60px;position: absolute; /*当被设置了绝对定位的元素，在文档流中是不占据空间的*/top: 0;left: 60px;display: flex;justify-content: center;align-items: center;background-color: blue;}

position: absolute; /*当被设置了绝对定位的元素，在文档流中是不占据空间的*/

textInput 不占据空间，最终searchBar的空间会全部给到icon

【后端学前端】第三天 css动画动态搜索框（定位、动态设置宽度）

1、学习信息视频地址：css动画动态搜索框（定位、动态设置宽度）_哔哩哔哩_bilibili 2、源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>test3</title>…...

编程日记 2023/12/17 22:26:23

51.0/表单(详细版)

目录 51.1 输入元素 input 51.1.1 文本域 51.1.2 密码输入框 51.1.3 单选框 51.1.4 复选框 51.1.5 提交按钮 51.1.6 重置按钮 51.1.7 普通按钮 51.1.8 图片按钮 51.1.9 隐藏域 51.1.10 文件域 51.2 多行文本框 51.3 下拉列表框 51.4 表单的综合示例表单是网页中…...

编程日记 2023/12/17 22:24:21

动态规划（Dynamic Programming）

动态规划（Dynamic Programming）：是运筹学的一种最优化方法，只不过在计算机问题上应用比较多 DP常见步骤： 暴力递归/穷举记忆化搜索（傻缓存递归）,使用备忘录/ DP Table 来优化穷举过程严格表结…...

编程日记 2023/12/17 22:23:21

linux使用文件描述符0、1和2来处理输入和输出

文件描述符012 在Linux中，文件描述符0、1和2分别代表标准输入（stdin）、标准输出（stdout）和标准错误（stderr）。它们用于处理进程的输入和输出。文件描述符0（stdin）&…...

编程日记 2023/12/17 22:19:17

how to write and run .ps1

use .txt filechange the suffix to .ps1 from .txt 3）how to run .ps1 3.1) PS D:> .\test.ps1 1 2 3 4 5 6 7 8 9 10 3.2) PS D:> tes then press tab key to compensate and complete the whole file name...

编程日记 2023/12/17 22:18:16

如何在PHP中处理跨域请求？

在 PHP 中处理跨域请求（CORS，Cross-Origin Resource Sharing），通常需要在服务器端设置相应的 HTTP 头，以允许来自其他域的请求。以下是一些处理跨域请求的方法： 设置 HTTP 头： 在服务器端&#…...

编程日记 2023/12/17 22:16:14

spring boot 配置多数据源踩坑 BindingException: Invalid bound statement (not found)

在上一篇：《【已解决】Spring Boot多数据源的时候，mybatis报错提示：Invalid bound statement (not found)》凯哥(凯哥Java) 已经接受了，在Spring Boot配置多数据源时候，因为自己马虎，导致的一个坑。下面&a…...

编程日记 2023/12/17 22:14:13

【产品】Axure的基本使用（二）

文章目录一、元件基本介绍1.1 概述1.2 元件操作1.3 热区的使用二、表单型元件的使用2.1 文本框2.2 文本域2.3 下拉列表2.4 列表框2.5 单选按钮2.6 复选框2.7 菜单与表格元件的使用三、实例3.1 登录2.2 个人简历一、元件基本介绍 1.1 概述在Axure RP中，元件是…...

编程日记 2023/12/17 22:12:11

Python语言学习笔记之十（字符串处理）

本课程对于有其它语言基础的开发人员可以参考和学习，同时也是记录下来，为个人学习使用，文档中有此不当之处，请谅解。字符串处理：以实现字符串的分割、替换、格式化、大小写转换，Python字符串处理是指对Py…...

编程日记 2023/12/17 22:10:09

WPF-附加属性《十二》

非常重要依赖属性和附加属性，两者是有关系的，也是有些区别的，很多时候，可能会把两者混淆了。附加属性（Attach Property） 顾名思义，就是附加上面的属性，自身是没有的，…...

编程日记 2023/12/17 22:07:06

算法通关第十九关-青铜挑战理解动态规划

大家好我是苏麟 , 今天聊聊动态规划 . 动态规划是最热门、最重要的算法思想之一，在面试中大量出现，而且题目整体都偏难一些对于大部人来说，最大的问题是不知道动态规划到底是怎么回事。很多人看教程等，都被里面的状态子问题、状态…...

编程日记 2023/12/17 22:05:05

2023 GitHub年度排行榜，JEECG上榜第三名，势头依然很猛~

2023 GitHub年度排行榜TOP10，JeecgBoot上榜第三名，势头依然很猛~...

编程日记 2023/12/17 22:02:02

由@EnableWebMvc注解引发的Jackson解析异常

同事合了代码到开发分支，并没有涉及到改动的类却报错。错误信息如下： Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.conv…...

编程日记 2023/12/17 22:01:01

ce从初阶到大牛--函数

1、显示/etc/passwd文件中以bash结尾的行； grep "bash$" /etc/passwd2、找出/etc/passwd文件中的三位或四位数； grep -E \b[0-9]{3,4}\b /etc/passwd3、找出/etc/grub2.cfg文件中，以至少一个空白字符开头，后面又跟了非…...

编程日记 2023/12/17 21:55:57

Java学习异常类

1 定义异常就是指程序运行时可能出现的一些错误，例如数组越界、除零等。我们也可以把自己觉得不合理的结果定义为“异常” 2 异常与错误 3 Java中的异常处理 catch语句：对异常的处理语句放在 catch部分，可以包含多个catch语句&#xff0c…...

编程日记 2023/12/17 21:54:56

Python 全栈体系【四阶】（六）

第四章机器学习五、线性模型 1. 概述线性模型是自然界最简单的模型之一，它描述了一个（或多个）自变量对另一个因变量的影响是呈简单的比例、线性关系。例如： 住房每平米单价为 1 万元，100 平米住房价格为 100 万…...

编程日记 2023/12/17 21:53:55

从memcpy()函数中学习函数的设计思想

memcpy()函数：可以理解为内存拷贝。他的函数定义如下的 my_memcpy()函数相同。下面这个函数是我的模拟实现，现在让我们一起来学习一下这个函数的设计思想： void * my_memcpy(void * des, const void* src, size_t size) {void * p des;…...

编程日记 2023/12/17 21:47:50

【PostgreSQL】从零开始:（二）PostgreSQL下载与安装

【PostgreSQL】从零开始:（二）PostgreSQL下载与安装 Winodws环境下载与安装PostgreSQL下载PostgreSQL安装PostgreSQL1.登录数据库2.查看下我们已有的数据库 Liunx环境下载与安装PostgreSQL使用YUM下载安装PostgreSQL1.下载PostgreSQL安装包2.安装PostgreS…...

编程日记 2023/12/17 21:46:49

PHP的垃圾回收机制是怎样的？

PHP 使用自动垃圾回收机制来管理内存。PHP 的垃圾回收主要依赖于引用计数和周期性垃圾回收两种策略。引用计数： PHP 使用引用计数来跟踪变量的引用次数。每当一个变量被引用，其引用计数就增加；每当一个引用被释放，计数就减少。当…...

编程日记 2023/12/17 21:45:47

【数据结构】八大排序之希尔排序算法

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.优化直接插入排序算法我们在之前对直接插入排序算法的优化部分通过对直接插入排序的分析可以得到一个结论,即: 进行直接插入排序的数组,如果越接近局部有序,则后续进行直…...

编程日记 2023/12/17 21:44:46

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/12/9 1:41:56

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2025/12/9 3:03:54

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下源码修改及编译修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/12/8 23:53:16

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/11/30 19:15:58