原文标题：PSD文件里每个图层都自动保存成图片 PS如何把PSD文件里的每个图层都保存成图片？「PS全套自学教程」第18节：PSD文件里每个图层都自动保存成图片原创2022-05-16 21:24·PS自学部落 PS如何把PSD文件里的每个图层都保存成图片？ 1、打开要把每个图层都保存成图片的PSD素材：Ctrl+0如图： 2、目标：把图层花、图层组文字分别自动生成jpg和png格式的图片，具体操作如下 （1）菜单栏：文件&g

全新逐浪CMS解决方案频道上线，最爱逐浪那抹韵动动蓝-全新解决方案频道上线 www.z01.com/Project有朋友问，首屏的滚动非常好玩，其中文字跳动更是非常有特色，是怎么做的？这里分享一个名为jQuery.countto的插件 插件 jQuery.countto 中文 API 文档 Github 地址：https://github.com/mhuggins/jquery-countTo源码下载： -效果演示： -作用：一个 jQuery 插件，它将以指定的速度向上计数（或向下）到目标数（也就是意味着你要调用它的js得放在它的插件后面）。 jQuery countTo 插件jQuery countTo 是一个 jQuery 插件，它将以指定的速度向上计数（或向下）到目标数字，在 HTML DOM 元素中呈现。 要求：jQuery countTo 需要最新版本的 jQuery。 用法：使用此插件有两种主要方法：通过 DOM 节点上的数据属性，以及通过显式传递给 countTo 函数的 JS 选项。 这两种方法也可以混合和匹配。数据属性优先于 JS 选项。 数据属性这种方法允许您定义 data-*任何 DOM 元素将作为计数器容器的属性。当您在构建 DOM 时已经知道值时，这非常有用。 <span class="timer" data-from="25" data-to="75"></span> <script type="text/javascript"> $('.timer').countTo(); </script> 演示所有可能使用的选项的更详细示例如下。 <span class="timer" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="50"></span> <script type="text/javascript"> $('.timer').countTo(); </script> 有关各种可用选项的详细信息，请参阅下面的“ 选项”部分。 JavaScript 选项此方法允许您将值传递给 countTo 函数。当您在呈现 DOM 时不知道值时，这非常有用。 <span class="timer"></span> <script type="text/javascript"> $('.timer').countTo({from: 0

<!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <meta name="keywords" content="" /> <!-- 说明 --> <meta name="description" content="" /> <!-- 作者 --> <meta name="author" content="" /> <!-- 设置文档宽度、是否缩放 --> <meta name="viewport" content="width=device-width

