相关推荐
字体精简-字蛛font-spider
简介记录一个精简字符的方式。利用字蛛做一些字体精简,本方式是针对英文精简,中文字体可以自行延展处理。字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。安装字蛛github:font-spidernpm install font-spider -g注意全局安装,省事,当然也可以局部,个人选择。配置安装完毕后我们需要新建一个html文件,这个文件里面需要配置一个自定义字体css,一个div,用于显示你需要精简的字体。注意,被精简的字体文件必须是ttf格式。创建一个index.html文件<!DOCTYPE html> <ht...
纯css来做表单校验样式
css3新增了三个伪类::required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过,表单元素和form表单都有的伪类:invalid 表示不通过,表单元素和form表单都有的伪类其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。所以,如果此时设置:invalid伪类样式,是不合适的。解决办法就是:使用:placeholder-shown...

css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

获取元素距离顶部的距离
这个方法太常用了,写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象
你不知道的微软-蓝泽光(win7主题)
蓝泽光(win7主题)2010年,微软台湾分公司推出了Microsoft SilverLight的萌化人物“蓝泽光”,这不是微软第一次让自家的软件拟人化,之前的也推出过win7娘-窓辺ななみ,并由知名声优水树奈々配音,此次推出的蓝泽光则由国内“姚敏敏”担任第一代,第二代声优是“林美秀”,推出后台湾和日本地区获得广泛的回应,以至于到如今,微软依旧保有推出“娘化”角色的传统,什么win8娘,win10娘,正所谓万物皆可娘!Microsoft SilverLight软件本身是一个类似Adobe公司的flash一样的跨浏览器的、跨平台的插件,,开发者可以使用它制作图像,视频,媒体播放等网页效果,...

Lay 响应式Typecho博客主题 V1.1.2
Lay 是一个精心制作的侧边栏主题,提高了响应速度,优化了诸多地方历经时间打磨,更贴合需求预览特性基于Layui框架制作,模块化结构,异步加载js,加快页面响应响应式布局html5+css3+es5+es6基于Layui框架模块化结构异步js加载优秀的灯箱比较全面的代码高亮,精选四种高亮主题,支持常用的语言,还支持:shell、sass、scss、styles、less、c++、go、php、nginx、等语言。缩略文章无刷新加载,增加用户体验支持主题可视化配置侧边栏导航三种主题,可设置支持微信、支付宝二维码赞助符合国内的分享功能支持评论表情,更新了一些表情支持前台登录支持前台注册点赞效...

typecho 获取文章缩略图、自定义文章缩略图、文章第一张缩略图、文章附件第一张图、文章随机图、文章随机图加速
typecho的缩略图,其实自己用了好久,最近才发现了一种最简单的组合,不用太多代码,有需要改改方法就行了。目前我总结了一个对文章缩略图的获取顺序:用户自定义缩略图文章第一张缩略图文章附件第一张图文章随机图是否开启cdn加速,使用加速地址前段本地地址基本上按照这个思路,所有的情况都能照顾到,当然我看了一些付费的主题,他会对用户自定义的缩略图进行定制,比如,大图,小图这些,其实我感觉挺麻烦的,哈哈这里我们一步一步完善这三步教程[hide]自定缩略图自定义缩略图我们需要一个自定义字段,这个自定义字段也是在网上找的别人的分享技术,这里贴出来用法直接在主题function.php文件里面,插入如...

Ajax 表单序列化
什么是表单序列化呢?将所有表单的提交通过一个标准化的方法去获取并且提交出去,那就是序列化,也就是说不同的表单,如注册啊,登录啊,修改资料啊,这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求:不能发送禁用的表单字段;只发送勾选的复选框和单选按钮;不发送type是reset、submit、file、button以及字段集;多选选择框中的每个选中的值单独一个条目;对于select元素,如果有value值,就指定value作为发送的字段,如果没有,就指定text值;已经将ajax的代码作为单独的一个文件保存,而调用则使用ajax()的方法,之前也做了一个表单提交的方法,在所有条件...
为博客添加鼠标点击特效(富强、民主、文明、和谐...)全平台通用 V2.0
已经写了新版,jq的方法,地址:jq富强,如果连接失效可以在本博客搜索富强,也可以找到对应的文章经过长时间的学习,终于迎来小高潮,更新为2.0版本!2018-10-5 修复预加载js代码失效bug2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题2019-1-8 更新为2.0版本,修复大量bug,引用自制代码库预览图:使用要求:需要引入自制代码库:[hide]先引入tool.js 下载:蓝奏云再引入封装库base.js 下载:蓝奏云接着引入china.js 下载 : 蓝奏云[/hide]引入方法:以我现在的博客Typecho为例,我们需要在主题的header.ph...

什么是上下文节点???
学html+css的时候有在书上看到过上下文节点,但是也没详细说明,看视频的时候也有人说过,但是也是一笔带过,也没在意,今天学XPath的时候就有关于上下文节点有一个说明,但是只说了一点,没啥详细,所以自己百度了下,如下:代码:<html> <body> <a id = '1'>文本节点1</a> <a id = '2'>文本节点2</a> <a id = '3'>文本节点3</a> </body> </html> ...