前端页面初始化动画 loading 的几种效果
前端开发时页面初始化如果不做处理会显示空白，这样用户体验就会比较差，如果替换成加载的动画，这样不仅好看，还能提升用户体验，下面就记录几种常用的页面首屏加载动画效果，都是纯css。彩条转圈 loading 动画，点点点平滑过渡 loading 动画等pc和移动端动画
标签: 前端 动画 loading 初始化 单页面 效果 css
亲测 video 标签 视频格式的兼容现状
html5 video标签再熟悉不过了 Iternet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。 注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。 src所支持的视频格式有三种 mp4、ogg、webm
标签: video
检查turn服务器是否处于活跃状态
使用webRTC时 有时需要自己搭建turn服务器 如何测试搭建好的turn服务器是否可用 下面给出代码 修改checkTURNServer里面对象的 url/username/credential分别对应url/用户名/密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...标签: webRTC
http状态码大全总结
在前端日常开发过程中，调用后端接口，发起请求的时候就会碰到后端返回的状态码，这篇文章就将后端可能返回的所有状态码含义记录一下，以便查询。 常见状态码 200 - 请求成功 302 - 重定向 401 - 权限不足 403 - 禁止访问要求 SSL 404 - 请求的网页不存在 500 - 服务器内部错误 503 - 服务器不可用 1开头的状态码 100 - （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101 - （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。 2开头的状态码（成功） 200...标签: http
HTML5桌面通知知识点总结
H5 Web Notification桌面推送消息 特点 可以直接脱离浏览器，在桌面提醒（类似微信及系统提醒）。 不能直接本地运行，需要服务器 需要用户允许方可使用 win系统提醒在右下角，mac提醒在右上角 浏览器兼容性 Firefox （支持） Chorome （支持） ...解决index.html缓存问题
一般项目发版后前端静态文件会有缓存问题， 不强制刷新很难解决， 但是用户不会去强制刷新， 这就需要我们开发人员在配置方面解决浏览器缓存静态文件问题。 一般浏览器缓存的文件有html、css、js等。 css、js文件被缓存的解决方案 一般html中引入的css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。 如果index.html文件被缓存就稍微麻烦些 首先可以在index.html文件头部添加mate标签禁止缓存 <meta http-equiv="Expires" content="0"> <...HTML <base> 标签详解
HTML 标签详解 运行下面代码查看base标签功能 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><base href="http://yuanqiao.pw/img/" data-ke-src="http://yuanqiao.pw/img/" target="_blank" /> <meta name="viewport" content="width=device-width, initial-scale=1.0...标签: base
使用css画带气泡的三角形
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title> <style> body { ...html5+js 监听网络在线与离线?
html5+js 监听网络在线与离线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5+js 监听网络在线与离线</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> ...使用html5 webSQL + localStorage 实现本地留言板功能
使用html5 webSQL + localStorage 实现本地留言板功能 使用html5 webSQL + localStorage 实现本地留言板功能 人过留名，雁过留声 您的大名： 您的高论： ...标签: webSQL localStorage
css+jquery打造最简洁的评分效果
css+jquery打造最简洁的评分效果 最简洁的评分效果 body{width: 500px;margin:120px auto;} .grade-star{position: relative;width: 120px;height: 20px;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 0;} .brigh...标签: 评分
前端开发规范手册2.0
目录 一、规范目的 二、文件存放及命名规范 三、html书写规范 四、css 书写规范 五、js书写规范 六、图片规范 七、实践建议 一、规范目的 1.1 概述 为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改此文档. 二、文件存放及命名规范 2.1 ...标签: 规范
纯css实现兼容很好的点击看大图实例
css点击看大图demo 点击看大图 .showimg>img{width: 200px;} span{display: none;position:fixed; width: 100%;height: 100%;left:0;top:0;z-index:20;opacity: 0} .showimg:focus+span{display: block;} .showimg:focus:before{position:fixed;content:...标签: 大图查看
图片水平垂直都居中，兼容ie7及以上和主流浏览器
图片水平垂直都居中，亲测兼容ie7及以上和其他主流浏览器 图片水平垂直都居中，兼容ie7及以上和主流浏览器 *{margin:0;padding:0;} ul,li{list-style:none;} .list{width:800px;margin:0 auto;} .list li{text-align:center;float:left;line-height: 30px;width:33.3%;margin-top:20px;} ...标签: 图片
聊聊既熟悉又陌生的div+css布局
首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。 例如：下面这种一列限定宽度，一列自适应。 两列布局方法一-勿恨水长东 .clearfix:before, .clearfix:after {display: table;content: " ";} .clearfix:after {clear: both;} .clearfix {*zoom: 1;} *{margin:0;padding:0;} body{...标签: 布局
日历
最新微语
- 将任意网站编程电脑app的方案
地址github.com/jiahaog/nativefier
使用步骤
1. sudo npm install nativefier -g
2. nativefier --name 'meCode' https://me.yuanqiao.pw/
2021-01-06 10:57
- angular引入 aws-sdk 后使用报错 Cannot access 'ArticleDetailModule' before initialization 解决方案：在 polyfills.ts 中添加 (window as any).global = window;即可
2021-01-05 10:05
最新评论
- sobwjosmg
标签云 - 标签球 - windstag... - neiomlowbn
标签云 - 标签球 - windstag...
分类
存档
- 2020年8月(2)
- 2020年7月(1)
- 2020年6月(2)
- 2020年5月(7)
- 2020年4月(5)
- 2020年3月(3)
- 2020年2月(2)
- 2020年1月(2)
- 2019年12月(1)
- 2019年11月(1)
- 2019年10月(3)
- 2019年9月(1)
- 2019年8月(1)
- 2019年7月(4)
- 2019年6月(5)
- 2019年5月(5)
- 2019年4月(3)
- 2019年3月(2)
- 2019年2月(2)
- 2019年1月(3)
- 2018年12月(1)
- 2018年11月(1)
- 2018年10月(1)
- 2018年9月(1)
- 2018年8月(1)
- 2018年7月(1)
- 2018年6月(3)
- 2018年5月(2)
- 2018年3月(1)
- 2018年2月(1)
- 2017年11月(1)
- 2017年10月(1)
- 2017年8月(2)
- 2017年5月(1)
- 2016年11月(1)
- 2016年10月(2)
- 2016年9月(1)
- 2016年8月(1)
- 2016年7月(2)
- 2016年6月(2)
- 2016年5月(7)
- 2016年4月(6)
- 2016年3月(3)
- 2016年2月(2)
- 2016年1月(3)
- 2015年12月(2)
- 2015年11月(2)
- 2015年10月(3)
- 2015年9月(2)
- 2015年8月(4)
- 2015年7月(4)
- 2015年6月(8)
- 2015年5月(34)
- 2015年4月(8)
- 2015年3月(2)