随笔分类 - HTML5
摘要：偶然发现一个很有意思的加载动画，效果如下： 乍一看以为是个绿色的gif图，其实是个白底的gif，而在动的两个小正方形是透明的，背景色绿色，才会看起来是绿色小gif。 挺奇妙的。 代码： <div style="display: inline-block; background-color: #99c
阅读全文
摘要：使用CSS3 Sprite（雪碧图）可以制作帧动画，如下 效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; /* 单帧显示宽度 */ heig
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas涂鸦Demo</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
阅读全文
摘要：通过监听video的事件钩子，使用canvas截取video的图片 效果： 代码（可直接在菜鸟教程的编辑器运行）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head>
阅读全文
摘要：偶然发现最新版本的Chrome浏览器无法识别margin:0 -.8em;这样的写法：即左右margin同时为负值。 正常效果是这样的： html代码：（与话题无关的代码已删除） 原本的CSS： 我们知道，margin:0 -.8em，相当于： Chrome版本及其效果： 旧版本： 最新版本： 可以
阅读全文
摘要：微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 备注：要加上 passive: false，不然会出现以下报错
阅读全文
摘要：一个简单的开关组件 依赖：jquery.js CSS JS HTML 注意：
阅读全文
摘要：前言 日期时间选择器可以直接使用bootstrap-datetimepicker.js插件，但是却很难找到好用的时长选择器，什么是时长选择器呢？时间选择器和时长选择器的区别： 时间选择器：选择24小时中某个时间点或者某段时间，datetimepicker效果如下： 时长选择器：选择时分秒长度，例如录
阅读全文
摘要：前言 IP输入组件的功能包括： 效果如下： 依赖 CSS JS HTML 最基本的IP输入组件： MAC地址输入组件： data-plugin="ipinput"：激活功能 data-letterlimit="2"：修改字符长度限制，每个输入框达到这个长度，则自动跳到下一个框（如果有下一个框） 手动
阅读全文
摘要：效果 HTML * 注意input的id和label的for必须一致 CSS
阅读全文
摘要：做这个表格的时候遇到 下面的 td 单元格遮挡 上面单元格子元素的问题： 表格原本是这样的： 这两个单元格就是咱们的主角。 问题： 上面的 td 有一个 ul 用绝对定位做下拉菜单 我们要的当然是菜单显示时要处于顶层。但是却出现下面的问题： 可以看出下面的那个 td 遮挡了 菜单。 翻阅资料才知道，
阅读全文
摘要：火狐中刷新验证码图片，需加上随机数或时间戳，以保证火狐重新请求：
阅读全文
摘要：HTML： 效果： 监听失焦（vue）—— 监听实时修改（vue）—— 以上两个监听是基于vue.js的，原生同理
阅读全文
摘要：1、CSS声明块级元素 HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block: 2、为HTML添加新元素 JavaScript 语句 documen
阅读全文
摘要：在使用CDN资源时遇到这两个属性： crossorigin： integrity： 关于integrity的详细资料：https://imququ.com/post/subresource-integrity.html 参考：https://blog.csdn.net/SNP_fuyun/artic
阅读全文