何谓HSLHSL色彩模式：就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。 因为人们看到颜色第一时间会产生“这是什么颜色？深浅如何？明暗如何？”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色，所以HSL色彩模式是人类对颜色最直接的感知。HSL(H

前言一、概述二、基本概念 2.1 容器和项目2.2 行和列2.3 单元格2.4 网格线 三、容器属性 3.1 display 属性3.2 行与列属性定义 明文定义百分比定义repeat()定义auto-fill 关键字fr 关键字minmax()auto 关键字网格线名称定义布局实例 gap沟槽定义grid-template-areas 区域属性grid-auto-flow 排列属性垂直对齐属性水平对齐属性3.8 指定列（行）定义合并简写 四、项目属性 4.1 项目位置属性4.2 合并简写4.4 内容对齐定义 扩展阅读简介基础知识和浏览器支持 桌面(Desktop) 浏览器手机(Mobile) / 平板(Tablet)浏览器 重要术语 网格容器(Grid Container)网格项(Grid Item)网格线(Grid Line)网格轨道(Grid Track)网格单元格(Grid Cell)网格单元格(Grid Cell) 扩展阅读 前言细心的网友可能发现了，在最新的Zoomla!逐浪CMS中，调试网页时，会有一些新的变化，比如有一个蓝色的线架，同时有grid字样，如下图所示： 嗯，web开发者的自学打怪又要晋级了。这就是本期的gird布局教程。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。 grid布局又称CSS网格布局，（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。grid中的一些概念网格容器（Grid Container）元素应用display:grid，它是其所有网格项的父元素。网格项（Grid Item）网格容器的直接子元素网格线（Grid Line）组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并居于行或列的任意一侧网格轨道（Grid Track）两个相邻的网格线之间为网格轨道。网格单元（Grid Cell）两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。网格区（Grid Area）网格区是由任意数量网格单元组成 grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，相信不久的将来grid将成为每一个前端工作人员必备的布局技能。 一、概述网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。 二、基本概念学习 Grid 布局之前，需要了解一些基本概念。 父元素上的属性: 属性 说明 display 设置grid布局 grid-template-rows 设置网格的行数 grid-template-columns 设置网格的列数 grid-template-areas 根据子元素的网格名字来排列 grid-column-gap 用来指定竖网格轨道的大小 grid-row-gap 用来指定行网格轨道的大小 grid-gap grid-column-gap和grid-row-gap这两个属性的缩写方式 justify-items 网格中所有单元格中的内容在X轴的对齐方式 align-items 网格中所有单元格中的内容在Y轴的对齐方式 justify-content 来设置整个网格在网格容器中的X轴的排列方式 align-content 来设置整个网格在网格容器中的Y轴的排列方式 grid-auto-columns 设定隐藏的网格的高 grid-auto-rows 设定隐藏的网格的宽 grid-auto-flow 在布局的时候，选择网格填充的方法 2.1 容器和项目采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。 <div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div> 上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。 2.2 行和列容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。 上图中，水平的深色区域就是”行”，垂直的深色区域就是”列”。 2.3 单元格行和列的交叉区域，称为”单元格”（cell）。 正常情况下，n行和m列会产生n*m个单元格。比如，3行3列会产生9个单元格。 2.4 网格线划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。 正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线，比如三行就有四根水平网格线。 上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。 三、容器属性Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。 3.1 display 属性display: grid指定一个容器采用网格布局

今天遇到一个很奇怪的问题

话说发哥四年前写了一个网页，如上图效果，实际网址http://pano.z01.com ，话说做好时是正常的，突然某一天，客户说你这个网站动画不见了，这是什么原因？结果检查脚本一切正常。其实也不是动画完全消失，关键是要用鼠标点击一下，才可以播放，否则autoplay效果无用，不能播放。 后来检查，原来是chrome的脚本机制变更造成的。在F12调试中，会出出： HTML5<video>报错Uncaught (in promise) DOMException 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。 <video src="YOUR_VIDEO_URL" autoplay></video> 如果你用 javascript 代码显式调用play方法： <video></video> <script type="text/javascript"> var vdo = $("video")[0]; //jquery vdo.src = "YOUR_VIDEO_URL"; vdo.oncanplay = function(){ this.play(); }; </script> 你将会在控制台看到如下异常： Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. Firefox也有类似的异常提示： NotAllowedError: The play method is not allowed by the user agent or the platform in the current context

SVG图片压缩这是个通过借助npm包的一种方式去压缩svg的图片，由于阿里的图库自己创建的图标有大小的限制，当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩。 1、下载node.js （地址：https://nodejs.org/zh-cn/）即前提，必须本地部署好npm，否则就跑不起来。 2、下载svgo的包下载node.js成功后，使用命令行安装 npm install -g svgo 项目官方网址：https://www.npmjs.com/package/svgo 安装成功会有如下提示：（类似的提示语） Nodejs-based tool for optimizeing SVG vector graphics files Usage使用示例: svgo [OPTIONS] [ARGS] 3、压缩svg在控制台输入： svgo E:\a.svg -o E:\b.svg 第一个路径是需要压缩文件路径； -o OUTPUT 第二个是压缩后存放地址。也可以是完整目录形式，如： svgo -f .\svgFrom_tm\ 4、官方示例$ svgo test.svg or: $ svgo *.svg $ svgo test.svg -o test.min.svg $ svgo test.svg other.svg third.svg $ svgo test.svg other.svg third.svg -o test.min.svg -o other.min.svg -o third.min.svg # with STDIN / STDOUT: $ cat test.svg | svgo -i - -o - > test.min.svg with folder $ svgo -f ../path/to/folder/with/svg/files or: $ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output $ svgo *.svg -o ../path/to/folder/with/svg/output with strings: $ svgo -s '<svg version="1.1">test</svg>' -o test.min.svg or even with Data URI base64: $ svgo -s 'data:image/svg+xml;base64

文章标题: Marp工具：一种基于Markdown「写」PPT 的新方法关键字 : markdown

VSCode中使用Markdown插入图片，如何设置图片的尺寸及显示位置 1、文字居中：逐浪软件 左对齐：逐浪软件 2、插入图片及图片居中、定义大小让图片靠左 显示基本形式是: 例子： 图片靠右显示 第二种方法： 我们在原本图片链接后面（括号里面）先加上一个#号，然后写 pic_right/center/left 就OK!如下图： 定义尺寸第一种方法： 第二种方法：更改位置命令不要#号且pic_r

介绍特性环境搭建 全局安装创建项目目录始化项目，建立并编辑 package.json建立基本目录修改配置文件 - config.js修改README.md运行项目 深度开发 配置导航配置侧边栏总结 模板主题设置其它插件一份完整的源码 介绍VuePress是一个用来构建博客以及简易网站的项目，基于vuejs，由尤雨溪亲自主持的一个静态项目，静态打包。 基于这样的系统，可以方便用于小型文章发布，如帮助中心、官方博客，支持解析md文件。 VuePress由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。它以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作；享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题；它会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。 VuePress官网：[https://vuepress.vuejs.org/zh/] 特性 为技术文档而优化的内置 Markdown 拓展在 Markdown 文件中使用 Vue 组件的能力Vue 驱动的自定义主题系统自动生成 Service WorkerGoogle Analytics 集成基于 Git 的 “最后更新时间”多语言支持自由主题与插件设置 其中默认主题包含 响应式布局可选的主页简洁的开箱即用的标题搜索Algolia 搜索可自定义的导航栏 和 侧边栏自动生成的 GitHub 链接和页面的编辑链接 上述都是官网所提供的内容；下面让我们来真正实践下如何快速建立一个技术文档，当然，你熟悉它的操作* 后，优化成为自己的博客也是不错的选择！本着尤大出品必是精品的原则，相信VuePress未来发展会很不错! *本教程目的在于快速搭建技术文档的基本模型，更具体的配置和说明请参考官网配置*https://vuepress.vuejs.org/zh/config/ https://vuepress.vuejs.org/zh/default-theme-config/ 环境搭建查看nodejs版本注意：Node.js 版本 >= 8 node -v 全局安装npm install -g vuepress 创建项目目录mkdir vuepress-demo cd vuepress-demo 始化项目，建立并编辑 package.jsonnpm init -y 进入package.json，修改脚本内容 { "scripts": { "docs:dev": "vuepress dev docs"

跨域调用json问题闲暇之时，做了一个博客站点，站点发布网络之后程序功能完成，最后发现了一个跨域的问题，比如我使用abc.com打开系统，一切正常，后台没有任何文件请求报错问题，然后我又使用了www.abc.com再试一下，结果发现一些字体文件或引用外部css文件等请求失败问题 Font from origin 'http://lovefeel.top' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.lovefeel.top' is therefore not allowed access. 浏览器调试报错如下： IIS下的解决方案# 在IIS添加如下标头即可 Access-Control-Allow-Headers：Content-Type

什么是Masonry安装Install 下载CDN包管理 入门Getting started HTMLCSS 通过jQuery初始化通过原生JavaScript初始化在HTML中初始化布局Layout 组件尺寸响应式布局imagesLoaded配置项Options 必选配置项Recommended itemSelectorcolumnWidth 布局Layout 组件尺寸Element sizingGutter（间距）css:horizontalOrderpercentPositionStampfitWidthoriginLeftoriginTop设置（Setup）transitionDurationstaggerresizeinitLayout 方法（Methods）布局（Layout） layoutItemsstampunstamp增加&移除控件prependedaddItems 事件（Events） onoffoncedestroygetItemElementsMasonry.data 事件 jQuery事件绑定原生JS事件绑定 Masonry 事件 layoutCompleteremoveComplete 图片加载优化 imagesloaded配置与使用 安装方式 html代码配置方式设置网格宽度全部属性配置方法调用方式全部事件Utilties逐浪CMS团队一个DEMO 致小威：你在胶东半岛，我在江南吃草。献上瀑布流插件，去年秋天你就要，今天全文整理好，祝你一切都顺心，逐浪家庭人人好。—赠给知名站长、山东上格科技、威海房产网5yaomaifang.com小威同学 什么是Masonry一个优秀的瀑布流组件，可以自由的方便的定你的瀑布流。官网链接： https://masonry.desandro.com/ Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验，Masonry将是不错的选择。 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格

不久，有人问我：“怎么从 Linux 系统传文件到 Windows 服务器，不能用 FTP 协议。” 文件数量不大、用户数不多的环境，用 SFTP 协议就可以，防火墙都只需配置一个端口，没 FTP 那么麻烦。 我们都知道 Linux 发行版基本都自带 SFTP 客户端和服务端，只需在 Windows 系统安装 SFTP 服务端即可。其实适用于 Windows 系统的 SFTP 服务器软件不少，但免费、不限制连接数、不限制用户数的不多

一、启动SFtp二、上手vs code SFTP插件 2.1 初始配置2.2解决乱码问题 三、SFTP配置 3.1常用配置3.2示例配置 四、SFTP使用五、扩展阅读 一、启动SFtp话说小编最近爱上了vs code开发工具，一是方便敏捷，二是与逐浪CMS结合开发非常高效。于是想配备一款FTP工具。用上了大家推荐的sftp插件，就是下面这款： 作为一款FTP插件确实是很优秀，因为他提供了其它FTP插件所不具备的文件目录浏览功能，可视化操作非常方便。 安装它就是非常方便了，只要在扩展中，搜索：sftp，就能完成安装。 二、上手vs code SFTP插件2.1 初始配置安装好了sftp插件后，按f1或ctrl+shift+p，呼出命令，输入sftp，就能配置ftp信息。 配置文件初始信息如下所示： { "name": "My Server"

传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解 CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover

ARIA 为Web app提供满足用户不同需求的解决方案。建设起用户和软件之间的桥梁。新的HTML5标准中增加 aria-* 的标签属性，全称Accessible Rich Internet Application。与role标签属性配合使用。role属性表示一个非标准的tag的实际作用。比如用div做button，那么设置div的 role=“button”，辅助工具就可以认出这实际上是个button。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。 最简单的应用比如， <div role="checkbox" aria-checked="checked"></div> 辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。 Accessible Rich Internet Applications (ARIA) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。 ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。 ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。 ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。 这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA。例如，原生元素具有内置的键盘可访问性、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。 下面是一段进度条组件的代码： <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> 由于这个滚动条是用<div>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，role="progressbar"这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。aria-valuemin 和aria-valuemax 属性表明了进度条的最小值和最大值。 aria-valuenow则描述了当前进度条的状态， 因此它得用JavaScript来更新。 除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示： // Find the progress bar <div> in the DOM. var progressBar = document.getElementById("percent-loaded"); // Set its ARIA roles and states

netlify 是一个提供静态网站托管的服务，提供CI服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等静态网站。* Netlify 有如下的功能: 能够托管服务，免费 CDN能够绑定自定义域名，支持SSL证书支持自动构建提供 Webhooks 和 API Netlify使用 Netlify 的使用非常直观和简单，和网站的自我介绍和定位一样简答，使用 GitHub 登录，然后获

先晒下版本PS D:\vue\vueJS-001\dist> vue -V@vue/cli 4.1.2 一个好网站，没有优秀的title以及keywords\Keyword就不行，在vue cli4中如何定义这些呢，这里分享两个方法。 方法一：使用vue-router设置每个页面的title进入 router 文件夹底下的index.js文件 首先引入： import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址： routes: [ { /* （首页）默认路由地址 */ path: '/'

打开浏览器在搜索栏里面输入: https://rubyinstaller.org/downloads/进入到 Ruby 官网地址进行下载