申请key地址：googlev2版就是常见的验证方式，v3是通过判断评分的方式，这里先看看v2的用法。首先google官方文档： 文档提供的api链接国内是无法使用的，需要调整下：https://www.google.com/recaptcha/api.js将这段链接改为：https://www.recaptcha.net/recaptcha/api.js即可。引入js由于js我们可以异步引入，所以官方支持一个load回调，所以使用异步加载js文件的话，你的回调函数记得要写在加载js文件之前官方引入示例：<script src="https://www.recaptcha...
css3的grid格子布局中，对于设置格子大小的处理，要么是固定的，要么是百分比这种相对的。如果电脑端这个header的高度为50px，而手机端由于大小限制，原来50px可能要变成30px，那么此时我们可以利用媒体查询去调整：grid-template-rows属性。grid-template-rows: 30px 1fr;调整完这个大小后，我们还要调整里面元素的大小，这样做可能有点麻烦。甚至于我们可能只是改变了里面元素的布局而已，横向的布局改为竖列的多行布局，那么这个高度可能是无法精确获取的，如果内容的高度为100px呢，而我们只设置了30pxgrid的默认效果会是一个overflow...
最近看了angular的官网，感觉还阔以，以前一直想做一个这种页面，这次我logo材料也凑齐了，对侧边栏的一些问题也搞定了，b4也学了，jq也会了，完事具备只欠东风，说干就干预览图demodemo最重要的一点是明白了怎么搞定手机端浏览器底部工具条的问题，这玩意特别让人头疼。
github地址： pjax中文说明文档（非官方）： pjax基本参数$(document).pjax(selector, [container], options)selector为click选择器container为需要更新内容的容器选择器options为设置selector的一些技巧：我们可以给a元素添加一个属性：data-pjax来表示这是一个需要使用pjax的链接，这样就可以避免全部的a元素使用pjax了<a href="xxxx" data-pjax>$(document).pjax("a[data-pjax]", [con...
最近发现好多站点都开始做这个功能，每次复制都给我弹一次窗口，每次粘贴末尾总是带一大段版权文字，虽然不喜欢，但是没办法。比较这年头分享的知识ctrl+c和ctrl+v就是自己的了，加上超多机器人抓取，原创分享真的很难呢！效果图默认效果开启弹窗提示使用教程[hide]引入插件后，调用copyrightNotice方法： $("选择器").copyrightNotice();默认效果只会在复制的内容后面添加一句版权信息的提示文字。注意：您复制的为原创内容，转载请注明出处！谢谢！当然也是可以支持自定义的，支持传入一个对象，这个对象有三个参数。keyvalue说明copyri...
之前可能学过但是忘记了，这个东西平时也用的少，但是却很有用处，就是一个事件。$(document).ready(function () { $(window).on("beforeunload", function (e) { return confirm("弹出提示信息") }) });必须要给window绑定一个beforeunload事件，这个事件会在刷新页面或者关闭页面时触发，而且他不会马上生效，要等页面加载后，等一会才会生效。必须要return出一个confirm确认弹出提示，其他的alert这些是无效，不使用return...
本来想多搞几个文章的通用样式的，每次写主题，对于文章的样式确实很头疼，目前用的是vue的文章样式，很适合代码和文字混排，但是对于图文混排感觉一般般吧。所以就做了一个新的样式，仿《少数派》的css样式。预览图[hide]使用方法首先我们需要对使用改css样式的文章元素用一个div包裹，并且这个div的id为pai-md；<div id="pai-md"> 这里放文章内容 </div>这样css的作用域就设置好了，然后我们只需要在head引入这个pai.css即可。特殊的md写法## **红色数字**标题二级标题的第一个加粗元素颜色是红色高亮还...
函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接1. 字符串函数unquote（$string）：删除字符串中的引号；quote（$string）：给字符串添加引号；To-upper-case（$string）：将字符串小写字母转换为大写字母To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string）unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...
sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。.button-basic { border: ...
@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text调用混入body { ...
sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。@import假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset；@import "reset"; body { font-family: Helvetica, sans-s...
sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为：#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部...
sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...
在写《MUFlow》主题的时候，我遇到一个很头疼的问题，就是点击分类会显示分类菜单，但是这个菜单还会有子级菜单，按照嵌套规则，我对这个子级的菜单元素，用一个div包裹，并且加上了class类名dropdown-menu，然后里面的内容就按照官方的标准书写，但是就出现了一个问题。当我点击子级菜单后，整个菜单都消失了。一脸蒙蔽，什么鬼，难道我做错了，什么情况，在不断的对照不同人写的例子后，我崩溃了，然后无意间看到开发者控制台的class变化后，我大概有点知道为什么了。当我点击子级菜单后，子级菜单对应的dropdown-menu元素是显示的，它的class有了show类名，但是一级菜单就没了，...
关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。自定...
很多项目里面会用到复制和粘贴两个功能，但是我平时也用不到，这里就详细学习一下是怎么运作的。剪贴板事件了解剪贴板有6个事件，其中现代浏览器火狐只支持三个，ie和谷歌则支持全部。事件名说明beforecopy复制事件触发之前触发copy复制beforecut剪切事件触发之前触发cut剪切beforepaste粘贴事件触发之前触发paste粘贴其中火狐浏览器只支持 copy，cut，paste三个事件。其中ie和谷歌浏览器的话是都支持的，并且在ie中使用右键菜单进行复制剪切粘贴的操作，事件会触发多次，而在现代浏览器中，你复制一次，只会触发一次copy事件和beforecopy事件这种，哪怕是右...
逛高斯键盘官网的时候，应该是去年的时候，官网改版后有一个特效挺有意思的，就是数字跳动，之前一直没空研究，今天抽空去看了下，js有一个开源的插件：countUp.js 先看看高斯的效果图：效果就是这样，我们先去下载js文件CountUp.js下载完我们找到dist目录下的countUp.min.js文件，拿出来在你需要的项目中。再新建一个js文件，名称自定义，这里是用于调用countUp的，你可以命名为：start.counUp.js教程注意，使用该功能你需要一个服务器环境，本地直接打开是不行的!引用由于版本更新后，采用了es6的模块写法，引入js文件的时候需要注意不能使用传统的type属...
以前写过一篇关于字体渐变效果的文章，那时候初出茅庐，啥都不太懂，就只会个静态，这次逛animate.css网站的时候发现他的字体是动态渐变效果的，这就有点刺激了，于是研究了一下。效果图教程主要是利用了css3的滤镜效果，也就是hue-rotate()色调转盘，他会根据当前的颜色进行调整，大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...
css控制文本溢出隐藏css兼容最好的就是单行文本溢出省略号了，我们先看下单行的css是怎么设置的：p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }表示文本不换行，做一行显示，然后文本超出p元素的宽度做省略号显示，且为了兼容低版本浏览器加了超出部分裁剪的css效果。这个就是一个基本的文本溢出省略号显示的一个效果。但是，单行已经不能满足我们日常所需了，在一些文本简介中，我们都希望的是能够有多行的显示，再多则做省略号显示，这个功能目前来说，只有webkit内核的浏览器支持这个效果，i...
这个class是需要配合一个js文件才有效果，主要就是检查浏览器是否支持css3和html5的特性，通过js的一些操作，减少不同浏览器之前的差异。配合modernizr.js文件，该文件需要在head标签中引用。modernizr官网引用后给html标签加上class<html class="no-js">当然，我没有去测试这个东西，只是作为一个知识去了解一下，因为typecho的官方默认主题就用了这个class，但是他没有对应的效果，也没有引入modernizr，而是使用html5shiv，加上我写主题，本着懂的地方我就可以动，不懂就不动的做法，这个cl...
最近评论