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

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

news 文章来源：https://blog.csdn.net/perfect2011/article/details/134951399 2025/1/12 16:15:06

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

NestJS使用gRPC实现微服务通信

代码仓库地址：https://github.com/zeng-jc/rpc-grpc-practice 1.1 基本概念 gRPC 基于 Protocol Buffers（protobuf）作为接口定义语言（IDL），意味着你可以使用 protobuf 来定义你的服务接口，gRP…...

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

Android手机使用Termux终端模拟器

Termux 是 Android 平台上的一个终端模拟器，可以在 Android 手机上模拟 Linux 环境。它提供命令行界面，并且提供了功能健全的包管理工具（pkg）。另外就是 Termux 不需要 root 权限，安装后默认产生一个用户，可…...

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

【Linux】cp问题，生产者消费者问题代码实现

文章目录前言一、 BlockQueue.hpp（阻塞队列）二、main.cpp 前言生产者消费者模式就是通过一个容器来解决生产者和消费者的强耦合问题。生产者和消费者彼此之间不直接通讯，而通过阻塞队列来进行通讯，所以生产者生产完数据之后不用…...

编程日记 2023/12/17 21:40:43

C++1114新标准——统一初始化（Uniform Initialization）、Initializer_list（初始化列表）、explicit

系列文章目录 C11&14新标准——Variadic templates（数量不定的模板参数） C11&14新标准——Uniform Initialization（统一初始化）、Initializer_list（初始化列表）、explicit 文章目录系列文章目录1…...

编程日记 2023/12/17 21:39:42

Kubeadm 方式部署K8s集群

环境主节点CPU核数必须是 ≥2核且内存要求必须≥2G，否则k8s无法启动主机名地址角色配置kube-master192.168.134.165主节点2核4Gkube-node1192..168.134.166 工作节点2核4Gkube-node2192.168.134.163工作节点2核4G 1.获取镜像谷歌镜像[由于国内网络原因…...

编程日记 2023/12/17 21:36:40

力扣376周赛

力扣第376场周赛找出缺失和重复的数字 map模拟 class Solution { public:vector<int> findMissingAndRepeatedValues(vector<vector<int>>& grid) {int n grid.size() , m grid[0].size();map<int,int>mi;for(int i 0 ; i < n ; i ){for…...

编程日记 2023/12/17 21:35:39

SU渲染受到电脑性能影响大吗？如何提高渲染速度

一般3d设计师们在进行设计工作前都需要提供一台高配电脑，那么你这知道su渲染对电脑要求高吗？电脑带不动su怎么解决？su对电脑什么配件要求高？今天这篇文章就详细为大家带来电脑硬件对su建模渲染的影响，以及su渲染慢怎么…...

编程日记 2023/12/17 21:33:38

Docker - Android源码编译与烧写

创建源代码并挂载到win目录 docker run -v /mnt/f/android8.0:/data/android8.0 -it --name android8.0 49a981f2b85f /bin/bash 使用 docker update 命令动态调整内存限制： 重新运行一个容器 docker run -m 512m my_container 修改运行中容器显示运行中容器 d…...

编程日记 2023/12/17 21:32:37

股票价格预测 | Python实现基于ARIMA和LSTM的股票预测模型（含XGBoost特征重要性衡量）

文章目录效果一览文章概述模型描述源码设计效果一览文章概述 Python实现基于ARIMA和LSTM的股票预测模型（Stock-Prediction） Data ExtractionFormatting data for time seriesFeature engineering（Feature Importance using X...

编程日记 2023/12/17 21:30:35

Base64

1. Base64是什么？ Base64（基底64）是一种基于64个可打印字符来表示二进制数据的表示方法。每6个比特为一个单元，对应某个可打印字符。3个字节相当于24个比特，对应于4个Base64单元，即3个字节可由4个可打印字…...

编程日记 2023/12/17 21:28:34

重庆做网站的程序员待遇/苏州关键词搜索排名

拿一个小点的项目来说，不用管什么开发框架，页面中掺和数据库访问代码加逻辑实现代码，直接搞定即可大一点的项目一般采用三层开发框架，前台表示层，基本逻辑层，数据访问层，数据库的设计... …...

编程日记 2025/1/12 13:30:26

php网站制作实例教程/省委副书记

A、安装curlftpfsA.1、安装DAG repositoryFedora可以直接yum install curlftpfs，CentOS不行，得用DAG repository，所以得先安装DAG repository。rpm -Uhv http://apt.sw.be/redhat/el6/en/x86_64/dag/RPMS/rpmforge-release-0.5.3-1.el6.rf.x8…...

编程日记 2025/1/12 12:30:42

平台与网站有什么区别/重庆疫情最新数据

样式配色方案网站： http://studiostyl.es/...

编程日记 2025/1/12 9:54:20

上海城隍庙必吃美食/seo营销培训

阻力前提 ：当有张表同一个字段管理2张表是，今天用one-to-moeny试了一下，开始配置one-to-many时，是不能同时写入数据；后来《Batch update returned unexpected row count from update: 0 actual row count: 0 expected:…...

编程日记 2025/1/12 7:34:43

西安做网站公司哪家比较好/天津seo优化排名

搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序原文地址（英文）：http://www.networkcomms.net/creating-a-wpf-chat-client-server-application/ 注意:本教程是相当广…...

编程日记 2025/1/12 6:17:04

绍兴网站建设报价/seo行业

题面：https://www.lydsy.com/JudgeOnline/problem.php?id5457 题解： 线段树合并，对于每个节点维护sum（以该节点为根的子树中最大的种类和）和kind（以该节点为根的子树中种类和最大的种类）即可。…...

编程日记 2025/1/12 4:42:42