首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

个人小站折腾后记

效果预览 : 新建文件 [BlogRoot]\source\js\cursor.js ,在里面写上如下代码: var CURSOR; Math.lerp = (a, b, n) => (1 - n)..."> 同时可以自定义 CSS 中添加如下样式来控制图标默认大小和颜色等属性(若已经项目设置中勾选了彩色选项,则无需再定义图标颜色),写法与字体样式类似,这恐怕也是它被称为 iconfont...hexo d 时也会重新生成 source:自己写的博客源码 db.json 文件: hexo s 快速启动所需的数据库 themes:主题文件夹(魔都在里面啦) package-lock.json...: white # 文字鼠标悬浮颜色 background_color: "#f2f2f2" # 文字背景默认颜色 background_hover_color: "#b30070" # 文字背景悬浮颜色...hexo d 时也会重新生成 source:自己写的博客源码 db.json 文件: hexo s 快速启动所需的数据库 themes:主题文件夹(魔都在里面啦) package-lock.json

91450

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

1.前言 自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。...注意2:子菜单ul要用.demo-nav li ul{height: 0;overflow:hidden;}隐藏,显示的时候再设置.demo-nav li:hover ul{overflow: visible...如果不加,实际上子菜单ul,以及子菜单ul下面的li一直页面上,如果鼠标移上去子菜单ul,以及子菜单ul下面的li。那么实际上也会触发父级li的hover。 ? ?...{ height: 280px; } //鼠标移入li,h3背景颜色和字体颜色改变 .demo-slide-tab li:hover h3 {...对于js的方式来说,这个就是触发的事件就可以了,对于插件来说,可能就一个插件就行了!对于css3实现的话,这个就不但要css样式了,也要html结构了!

3.9K40
您找到你想要的搜索结果了吗?
是的
没有找到

能用HTMLCSS解决的问题就不要使用JS

导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。...如果你用js控制,那么脚本加载好之前,当前页面是不会高亮的,而脚本加载好之后突然就高亮了。所以用js吃力不讨好。...,又监听了mouse事件,用mouse控制显示隐藏,双重效果会有什么情况发生,如果按正常套路,mouse事件里面hover的时候,添加了一个display: block的style,会覆盖掉CSS的设置...但是实际情况下会有意外发生,那就是移动端iphone上面,触摸会触发CSS的hover,并且这个的触发会很高概率地先于touchstart事件,在这个事件里面会判断当前是显示还是隐藏的状态,由于css...,可以借助媒体查询动态地改变display的属性,从而它排列的方式。

2.9K20

能用HTMLCSS解决的问题就不要使用JS

导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。 ? ?...如果你用js控制,那么脚本加载好之前,当前页面是不会高亮的,而脚本加载好之后突然就高亮了。所以用js吃力不讨好。...,又监听了mouse事件,用mouse控制显示隐藏,双重效果会有什么情况发生,如果按正常套路,mouse事件里面hover的时候,添加了一个display: block的style,会覆盖掉CSS的设置...但是实际情况下会有意外发生,那就是移动端iphone上面,触摸会触发CSS的hover,并且这个的触发会很高概率地先于touchstart事件,在这个事件里面会判断当前是显示还是隐藏的状态,由于css...这样还有一个好处,就是响应式开发的时候,可以借助媒体查询动态地改变display的属性,从而它排列的方式。

3.7K40

安装node.js 环境,这样前段的vue项目就可以cmd里面启动了

这两个空文件夹的作用 node-global :npm全局安装位置 node-cache:npm 缓存路径 配置环境变量: 将node.exe 所在的目录添加到path环境变量,这样我们使用命令行时就可以在任意路径使用...,进来就是系统属性 以上截图中,找到环境变量 ,点击进去 以上有两个位置,一个是用户变量,一个是系统变量,我们系统变量里面做修改 点击新建,出来一个弹框 变量名字就写 NODE_PATH...变量值就是你创建的全局目录,比如我的是(一定是你本地的路径,你自己的路径) 就是箭头指的这个文件夹,点进去,你的应该里面什么都没有,是空的 复制这个路径 E:\node.js\node_global...如何确定你电脑已经将node环境配置好了,那么就可以打开cmd 环境变量配置好之后,重新打开cmd,一定是重新打开,之前打开的关闭,重新打开 命令行中输入如下命令测试 node -v npm...-v 如果出现对应的版本号,那么你电脑就有了node环境,之后就可以cmd里面启动vue项目了 安装一个东西 安装东西比较慢 查看本来的镜像 npm get registry 我们要换一个淘宝的镜像

82630

安装node.js 环境,这样前段的vue项目就可以cmd里面启动了

这两个空文件夹的作用 node-global :npm全局安装位置 node-cache:npm 缓存路径 配置环境变量: 将node.exe 所在的目录添加到path环境变量,这样我们使用命令行时就可以在任意路径使用...以上有两个位置,一个是用户变量,一个是系统变量,我们系统变量里面做修改 ? 点击新建,出来一个弹框 ? 变量名字就写 NODE_PATH 变量值就是你创建的全局目录,比如我的是 ?...就是箭头指的这个文件夹,点进去,你的应该里面什么都没有,是空的 复制这个路径 ? E:\node.js\node_global 将他们写在弹出来的框里面 最后弹出来的框就变为 ?...命令行中输入如下命令测试 node -v npm -v ?...如果出现对应的版本号,那么你电脑就有了node环境,之后就可以cmd里面启动vue项目了 点击下面,看另一篇文章 cmd命令如何启动vue项目

1.1K10

接口测试平台代码实现18:帮助页面2

再看看效果: 然后我们再一下颜色,当我们之后改动各个页面的各种元素的时候,一定要记得,要符合你整个平台的颜色风格,比如我之前登陆页面 是 绿色+红色。 我的首页是绿色+黑色。...所以之这里我把a标签的颜色改为绿色-爱情的颜色 然后我们今天多学一个知识点,就是鼠标放上去有变化的设计: 添加一个a:hover{} 这个里面写的属性,比如颜色,就代表这鼠标放上去后哦a标签的颜色会变成这里面颜色...内部元素只有一个空格占位,颜色是从上到下渐变,位置是固定的 让我们body内继续新建一个div。 注意到里面有个空格,空格的写法是   别写错,别忘了后面的分号。...然后我们继续它的颜色,现在我们是黑色,接下来改成绿红渐变,就是先把background-color属性删掉,然后加上 background:linear-gradient就是渐变背景色,to top...我们学到了positon的固定位置,渐变颜色,竖线 /横线的设计。显示指定元素的js,鼠标放上元素的变化,元素id命名的小技巧 等知识。

94930

对CSS变量不熟悉,这5个事例可看看!

如何定义和使用CSS变量(也称为自定义属性) 要声明一个简单的 JS 变量,很简单,如下所示: let myColor = "green"; 要声明一个CSS变量,必须在该变量的名字前添加两个横线。...无论是移动设备还是 PC 上。 现在,让我们看看这些CSS变量的实际作用。 示例1-管理颜色 使用CSS变量的最佳选择之一就是设计的颜色。...我们举例使用一个带有不同颜色按钮的案例。....red类中,我们必须将边框颜色和背景都设置为红色。万一哪天需要更改颜色,那就很麻烦了,需要一个一个的。这个问题可以通过CSS变量轻松解决。...原文:http://www.js-craft.io/blog/1... 交流 本文 GitHub https://github.com/qq44924588...

55710

Hexo关于Butterfly的一些小修改

前置说明 此篇文章主要记录此博客"魔"的部分。 此博客魔全部为css及js覆盖方式修改(友链页面除外) 开启只需要引入对应的css即可。...关闭注释css/js引入即可 注:大多css没有提供可以直接引用的链接,大家可以自行创建css,然后放到博客目录进行引用。 如无特殊声明,引入对应css即可。对应css请在最下方查看。...开启需关闭背景图片设置,可能也需要关闭js动态背景。具体请自己尝试,本人没有尝试过。...namecolor: "#ff9191" # descr的颜色 descolor: "#ff9191" # 背景颜色 background: 0 # 鼠标悬停旋转角度 rotate: 360deg #...多种按钮 https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/buttons.min.css 如何引入css 配置文件中搜索

2.3K20

Typecho handsome主题介绍

前言 Handsome主题 复杂中,保持简洁。 一款精心打磨后的 typecho主题 handsome是typecho中为数不多的优秀的主题。...如果你是小白或者第一次使用这个模板,那一定要仔细看好了作者写的使用文档 本文博主整理了几种美化样式,希望有喜欢的~ 魔 为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可...左侧文章图标和评论头像鼠标悬停旋转 2418968489.gif .img-square { transition: all 0.3s; } .img-square:hover {...彩色标签云 之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色: let tags = document.querySelectorAll("#tag_cloud...右侧列表导航栏图标颜色 .glyphicon-fire { color: #ff0000; } .nav-tabs-alt .glyphicon-comment { color:

1.7K21

Handsome主题介绍 + 美化样式

前言 Handsome主题 复杂中,保持简洁。 一款精心打磨后的typecho主题 介绍 博主使用Handsome主题已有一段时间,这款主题论售后还是更新都很好,而且也主题本身也不贵。...如果你是小白或者第一次使用这个模板,那一定要仔细看好了作者写的使用文档 本文博主整理了几种美化样式,希望有喜欢的~ 主题购买 主题介绍 使用文档 组件图标 魔 为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置...border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover...彩色标签云 之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色: let tags = document.querySelectorAll("#tag_cloud...右侧列表导航栏图标颜色 .glyphicon-fire { color: #ff0000; } .nav-tabs-alt .glyphicon-comment { color: #495dc3

2.6K41

ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

问题描述 使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量控件就可以实现...我们先来看看ArcGIS JS API自带的默认样式: 然后再来看看客户想要的样式: 其实说白了就是要更改默认样式的宽度和颜色。...解决思路 遇到这种需求的话,下意识就去看看ArcGIS JS API的官网有没有提供可以直接使用的API,但是经过一番查找后发现是没有的,那接下来就只能找找其他的地图JS里面有没有了,如果有的话就试试能不能用于...ArcGIS的底图,其实除了这种做法之外还有另一种做法,就是找到ArcGIS JS API的源码文件,直接里面的css样式代码就可以,最后”AriaGIS“大佬的帮助下发现确实是行得通的,但是考虑到目前项目中使用的...下面分别介绍二维和三维下的修改方法,demo代码就是对大佬的代码做了一下简单修改过后的。

1.8K30

less学习笔记(一)

} } } 注释的写法 //只会在LESS中显示 /*就会在LESS和CSS中显示*/ 编译less的一个工具koala(学习node.js...混合模式:把共同的css样式放入一个类似于类的选择器中:.a(){/*共同的样式*/} 使用时样式中加上.a即可饮用.a()中的样式 带选择器的混合:.b{&:hover:{border:1px...&:带表当前元素的父元素,如果把&放在选择器后,就会将当前选择器插入到所有父选择器之前; 传有多个参数时: 如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值, 如果传参的括号里面既有...rgb模式,然后再转换为16进制的颜色值并返回 rgb模式他的值是 0~255 ,当你的值超过255 ,那么就会以255进行相加操作 运算时不能直接使用英文颜色名称进行运算 函数: rgbless...中是一个函数,会返回16进制的颜色值 red(),green(),blue()传入一个16进制的颜色值会返回一个相应颜色的十进制值 命名空间: demo1: #bgcolor(){ background

47330

微信小程序之组件(一)

其中view包含四个属性: 1.hover(默认值为:false) 这个没什么好说的哈~ 2.hover-class(默认值为:none) 效果展示:  上面的意思是,当我们不点击时,方块默认的颜色为红色...3.hover-stop-propagation(默认值为:false) 这是可以扎尔杨解释, ,因为红色的方块棕色的方块内,当我们用上面的hover-class属性(点击红色的方块,想要将将红色的方块去变成蓝色的时候...),所以点击后不会立即改变颜色,会等上1000ms后进行变换!...当然我之前页自创了一种写轮播图的效果,会用到js哈~ js: imgUrls: [ 'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng...,因为有一些关于js的内容,新手不太好消化,没关系,以后会讲到的!

2.6K30

详解 vaw-layouts 中通过 sass 实现动态换肤功能 (一)

以往的前端开发中,css 一直不能称之为一种编程语言,虽然 css3中增加了几个变量和函数,但是实现的功能还是比较有限。...vaw-layouts 中通过 sass 实现动态换肤功能 (一) 原创2021-06-03 22:22·知码 以往的前端开发中,css 一直不能称之为一种编程语言,虽然 css3中增加了几个变量和函数...1、$mainContentBgColor 主要指定背景色 2、$mainTextColor 主要指定文本颜色 同理,我们也定义好light下的class .light{ .el-button...如果我们可以通过js动态地修改这几个值,不也可以实现动态换肤?答案是不可以,因为预处理器是我们开发阶段使用,一旦打包之后,他们就没有了,我们也就没办法再这些值。所以我们还是老老实实写恶心的代码?...$value in $themeColorsMap { // 这里就是生成类似于:.dark.theme_color_blue // 因为我们还有切换主题色的功能,所以还得适配不同的颜色

1.1K10
领券