网站整体变成灰色CSS代码 为了纪念一些影响力很大的伟人逝世或者重要的纪念日的时候需要让网页全部变灰来表示我们对逝者的悼念。其实这个功能很简单，只需要在HTML 的head标签里加入如下代码即可<style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} </style>/*网站变灰*/ html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}但愿用不上

CSS 清理浮动 clear属性 虽然浮动可以便于页面布局，但同时会产生一些问题，也就是常说的副作用。浮动元素最常见的缺陷是：父元素的高度塌陷和影响兄弟元素的位置。首先看看父元素的高度塌陷。假设有一个容器，其中两个子元素，一个子元素向左浮动，一个子元素向右浮动。代码如下：.wrapper { border: 2px dashed #ccc; } .wrapper > div { width: 80px; height: 60px; border: 1px dashed #444; } .floatL { float: left; } .floatR { float: right; }<div class = "wrapper"> <div class = "floatL">box1 </div> <div class = "floatR">box2 </div> </div>上述容器 wrapper 的高度为auto，且只包含浮动元素。由于浮动元素脱离了文档流，因此，容器 wrapper 就相当于一个空标签，其高度就会塌陷为零，使得浮动元素溢出到容器外面。这种塌陷会影响、甚至破坏布局，如果父元素没有边框，也不包含任何可见背景，这个问题就很难被注意到，但它却是一个很重要的问题。再来看看浮动元素如何影响兄弟元素的位置。当容器的高度为 auto，且只包含浮动元素时，如果浮动元素的高度不相同，而剩余空间足够容纳后面的元素时，后面的元素就会上跳到剩余的空间。代码如下：.wrapper { border: 2px dashed #ccc; } main { float: left; } aside { float: right; } footer { float: left; }<div class = "wraper"> <main>main</main> <aside>aside</aside> <footer>footer</footer> </div>上述的布局为两栏布局，主栏向左浮动，侧栏向右浮动，并且侧栏的高度小于主栏的高度。页脚便会上跳到侧栏的剩余空间。很显然，无论是高度塌陷，还是影响兄弟元素的位置，都不是使用浮动的目的。浮动只是为了改变元素的布局，却造成了不必要的影响。因此，需要清除浮动带来的影响。CSS中，把清除浮动影响所进行的处理，叫做清理浮动（或清除浮动）。一般有两种处理思路：使用 clear属性和让容器创建一个BFC。每种思路中都包含多种方法，但并不是每一种方法都尽善尽美，接下来简单介绍这些方法的原理及适用场合，可以根据实际情况，选择合适的方法。使用 clear属性CSS中的 clear属性，用来规定在元素的哪一侧不允许出现浮动元素，可选值有 none | left | right | both，默认值为 none，表示不清除，左右两侧均允许出现浮动元素。left 表示清除左侧，在左侧不允许出现浮动元素；right 表示清除右侧，在右侧不允许出现浮动元素；both 表示清除两侧，左右两侧均不允许出现浮动元素。1）使用带clear属性的空元素这也是W3C推荐使用的方法，首先在CSS中定义一个清理的 class，然后在浮动元素的后面，使用一个空元素 <div class = "clear"></div> 或 <br class = "clear" /> 。如：.clear { clear: both; }<div class = "wraper"> <div class = "floatL">box1 </div> <div class = "floatR">box2 </div> <br class = "clear" /> </div> 这种方法的优点是简单、代码少、浏览器兼容性好。但是，需要添加无语义的html元素，违背了表现和内容相分离的原则，代码不够优雅，增加了后期维护的难度。2）借用邻接元素处理什么都不做，给浮动元素后面的那个元素添加 clear属性。假如在浮动元素后面有一个 p 元素，可以为 p 元素添加 clear属性，来间接清除浮动。如：<div class = "wraper"> <div class = "floatL">box1 </div> <div class = "floatR">box2 </div> <p class = "clear"></p> </div>如果你很明确的知道接下来的元素是什么，这个方法很不错，它不需要 hack，不添加额外的元素。但是，使用这种方法，必须确保浮动元素后面确实有元素。如果没有元素，巧妇难为无米之炊，也没有办法。3）使用CSS的 :after 伪元素结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和触发布局的 IE hack，可以完美兼容当前各大主流浏览器。给包含浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个 :after 伪元素，在元素末尾添加一个看不见的块元素，让这个块元素来清除浮动。.clearfix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }<div class = "wrapper clearfix"> <div class = "floatL">box1 </div> <div class = "floatR">box2 </div> </div>通过CSS伪元素，在容器的末尾，插入一个点 "."，然后通过 height 和 visbility 属性使其不可见，再为插入的点设置 clear属性来清除浮动，其原理跟上述两种方法类似。事实上，上述方法插入任何内容，都可以清除浮动。当然，如果插入一个空格的话，就不必设置 height 和 visbility 属性，代码会跟简洁。如：.clearfix:after { content: ""; clear: both; display: block; }需要注意的是，由于IE7及以下的版本不支持 :after 伪元素，因此还需要为 .clearfix 设置width、或 height、或 zoom 等一系列属性，来触发布局（即，使IE私有属性 hasLayout 的值为 true）。如：.clearfix { *zoom: 1; }在这些属性值中，zoom 用于设置元素的缩放比例，取值 1 就会使用元素的实际尺寸。因此，使用 zoom: 1 既可以触发布局，又不会对元素造成其他影响，相对而言比较安全。让容器创建BFC可以利用BFC特性，来清除浮动。准确的讲，说清除浮动不太合适，应该说是让容器创建一个BFC，来包含浮动元素。可以为容器设置以下属性，来创建一个新的BFC，间接实现清除浮动的效果：float: left | right position: absolute | fixed overflow: hidden | auto | scroll display: inline-block | table-cell | table | flex | inline-flex虽然设置上述属性都可以创建BFC，实现清除浮动的效果，但是，float、position、display 属性可能会影响整体布局。因此，最常用的还是设置 overflow 属性。1）让容器浮动让容器浮动后，容器就会创建一个新的BFC，使它可以包含浮动元素。计算BFC的高度时，浮动子元素也参与计算。因此，容器的高度就表现正常，其他框的位置也就正常了。.wrapper { float: left; border: 2px dashed #ccc; }让容器浮动后，容器的高度确实没有塌陷，但是，容器的宽度可能会发生变化，因为浮动元素的宽度是有其内容决定的（显式设置 width 属性者除外），这可能会影响整体布局。2）为容器添加 position 属性如果为容器设置 position: absolute 或 position: fixed，容器就会创建一个新的BFC，使它可以包含浮动元素。.wrapper { position: absolute; border: 2px dashed #ccc; }另外，由于IE7及以下的版本不支持BFC，还需要触发布局。设置 position: absolute，IE6和IE7都可以触发布局。但是，IE6不支持 position: fixed，还需要为容器设置 zoom: 1，来触发布局。3）为容器添加 overflow 属性如果为容器设置 overflow: hidden 或 overflow: auto，容器就会创建一个新的BFC，使它可以包含浮动元素。.wrapper { overflow: hidden; border: 2px dashed #ccc; }另外，由于IE7及以下的版本不支持BFC，还需要触发布局。在IE7中，把 overflow属性设置为 visible 之外的值，就可以触发布局，IE6则不行。因此，在IE6中，可以为容器设置 zoom: 1，来触发布局。这个方法不需要额外元素，有着较好的语义性，也比较简单。但是，需要要记住，overflow 属性不是为清除浮动而定义的，注意不要隐藏了不该隐藏的内容或触发了不必要的滚动条。说明：BFC 与 hasLayout从表现上来说，hasLayout 跟 BFC 的功能很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中的一系列 bug。既然 hasLayout 有着跟 BFC 相似的功能，而 IE7 及以下的版本不支持 BFC。因此，为了避免不同浏览器下的表现差异，在实际开发中，需要创建 BFC 的元素，同时也要触发 hasLayout。事实上，在实际开发中，很多莫名其妙的问题，都是由此产生的。当然同样地，如果一个元素没有创建 BFC，也要尽量保证它没有触发 hasLayout 。

css实现样式渐变色 CSS渐变色是一种很常见的设计元素，它可以让网页看起来更加流畅自然。下面我们就来看看如何使用CSS实现渐变色效果。/*线性渐变*/ background: linear-gradient(to right, #FFC371, #FF5F6D); /*径向渐变*/ background: radial-gradient(circle, #FFC371, #FF5F6D); /*渐变色条纹*/ background: repeating-linear-gradient(to right, #FFC371, #FF5F6D 20%, #FFC371 40%);可以看到，我们需要使用background属性来设置渐变色。其中，线性渐变使用linear-gradient函数，径向渐变使用radial-gradient函数，渐变色条纹使用repeating-linear-gradient函数。在函数内，我们需要使用一些参数来指定渐变的方向、颜色等信息。比如，to right表示线性渐变的方向是从左到右，circle表示径向渐变的形状为圆形。同时，我们还需要指定渐变色的起止颜色。可以使用十六进制颜色值或者rgb/rgba值来进行设置。最后，我们还可以设置渐变色的位置和重复次数。在repeating-linear-gradient函数内，我们可以使用百分比来指定每个重复单位的长度。CSS渐变色的运用非常灵活，可以用于按钮、文本框、背景等多种设计元素中，让页面效果更加出色。

windows开发环境备份，再也不怕重装系统了 软件安装在非系统盘开发软件安装在非系统盘，建好目录。重装系统后，只是重置系统盘，所以这些软件不需要重新安装。譬如 java 相关目录：PS D:\java> ls Directory: D:\java Mode LastWriteTime Length Name ---- ------------- ------ ---- d---- 2023/10/26 15:28 jdk d---- 2023/10/26 23:45 maven d---- 2023/10/26 17:29 mysql d---- 2023/10/11 23:31 nginx d---- 2023/1/27 17:11 Tomcat d---- 2023/10/11 22:55 UJCMS譬如 node 相关目录：PS D:\node> ls Directory: D:\node Mode LastWriteTime Length Name ---- ------------- ------ ---- l---- 2023/8/29 19:52 nodejs -> D:\node\nvm\v14.21.1 d---- 2023/9/29 19:51 nvm d---- 2023/10/3 21:01 pnpm其他 git、python 等：PS D:\develop> ls Directory: D:\develop Mode LastWriteTime Length Name ---- ------------- ------ ---- d---- 2023/10/6 21:03 Anaconda3 da--- 2023/10/18 22:38 DBeaver d---- 2023/5/4 20:34 ffmpeg-master-latest-win64-gpl d---- 2023/6/1 17:21 Git d---- 2023/6/19 13:03 HeyTapThemeEditor d---- 2023/10/15 11:20 HskDDNS d---- 2019/4/13 17:24 MongoDB d---- 2023/6/10 14:50 python d---- 2023/10/11 18:20 WPS Office环境变量恢复主要是恢复环境变量里的 Path 值，将相关CMD指令导向具体软件位置先新建系统变量，将以下需要的公共变量填入变量名(N)变量值(V)备注CATALINA_HOMED:\java\Tomcat\apache-tomcat-8.5.93TomcatJAVA_HOMED:\java\jdk\JDKNVM_HOMED:\node\nvmnvmNVM_SYMLINKD:\node\nodejsnvm修改 Path 变量点击如下图所示的 编辑文本 按钮，可以整行输入所有 path 变量值粘贴后，请将无用的变量值删除D:\java\jdk\bin\; D:\develop\python\Scripts\; D:\develop\python\;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\; C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common; C:\Program Files\dotnet\;%NVM_HOME%;%NVM_SYMLINK%; C:\dev;Microsoft VS Code\bin; D:\develop\Git\cmd; C:\dev\Microsoft VS Code\bin; D:\Tools\微信web开发者工具\dll; D:\Tools\OpenSSH\bin; D:\Tools\cygwin64\bin; D:\Tools\cygwin64\sbin; D:\Tools\windows\platform-tools;%CATALINA_HOME%\lib;%CATALINA_HOME%\bin; C:\Program Files\PowerShell\7\; C:\Program Files\MySQL\MySQL Server 8.0\bin;恢复后，就可以验证相关CMD命令是否正常了，如PS C:\Users\Administrator> java -version openjdk version "1.8.0_382" OpenJDK Runtime Environment (Zulu 8.72.0.17-CA-win64) (build 1.8.0_382-b05) OpenJDK 64-Bit Server VM (Zulu 8.72.0.17-CA-win64) (build 25.382-b05, mixed mode)win11环境优化右键菜单恢复成win10样式新建 txt 文件，复制以下内容，存入后保存，修改文件后缀为 .cmd，然后双击执行或右键打开reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve taskkill /f /im explorer.exe & start explorer.exe恢复win11菜单，同理reg delete "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}" /f taskkill /f /im explorer.exe & start explorer.exe任务栏一键居左新建 txt 文件，复制以下内容，存入后保存，修改文件后缀为 .reg，然后双击执行或右键合并Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced] "TaskbarAl"=dword:00000000任务栏一键居中，同理Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced] "TaskbarAl"=dword:00000001win11文件管理器修改删除win11资源管理器左侧图库，方法同2Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Classes\CLSID\{e88865ea-0e1c-4e20-9aa6-edcd0212c87c}] "System.IsPinnedToNameSpaceTree"=dword:00000000删除win11资源管理器左侧图库，方法同2Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer] "HubMode"=dword:00000001 [-HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Desktop\NameSpace_36354489\{f874310e-b6b7-47dc-bc84-b9e6b38f5903}]常用软件恢复win11轻松设置Windows11轻松设置 是一款第三方软件，旨在帮助用户更轻松地配置和优化Windows 11的各种设置。推荐去 bilibili 或 远景论坛 搜索下载。解压缩软件 WinRAR请自行搜索安装报，或去 (官网)[https://www.rarlab.com/download.htm] 下载命令行工具 Windows Terminal打开应用商店 Microsoft Store，搜索 Terminal 后，点击安装office 套件安装 Office Tools PLus 软件，一键部署激活，关闭安全软件，使用 HEU_KMS_Activator_v30 激活，此软件下载请自行搜索Adobe 系列软件，如 PS请自行下载安装包，或去官网安装 Adobe Creative Cloud 后（点击 试用，下载安装），可打开此软件安装一系列设计软件激活，关闭安全软件，使用 Adobe GenP 3.0 激活，，此软件下载请自行搜索截图工具 Snipaste打开应用商店 Microsoft Store，搜索 Snipaste 后，点击安装

Content-type常见的值和PHP文件上传函数. Content-type常见的值application/x-www-form-urlencodedform表单的enctype的默认值multipart/form-data如果表单中有文件或者图片之类的不能被编码的元素,浏览器可以用此方式传输数据,提高传输效果和用户体验,也可以减少服务器的请求次数.application/json JSON.stringify此方法可以传输json数据, 跨脚本PHP文件上传，封装多文件上传函数上传单个文件html<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="my_file"> <button>提交</button> </form>phpprint_r(uploadFile($_FILES)); function uploadFile(array $files,$uploadPath='uploads'):array { if(!file_exists($uploadPath)){ //判断存储的路径是否存在,不存在即创建文件夹 mkdir($uploadPath,0777,true); //默认权限是 0777最大可能的访问权 } foreach($files as $file){ if($file['error']==0){ //error==0表示无错误 if(strstr($file['type'],'/',true)!=='image'){ //strstr 查找字符串中首次出现 true表示返回前面部分 $tips = $file['name'].'文件类型错误'; continue; }else{ //生成文件名 $targetName = $uploadPath.'/'.date('YmdHis').md5($file['name']).time().strstr($file['name'],'.'); // echo $targetName; // die; //将文件从临时位置移动到指定位置 if(!move_uploaded_file($file['tmp_name'],$targetName)){ $tips = $file['name'].'文件移动失败'; continue; //循环结构用用来跳过本次循环中剩余的代码并在条件求值为真时开始执行下一次循环。 }else{ $img[] = $targetName; } } } } if(!empty($tips)){ $res['error'] = $tips; } $res['fileRealPath'] = $img; return $res; }上传多个文件html<form action="uploads.php" method="post" enctype="multipart/form-data"> <input type="file" name="my_file[]" multiple> <button>多个文件上传</button> </form>php$res = upload($_FILES); print_r(uploadFile($res)); function uploadFile(array $files,$uploadPath='uploads/storage'):array { if(!file_exists($uploadPath)){ //判断存储的路径是否存在,不存在即创建文件夹 mkdir($uploadPath,0777,true); //默认权限是 0777最大可能的访问权 } foreach($files as $file){ if($file['error']==0){ //error==0表示无错误 if(strstr($file['type'],'/',true)!=='image'){ //strstr 查找字符串中首次出现 true表示返回前面部分 $tips = $file['name'].'文件类型错误'; continue; }else{ //生成文件名 $targetName = $uploadPath.'/'.date('YmdHis').md5($file['name']).time().strstr($file['name'],'.'); // echo $targetName; // die; //将文件从临时位置移动到指定位置 if(!move_uploaded_file($file['tmp_name'],$targetName)){ $tips = $file['name'].'文件移动失败'; continue; //循环结构用用来跳过本次循环中剩余的代码并在条件求值为真时开始执行下一次循环。 }else{ $img[] = $targetName; } } } } if(!empty($tips)){ $res['error'] = $tips; } $res['fileRealPath'] = $img; return $res; } // 处理多文件的格式 function upload(): array { $i = 0; foreach ($_FILES as $k => $file) { // printf('<pre>%s</pre>', print_r($file, true)); foreach ($file['name'] as $k => $v) { $files[$i]['name'] = $file['name'][$k]; $files[$i]['type'] = $file['type'][$k]; $files[$i]['tmp_name'] = $file['tmp_name'][$k]; $files[$i]['error'] = $file['error'][$k]; $files[$i]['size'] = $file['size'][$k]; $i++; } } // printf('<pre>%s</pre>', print_r($files, true)); return $files; }