引入魔改样式的方法很简单，自建一个css文件，然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
CSS高级技巧 精灵图 css sprites >为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites; > 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片 > 使用时主要移动背景图片位置，使用backgroud-position属性 > 一般情况下都是往上走，往左走，所以backgroud-position的值都是负值 字体图标iconfont > 字体图标展示的是图标，本质上是文字；可以改变颜色等属性 > 字体图标需要下载，
非布局样式-字体 * 字体 字重 颜色 大小 行高 和文字相关的一些 * 背景 边框 和盒子相关的 * 滚动 换行 跟 页面 和 布局有关 * 粗体 斜体 下划线 文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如 宋体) -- sans-serif 非衬线字体：字体笔画的开始和结束 都非常规则。如 屏幕上的文字(比如 黑体) -- monospace 等宽字体
1.菜单悬停效果的展示 一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天，我们希望与您分享一些菜单悬停效果。我们希望这一套启发你，并为你的下一个项目提供一些想
从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，
将布局中的 三个 链接图片 , 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;02CSS mask 让png等图标变色的技巧CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。03Web前端鼠标悬停实现显示与隐藏效果css定义，偏移量，相对定位，绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位，就是定义网页标签在运行时显示的位置 css提供Position属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置03【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。02前端运用图片的技巧总结原文 | https://ishadeed.com/article/image-techniques/02【Web技术】610- Web上的图片技巧前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。03CSS | 视差滚动 | 笔记image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化， 实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。 比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了， 因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。 （200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。02CSS高级技巧讲解display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要！03【CSS】526- CSS 控制图标颜色缺点是：当状态改变后，浏览器才去拉取active状态的图片，所以视觉上会有闪动，体验不好02CSS3入门https://www.runoob.com/css/css-tutorial.html01ps切图必知必会对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,但是我们是具体的实现者,实现从0到1的过程,至于前端ps操作,绝大多数工作是简单的切图(抠图),测量,图片简单的处理,将图片利用web技术进行填充布局实现静态页面展现就可以了,至于,ps软件,我也只是停留在简单的使用,有时候,在一些群里,看到一些小伙伴,对于切图,有些畏惧,打开ps软件,无从下手,有时候呢,即使自己曾今,ps技术玩的很溜,但是只要一段时间没有去接触,就会很陌生,一些习以为常的技巧,忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正02Axure RP8入门之基本操作篇格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。03跨平台开源游戏CodeTank是一个非常有趣的竞赛性编程游戏平台，通过几行简单的Javascript代码和CodeTank API，每个人都可以方便的构建属于自己富有智能和个性的坦克（Tank）机器人，并通过互联网进行在线互动和竞赛！04分享15个有用的，你可能还不知道的CSS小技巧，建议每个前端开发者都了解下为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。04前端妙用PS切图技巧，助你加薪一把话说，以前的前端工程师在入行时都当过「切图仔」或「切图女」。曾经，「切图」作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。04接口测试平台代码实现10：菜单页面升级在介绍项目列表之前，先让我们热热身，做一个各个页面都会出现的 右上角返回主页按钮，这里会学习到一些css属性和js的使用。 在之前的章节中，我们规定home.html 作为我们的主页。那么我们给其他人分享的平台地址应该是：你的ip:8000/home/03jquery nicescroll 配置参数jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", cursoropacitymax:1, cursorwidth:5, cursorborder:08css笔记从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便生了。05动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。00动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件大家好，不知道你们是否和我一样存在这样的困惑呢，虽然 CSS 入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性亲自动手实践的练习太少啦，因此不能进行灵活应用。不可否认 CSS 总让一些人找不到感觉，其实学好 CSS 真的没有太多的捷径，和JS 编程一样，要同等重视对待，不要因为简单而忽视，要多看和多练，因为现在的 CSS 不再是以前的 CSS 啦。01Typecho主题Handsome修改记录---（持续更新）usr/themes/handsome/component/footer.php删代码至如图所示02hexo主题next 7.X版本配置美化hexo主题next 7.X版本配置美化 我们主要对next主题进行了如下配置操作。前往Github 获取配置后的源文件。 设置中文语言 设置博主文字描述 设置博客文章连接为year/month/day/title.html格式 Menu增加关于、标签、分类、互动、搜索菜单 禁用关于、标签、分类菜单评论功能 添加添加RSS 设置背景图片。默认禁用，可以在themes/nexT/source/css/_custom/custon.styl文件中启用 设置Canvas_nest动态背景 图片快速加载设置 微信支03uni-app开发一个小视频应用(一)“ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，是一种终极的跨平台解决方案，这里的平台，主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 ” 01 开发一个小视频应用 一 初始化项目 打开HBuilderX IDE，新建一个名称为mini-video的初始化uni-app项目，这里勾选uni-app即可创建，项目创建完成后，打开pages07Hexo-Butterfly主题修改记录本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改；01Angularjs基础(八)AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo06bootstrap 文字颜色该段落使用了样式 "text-muted"。05面试官：CSS 面试题集锦z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面03用Python实现一个最新QQ办公版（TIM）的登录界面最近，QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式，看起来更加的清爽、简洁和高效了。02【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;02手撸一个前端天气卡片我给DouWeather（后称DW）的定位是网页小组件，也是出于这个考虑，我参考了如iOS系统的小部件、新版MIUI系统小组件、鸿蒙系统小部件、win11小组件，发现都无一例外具有同一特征：扁平化，圆角，选用无衬线字体，元素风格简洁，并且四者都在或背景或图标中大量使用渐变，使小部件表现得较为灵动。其中win11小部件添加了浅阴影，可能是为了让小部件从亚克力背景中凸显出来。05位图和SVG用法比较位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。 提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至06「译」如何用原生JS打造一款简易谷歌插件今天，我打算向你们展示如何用原生JS—-不依靠任何诸如React、Angular或者Vue框架的原生JS做一款谷歌插件。05第144天：PS切图方法总结PhotoShop从CS版本演变到现在的CC版本，切图功能发生了比较大的变化，我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；现在CC版本提出的精准切图，切图人员可以依赖计算机把图层对象精确的切割出来，这样切割出来的图层肯定比传统切图切出来的精准度高。另一方面，CC版本可通过脚本执行全自动切图，这样完全解放了切图人员的双手。02Bootstrap 响应式框架 第三集<meta http-equiv="x-ua-compatible" content="IE=edge">03zblog怎么在移动端显示/隐藏侧栏模块关于zblog主题模板手机移动端针对不同主题采用了不同的方案，有些是默认显示，有些不显示侧栏，总归没有一个完美的解决方案，所以今天就抽空水一篇文章，教大家怎么显示或者隐藏侧栏模板的内容。宁静致远主题没有侧栏，所以我们以这个主题模板为例，灌水开始。。。02本站同款宁静致远(Quietlee)自媒体博客主题模板，夜间模式及强大的SEO效果-ZBlog主题宁静致远(Quietlee)自媒体博客、新闻、资讯互动类主题模板及强大的SEO优化效果，此款主题源自《小灯泡设计》，移植TY程序的Spimes主题，致敬原作者，这是一款非常nice的主题模板，风格简约，兼容多媒体移动端显示，拥有独立的分享代码，不在依赖百度（想依赖也不行，百度分享官网都挂了），支持一键生成海报模式，还移植了源主题模板的阅读模式，优化了夜间模式代码，增加了网站首页底部CMS列表模块，后台自带开关，更多功能介绍请听我一一道来。02CSS笔记(16)CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.02前端性能优化常用方案1.在JS中尽量减少闭包的使用（原因：闭包会产生不释放的栈内存） A:循环给元素做事件绑定的时候，尽可能的把后期需要的信息（例如索引）存储到元素的自定义属性上，而不是创建闭包存储 B:可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包(例如单例模式) C:尽可能的手动释放不被占用的内存 ...02微信小程序中使用SVG图标SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。04CSSSprites在国内很多人叫css精灵是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.03前端测试题:(解析)解释css sprites 错误的是？它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.01【愚公系列】2023年03月 其他-Web前端基础面试题（CSS_42道）CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。02浅尝iconfont07【说站】Z-blogPHP常见问题答疑答：进入后台首页->在后台左侧进入“插件管理”->启动“静态管理中心”，在后台右上侧进入“设置管理”->进入“静态化管理中心”，根据情况和需要，选择或写入相应规则并保存，最后生成或添加ReWrite规则。**系统会自动判断你的web服务器是什么，具体规则可参考以下“伪静态问题”。01HTML+CSS+PS 编写京东商城首页前面铺垫写了不少HTML、CSS、Photoshop的文章，那么本篇章就是要结合起来挑战写写京东的商城首页了。05
CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。
css定义，偏移量，相对定位，绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位，就是定义网页标签在运行时显示的位置 css提供Position属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置
前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。
原文 | https://ishadeed.com/article/image-techniques/
前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。
image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化， 实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。 比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了， 因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。 （200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。
display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要！
缺点是：当状态改变后，浏览器才去拉取active状态的图片，所以视觉上会有闪动，体验不好
https://www.runoob.com/css/css-tutorial.html
对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,但是我们是具体的实现者,实现从0到1的过程,至于前端ps操作,绝大多数工作是简单的切图(抠图),测量,图片简单的处理,将图片利用web技术进行填充布局实现静态页面展现就可以了,至于,ps软件,我也只是停留在简单的使用,有时候,在一些群里,看到一些小伙伴,对于切图,有些畏惧,打开ps软件,无从下手,有时候呢,即使自己曾今,ps技术玩的很溜,但是只要一段时间没有去接触,就会很陌生,一些习以为常的技巧,忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正
格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。
CodeTank是一个非常有趣的竞赛性编程游戏平台，通过几行简单的Javascript代码和CodeTank API，每个人都可以方便的构建属于自己富有智能和个性的坦克（Tank）机器人，并通过互联网进行在线互动和竞赛！
为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。
话说，以前的前端工程师在入行时都当过「切图仔」或「切图女」。曾经，「切图」作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。
在介绍项目列表之前，先让我们热热身，做一个各个页面都会出现的 右上角返回主页按钮，这里会学习到一些css属性和js的使用。 在之前的章节中，我们规定home.html 作为我们的主页。那么我们给其他人分享的平台地址应该是：你的ip:8000/home/
jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", cursoropacitymax:1, cursorwidth:5, cursorborder:
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便生了。
大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。
大家好，不知道你们是否和我一样存在这样的困惑呢，虽然 CSS 入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性亲自动手实践的练习太少啦，因此不能进行灵活应用。不可否认 CSS 总让一些人找不到感觉，其实学好 CSS 真的没有太多的捷径，和JS 编程一样，要同等重视对待，不要因为简单而忽视，要多看和多练，因为现在的 CSS 不再是以前的 CSS 啦。
usr/themes/handsome/component/footer.php删代码至如图所示
hexo主题next 7.X版本配置美化 我们主要对next主题进行了如下配置操作。前往Github 获取配置后的源文件。 设置中文语言 设置博主文字描述 设置博客文章连接为year/month/day/title.html格式 Menu增加关于、标签、分类、互动、搜索菜单 禁用关于、标签、分类菜单评论功能 添加添加RSS 设置背景图片。默认禁用，可以在themes/nexT/source/css/_custom/custon.styl文件中启用 设置Canvas_nest动态背景 图片快速加载设置 微信支
“ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，是一种终极的跨平台解决方案，这里的平台，主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 ” 01 开发一个小视频应用 一 初始化项目 打开HBuilderX IDE，新建一个名称为mini-video的初始化uni-app项目，这里勾选uni-app即可创建，项目创建完成后，打开pages
本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改；
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo
该段落使用了样式 "text-muted"。
z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
最近，QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式，看起来更加的清爽、简洁和高效了。
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
我给DouWeather（后称DW）的定位是网页小组件，也是出于这个考虑，我参考了如iOS系统的小部件、新版MIUI系统小组件、鸿蒙系统小部件、win11小组件，发现都无一例外具有同一特征：扁平化，圆角，选用无衬线字体，元素风格简洁，并且四者都在或背景或图标中大量使用渐变，使小部件表现得较为灵动。其中win11小部件添加了浅阴影，可能是为了让小部件从亚克力背景中凸显出来。
位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。 提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至
今天，我打算向你们展示如何用原生JS—-不依靠任何诸如React、Angular或者Vue框架的原生JS做一款谷歌插件。
PhotoShop从CS版本演变到现在的CC版本，切图功能发生了比较大的变化，我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；现在CC版本提出的精准切图，切图人员可以依赖计算机把图层对象精确的切割出来，这样切割出来的图层肯定比传统切图切出来的精准度高。另一方面，CC版本可通过脚本执行全自动切图，这样完全解放了切图人员的双手。
<meta http-equiv="x-ua-compatible" content="IE=edge">
关于zblog主题模板手机移动端针对不同主题采用了不同的方案，有些是默认显示，有些不显示侧栏，总归没有一个完美的解决方案，所以今天就抽空水一篇文章，教大家怎么显示或者隐藏侧栏模板的内容。宁静致远主题没有侧栏，所以我们以这个主题模板为例，灌水开始。。。
宁静致远(Quietlee)自媒体博客、新闻、资讯互动类主题模板及强大的SEO优化效果，此款主题源自《小灯泡设计》，移植TY程序的Spimes主题，致敬原作者，这是一款非常nice的主题模板，风格简约，兼容多媒体移动端显示，拥有独立的分享代码，不在依赖百度（想依赖也不行，百度分享官网都挂了），支持一键生成海报模式，还移植了源主题模板的阅读模式，优化了夜间模式代码，增加了网站首页底部CMS列表模块，后台自带开关，更多功能介绍请听我一一道来。
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.
1.在JS中尽量减少闭包的使用（原因：闭包会产生不释放的栈内存） A:循环给元素做事件绑定的时候，尽可能的把后期需要的信息（例如索引）存储到元素的自定义属性上，而不是创建闭包存储 B:可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包(例如单例模式) C:尽可能的手动释放不被占用的内存 ...
SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
答：进入后台首页->在后台左侧进入“插件管理”->启动“静态管理中心”，在后台右上侧进入“设置管理”->进入“静态化管理中心”，根据情况和需要，选择或写入相应规则并保存，最后生成或添加ReWrite规则。**系统会自动判断你的web服务器是什么，具体规则可参考以下“伪静态问题”。
前面铺垫写了不少HTML、CSS、Photoshop的文章，那么本篇章就是要结合起来挑战写写京东的商城首页了。
领取专属 10元无门槛券
手把手带您无忧上云
