非常常用的一些东西
是否是微信
var is_weixn = (navigator.userAgent.toLowerCase().indexOf("micromessenger")>-1);
手机宽度高度
var phoneWidth = parseInt(document.body.clientWidth||document.documentElement.clientWidth||window.screen.width);
var phoneHeight = parseInt(document.body.clientHeight||document.documentElement.clientHeight||window.screen.height);
IE6 7 8 9
var isIE789 = (!document.getElementsByClassName||window.navigator.userAgent.replace(/\s/g,"").indexOf("MSIE9.0")>=1);
域名完整地址
var NowAllPath = 'http://'+location.host+location.pathname;
当前域名的文件名
var now_pathname = window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1)
双核浏览器强制急速模式
<meta name="renderer" content="webkit|ie-comp|ie-stand"> //浏览器自取值
<meta name="renderer" content="ie-comp"> //默认用ie兼容内核
<meta name="renderer" content="webkit"> //默认用极速核
<meta name="renderer" content="ie-stand"> //默认用ie标准内核
JS检测浏览器是否最大化
function isFullScreen () {
if ( window.outerHeight === screen.availHeight ) {
if ( window.outerWidth === screen.availWidth ) {
return true; // 全屏
}
}
return false; // 不是全屏
}
animation动画共如下这几个属性（默认值）
animation-name: none 动画名称
animation-duration: 0s 执行时间
animation-timing-function: ease 加减速贝塞尔曲线，与transition的缓动动画原理一样。
animation-delay: 0s 延迟时间
animation-iteration-count: 1 执行次数 n（定义动画播放次数的数值）| infinite（规定动画应该无限次播放）
animation-direction: normal 默认运动方向 normal | reverse（反转、颠倒的意思。表示反向运动） | alternate（交替，轮流的意思。这个值表示正反交替着运动） | alternate-reverse（表示默认反向运动，反正交替运动）
animation-fill-mode: none 默认运动后恢复到初始状态 none | forwards（当动画完成后，保持最后一个属性值） | backwards（在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值） | both（向前和向后填充模式都被应用。）
animation-play-state: running 默认处于运动状态 paused（规定动画已暂停）|running（规定动画正在播放）
多个片段的animation动画
animation: tiantiao1 0.5s ease-in forwards,
tiantiao2 0.2s ease-out 0.5s forwards,
tiantiao3 0.2s ease-in 0.7s forwards,
tiantiao4 0.15s ease-out 0.9s forwards,
tiantiao5 0.15s ease-in 1.05s forwards,
rightMove 0.4s ease-out 1.2s forwards;
animation中的steps()逐帧动画
animation-timing-function: steps(6, end) steps(n,start/end)做逐帧动画时也是在不断地切换显示的背景图片
steps 有两个参数
1、第一个肯定是分几步执行完
2、第二个有两个值
2.start 第一帧是第一步动画结束
2.end 第一帧是第一步动画开始
jQuery 返回顶部的动画
$("html,body").animate({"scrollTop":0},500);
css3动画停留在最后一帧
-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
css3 属性 js来赋值
transform ＝> transform
msTransform ＝> -ms-transform /* IE 9 */
OTransform ＝> -o-transform /* Opera */
MozTransform ＝> -moz-transform /* Firefox */
webkitTransform ＝> -webkit-transform /* Safari 和 Chrome */
-webkit-animation动画有三个事件
开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration
var o = document.getElementById("div1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
alert("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
alert("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
alert("动画结束");
})
transition结束事件: webkitTransitionEnd
过渡属性transition，在动画结束时，也存在结束的事件: webkitTransitionEnd
// 如果多使用一个样式属性，在每个动画执行的过程中webkitTransitionEnd事件的触发次数将增加一次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次，例如某个元素改变了width，height，opacity三个属性，webkitTransitionEnd将会触发三次
CSS3 Flex 弹性盒模型与文本水平垂直居中
display: flex;
align-items: center;
justify-content: center;
音频视频模拟onend事件
//设置 currentTime 属性：
//audio|video.currentTime="seconds"
myVid=document.getElementById("video1");//获取媒体元素
myVid.pause(); //先暂停
myVid.currentTime=0; //设置开始的时间位置为0
myVid.play()
一些正则
var email_reg = /^([0-9A-Za-z\-_\.]+)@([0-9A-Za-z]+\.[A-Za-z]{2,3}(\.[A-Za-z]{2})?)$/g; //邮箱正则
var phone_reg = /^1[0-9]\d{9}$/; //手机正则
var empty_reg = /\s/g; //空白正则
var number_reg = /[0-9]/g; //数字正则
var notnumber_reg = /[^0-9]/g; //非数字正则
var UpperCase_reg = /[A-Z]/g; //大写字母正则
var LowerCase_reg = /[a-z]/g; //小写字母正则
var Chinese_reg = /^[\u4e00-\u9fa5]+$/; //汉字正则
var re=new RegExp("/微笑",'g'); var str=str.replace(re,'哈哈哈'); //动态正则
Url正则
function IsURL(str){
//return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);
return !!str.match(/^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/);
}
手机号正则
function IsPhoneNumber(num){
return !!str.match(/^((1[0-9]{2})+\d{8})$/);
}
手机rem 和 em 单位的初始化
(function (doc, win) {
var docEl = doc.documentElement,
bodyEl=doc.getElementsByTagName("body")[0].children[0],
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = (docEl.clientWidth||win.innerWidth);
if (!clientWidth) return;
if (clientWidth >= 1080) {docEl.style.fontSize = '100px';}
else {docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';}
bodyEl.style.fontSize = 12 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
自己写的ajax and jsonp
//ajax
function ajax(method,url,para,callback){
var xmlhttp=new XMLHttpRequest(),_url,_para;
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
callback(JSON.parse(xmlhttp.responseText));
}
};
if(method=="GET"){
_url=url+"?"+para;
_para=null;
}
else if(method=="POST"){
_url=url;
_para=para;
}
xmlhttp.open(method,_url,true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlhttp.send(_para);
}
//JSONP
function jsonp(_url,data,fn){
var nosamename=function(){
var tempname='jsonp',O=true,i=1;
while(O){
if(!window[tempname+i]){window[tempname+i]=1;O=false;}
else{i++;}
}
return tempname+i;
}
var url = "",t=document.createElement("script"),fnName='';
if(!!fn&&(typeof fn == 'function')){
fnName=nosamename();window[fnName]=fn;
url = _url+"?"+data+"&callback="+fnName;
}
else if(fn){url = _url+"?"+data+"&callback="+fn;}
else{url = _url+"?"+data;}
t.src=url,t.type="text/javascript",t.async=!0,t.charset="UTF-8";
document.getElementsByTagName("head")[0].appendChild(t);
t.onload=function(){document.getElementsByTagName("head")[0].removeChild(t);}
}
手机横屏
function hengshuping() {
if (window.orientation == 180 || window.orientation == 0) {
//竖屏
}
if (window.orientation == 90 || window.orientation == -90) {
//横屏
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
移动端判断
// 判断设备
var _pattern = "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos";
var _regex = new RegExp(_pattern, "ig");
var _UA = navigator.userAgent;
if(_regex.test(_UA)){
//mobile
}else{
//pc
}
获得页面查询参数
function getURLPara(str){
var ary=[],obj={},wls=window.location.search,temp='',i=0;
if(wls!==""){
if(wls.indexOf("&")!=-1){ary=wls.substring(1).split("&");}
else{ary[0]=wls.substring(1)}
i=ary.length;
for(;i--;){
if(ary[i].indexOf('=')>-1){
temp=ary[i].split("=");
obj[temp[0]]=decodeURIComponent(temp[1].replace(/\+/g,"%20"));
}
}
}
if(str){return obj[str];}
else{return obj;}
}
JS 判断是否为数组
function isArray(arr){ //不太靠谱的
if((arr instanceof Array)&&(arr.constructor === Array)){}
}
function isArray(arr) { //比较靠谱的
return Object.prototype.toString.call(arr) === '[object Array]';
}
function isArray(value){
if (typeof Array.isArray === "function"){ //ES5新增Array.isArray()
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
JS 判断对象是否为函数
function isFunction(fn) {
if(!!fn&&(typeof fn).toLowerCase()==='function'){ }
return Object.prototype.toString.call(fn) === '[object Function]';
}
JS 判断对象是否为对象
function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
获取IE版本
function IEVersion() {
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {return 7;}
else if(fIEVersion == 8) {return 8;}
else if(fIEVersion == 9) {return 9;}
else if(fIEVersion == 10) {return 10;}
else {return 6;} //IE版本<=7
}
else if(isEdge) {return 'edge';} //edge
else if(isIE11) {return 11;} //IE11
else{return -1;} //不是ie浏览器
}
获取浏览器品牌及版本
function getBrowserInfo(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re =/(msie|firefox|chrome|opera|safari|version).*?([\d.]+)/;
var m = ua.match(re);
//Sys.browser = m[1].replace(/version/, "safari");
Sys.browser = (m[1].indexOf('version')>-1?m[1].replace(/version/, "safari"):m[1]);
Sys.ver = m[2];
return Sys.browser+'_'+Sys.ver;
}
获取操作系统
function setDeviceAndOS(){
var UA = window.navigator.userAgent;
var name = "unknown";
if(UA.indexOf("Android") != -1){name = "Android";}
else if(UA.indexOf("iPhone") != -1){name = "iPhone";}
else if(UA.indexOf("SymbianOS") != -1){name = "SymbianOS";}
else if(UA.indexOf("Windows Phone") != -1){name = "Windows Phone";}
else if(UA.indexOf("iPad") != -1){name = "iPad";}
else if(UA.indexOf("iPod") != -1){name = "iPod";}
if(name != "unknown"){return 'mobile/'+name;} //手机操作系统
if (UA.indexOf("Windows NT 10.0")!= -1){name="Windows 10";}
else if (UA.indexOf("Windows NT 6.2") != -1){name="Windows 8";}
else if (UA.indexOf("Windows NT 6.1") != -1){name="Windows 7";}
else if (UA.indexOf("Windows NT 6.0") != -1){name="Windows Vista";}
else if (UA.indexOf("Windows NT 5.1") != -1){name="Windows XP";}
else if (UA.indexOf("Windows NT 5.0") != -1){name="Windows 2000";}
else if (UA.indexOf("Mac") != -1){name="Mac/iOS";}
else if (UA.indexOf("X11") != -1){name="UNIX";}
else if (UA.indexOf("Linux") != -1){name="Linux";}
return 'pc/'+name; //电脑操作系统
}
获取IOS或者安卓系统版本
function get_mobilesystem_version(){
var ua=window.navigator.userAgent.toLowerCase();
var get_ios_version=function(){
var version = null;
if (ua.indexOf("like mac os x") > 0) {
var reg = /os [\d._]+/gi;
var v_info = ua.match(reg);
version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本号9.3.2或者9.0
//version = parseInt(version.split('.')[0]); // 得到版本号第一位
}
return version;
};
var get_android_version=function(){
var version = null;
if (ua.indexOf("android") > 0) {
var reg = /android [\d._]+/gi;
var v_info = ua.match(reg);
version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本号4.2.2
//version = parseInt(version.split('.')[0]); // 得到版本号第一位
}
return version;
};
if(ua.indexOf("iphone")!=-1||ua.indexOf("ipad")!=-1||ua.indexOf("ipod")!=-1){return 'IOS '+get_ios_version();}
else if(ua.indexOf("android")!=-1){return 'Android '+get_android_version();}
else{return 'Other';}
}
模拟alert
(function(doc,win){
var div=doc.createElement('div'),css=doc.createElement('style');
css.innerHTML='.alertpopbox{display:none;position:fixed;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,0.6);z-index:100;}\
.alertpopbox .pop{display:none;position:absolute;width:68%;left:16%;top:50%;background-color:#fff;border-radius:.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%);}\
.alertpopbox .pop p{font-size:0.3rem;line-height:1.5;padding:10%;word-break:break-all;border-bottom:1px solid #d4d4d4;}\
.alertpopbox .pop a{display:block;text-align:center;width:100%;font-size:0.32rem;box-sizing:border-box;height:1rem;line-height:1rem;color:#323232;}';
doc.getElementsByTagName("head")[0].appendChild(css);
div.className="alertpopbox";
div.innerHTML='<div class="pop" id="alertpop"><p></p><a href="javascript:;" class="closepop">确定</a></div>';
doc.getElementsByTagName("body")[0].appendChild(div);
win.alertpop=function (t){
var popobj=document.getElementById("alertpop");
popobj.parentNode.style.display="block";
popobj.style.display="block";
popobj.children[0].innerHTML=t;
popobj.children[1].onclick=function(){
popobj.parentNode.style.display="none";
popobj.style.display="none";
popobj.children[0].innerHTML='';
}
}
})(document,window);
loading遮罩
(function(doc,win){
var div=doc.createElement('div'),css=doc.createElement('style');
css.innerHTML='.coverpop{display:none;position:fixed;width:100%;height:100%;overflow:hidden;left:0;top:0;z-index:200;opacity:0;-webkit-transition:opacity 0.33s ease-in-out;transition:opacity 0.33s ease-in-out;}\
.coverpop .pop{position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.4);z-index:201;}\
.coverpop .pop .cover{width:64px;height:64px;position:absolute;left:50%;top:50%;margin:-32px 0 0 -32px;z-index:202;text-align:center;background:rgba(20,20,20,0.8);border-radius:10px;}\
.coverpop .pop .cover:before{content:" ";display:block;position:absolute;left:16px;top:16px;width:32px;height:32px;border:4px solid rgba(200,200,200,0.33);box-sizing:border-box;border-radius:32px;}\
.coverpop .pop .cover:after{content:" ";display:block;position:absolute;left:16px;top:16px;width:32px;height:32px;border-width:4px;border-style:solid;border-color:rgba(255,255,255,0.66) transparent transparent transparent;box-sizing:border-box;border-radius:32px;-webkit-animation:coverRotate 1s linear infinite;animation:coverRotate 1s linear infinite;}\
@-webkit-keyframes coverRotate{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}}\
@keyframes coverRotate {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}';
doc.getElementsByTagName("head")[0].appendChild(css);
div.className="coverpop";
div.id="loading";
div.innerHTML='<div class="pop"><div class="cover"></div></div>';
doc.getElementsByTagName("body")[0].appendChild(div);
win.showCoverPOP=function(t){
var box=document.getElementById('loading');
if(!box){showCoverPOP.CoverTime=setTimeout(function(){showCoverPOP(t);},1);}
else{
if(showCoverPOP.CoverTime){clearTimeout(showCoverPOP.CoverTime);}
if(t){box.style.display="block";setTimeout(function(){box.style.opacity=1;},100);}
else{box.style.opacity=0;setTimeout(function(){box.style.display="none";},330);}
//else{box.style.display="none";box.style.opacity=0;}
}
}
})(document,window);
常用的手机页面viewport声明方式
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//页面宽度为显示宽度，user-scalable（用户缩放）
<meta name="viewport" content="width=640, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
//页面宽度为640，user-scalable（用户缩放）
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
//页面宽度为320，user-scalable（用户缩放）
<meta name="format-detection" content="telephone=no"> //禁止页面数字识别成电话
PC reset CSS
/* CSS Reset */
@charset "utf-8";
html{-webkit-text-size-adjust:none;}
blockquote,body,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,label,legend,li,object,ol,p,pre,span,strong,table,tbody,td,tfoot,th,thead,tr,ul,article,section,aside,figure,input,button,select,textarea{margin:0;outline:0 none;padding:0;}
body,html{font-family:'Microsoft YaHei',Helvetica,Tahoma,StSun,SimSun,sans-serif;font-size:12px;height:100%;}
ol,ul,li{list-style:none}
table{border-collapse:collapse;border-spacing:0;}
:focus{outline:0}
button::-moz-focus-inner{padding:0;border:0}
a{outline:0;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
input{-webkit-appearance:none;border-radius:none;background:none;border:0 none;margin:0;padding:0;}
img{border:0;}
.clearfix:after{display:block;clear:both;height:0;visibility:hidden;content:"."}
.clearfix{display:block;*display:inline-block;zoom:1;}
* html .clearfix{height:1%}
.fl{float:left;}
.fr{float:right;}
.hide{display:none}
.tac{text-align:center}
.tar{text-align:right;}
.main{width:1200px;margin:0 auto;position:relative;}
Mobile reset CSS
/* CSS Reset */
@charset "utf-8";
html{-webkit-text-size-adjust:none;}
blockquote,body,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,label,legend,li,object,ol,p,pre,span,strong,table,tbody,td,tfoot,th,thead,tr,ul,article,section,aside,figure,input,button,select,textarea{margin:0;outline:0;padding:0;}
body,html{font-family:'Microsoft YaHei',Helvetica,Tahoma,StSun,SimSun,sans-serif;font-size:16px;height:100%;overflow:hidden;}
body{min-height:268px;min-width:320px;max-width:750px;max-height:1182px;margin:0 auto;}
ol,ul,li{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
:focus{outline:0;}
a{outline:0;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
input{-webkit-appearance:none;border-radius:none;background:none;border:0 none;margin:0;padding:0;}
input[type=button],input[type=submit],input[type=file],input[type="reset"],button,select,textarea {-webkit-appearance:none;border-radius:0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img{border:0;}
.clearfix:after{display:block;content:".";clear:both;height:0;font-size:0px;overflow:hidden;visibility:hidden;}
.clearfix{display:block;zoom:1;}
.fl{float:left;}
.fr{float:right;}
.hide{display:none;}
.tac{text-align:center;}
.tar{text-align:right;}
.img100{display:block;width:100%;}
base64 image 格式前缀
data:image/png;base64,.... /* .png */
data:image/jpg;base64,.... /* .jpg */
data:image/gif;base64,.... /* .gif */
data:image/jpeg;base64,.... /* .jpeg */
data:image/bmp;base64,.... /* .bmp */
data:image/webp;base64,.... /* .webp */
loading CSS image
//下方为这个loading gif的base64编码
data:image/gif;base64,R0lGODlhHgAeAPIEAP///93d3bu7u5mZmQAA/wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAEACwAAAAAHgAeAAADeUi6zAAtyqkevSqEZtkY2KJtS6d8YJiRFbR8qqiVLoHGMv2mlCA0o9YJ5uERfD7GrEEcNhXIpAr1ZERD1JD0UsV5vzFqdiouj7FmsHrNNU66kTNFXryR7btnV4+3ue1EfX4YTYVuaDyGh21FjWF8dY9Mf4uSbHGVEQkAIfkEBQUABAAsAgAAABUADAAAAzRIuqwRLUryJhOiVQZAw9myKZ33hQ60dBIoqkQ5Ye9qDsMZbjKB4xeUjfEDWibFo8WoJCQAACH5BAUFAAQALAcAAAAVAAwAAAMzSLokwjAyJ+EYkLIQ7J3PwnUeuJEepmjEWH1r2KLRpWouAwALfOo7XiUS3A2JwaPEyEgAACH5BAUFAAQALA4AAAAQABAAAAMuOEPc7urJFp0Qs7KLpSbXRGicSHbZAoZOEEgs47qiPL/1XTf07v9AgHAoFBGJCQAh+QQFBQAEACwSAAIADAAVAAADLUg6o/6sPSjnYtbhTOIUwvWAoEWWH8mhXOtaQSzHzzy/+AMA7r63vh8n2OMREgAh+QQFBQAEACwSAAcADAAVAAADLUi6OsPMOUjkhJa2p7v/QiiGzDh+KBUE37p67qsAABPPNCQTuUfXPmDn9+lBEgAh+QQFBQAEACwOAA4AEAAQAAADL0i6Ov6OMQilvTgzIfTmnUeA3BUEX0kAgHKin8IuZza79XXj2E68uhYjJ/FpjJkEACH5BAUFAAQALAcAEgAVAAwAAAM2SLrMMy1K8t68tMIFQBSCUymdRwSBAoYiaZ6pykblgi6r1DE3PnM7W0z2IwSFDRBG0VtGmpcEACH5BAUFAAQALAIAEgAVAAwAAAM0SKoA+xC2Fiubzkb8QojDsFCdpwiCEoqWeaYqG3nfu6yVa9/yQj+oB64ECQp7FqMmCYMkAAAh+QQFBQAEACwAAA4AEAAQAAADLgi6Sv6OMUirvfiGkN3e2QdiIiQI1ficKDEM2Pm8FzvDlnznukNXPR+u4xp2XgkAIfkEBQUABAAsAAAHAAwAFQAAAy1IBKD+izXoJKNV4ry7D2AIPqLonagiCNu6Uu4Lxc8wqGxtd/tm3z4g5scTJgAAIfkEBQUABAAsAAACAAwAFQAAAy5IugTAsLnIJlXuXblCgJnieZVGjOSFbufHvpAgzzJD03DODsPF85EfECL09SgJADs=
非常小的 CSS image
//下方为这个1*1像素PNG图片的base64编码 95B（放大到20*20）
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=
//下方为这个1*1像素GIF图片的base64编码 43B（放大到20*20）
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
//下方为这个12*12像素GIF图片的base64编码 64B
data:image/gif;base64,R0lGODlhDAAMAIAAACi3ef///yH5BAAHAP8ALAAAAAAMAAwAAAIXhBEZx6h91IIuMYmz3pzfR0lUNUHiUQAAOw==
//下方为这个PNG占位图片的base64编码 178B
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAA1AQMAAADPva/SAAAABlBMVEXd3d3x8fHdh2cDAAAAZ0lEQVQoz73OsQ2AMAxE0aAUKT0Co2Q0VmOUjEBJEfFBwnaEgtKBqydZPl/4cMSVV9NSTGxD7cNtaXm95NEiusTvc0unUwStm7BHghWaoWoIHPoaO8Y0uZJLbuUrRFVCVtWACv7T25wFv5rFJ7zZzQAAAABJRU5ErkJggg==
//下方为这个gif箭头图片的base64编码 71B
data:image/gif;base64,R0lGODlhFAAUAIABAHR0dP///yH5BAEAAAEALAAAAAAUABQAAAIejI+py+0PG4hr0mTvyTpw/V0hND6lc0qdt6brCycFADs=
//下方为这个gif箭头图片的base64编码 70B
data:image/gif;base64,R0lGODlhFAAUAIABAHR0dAAAACH5BAEAAAEALAAAAAAUABQAAAIdjI+py+0Po5x0gXdty4wj3yXgdozOZWLVyrbuGxUAOw==
//下方为这个gif箭头图片的base64编码 74B
data:image/gif;base64,R0lGODlhEwAUAIABAHR0dAAAACH5BAEAAAEALAAAAAATABQAAAIhjI+py+0PIwLyUCpx0I7v5xmh1YzjlJwpmX2V+8byTEMFADs=
//下方为这个gif叉号图片的base64编码 76B
data:image/gif;base64,R0lGODlhFAAUAIAAAP///3R0dCH5BAEAAAAALAAAAAAUABQAAAIjhI+py+0PU3hzVesu0ozzdn0ZIFKRRJ5GeHqQWK5gZ6r2rRYAOw==
//下方为这个gif叉号图片的base64编码 83B
data:image/gif;base64,R0lGODlhFQAVAIABAHR0dAAAACH5BAEAAAEALAAAAAAVABUAAAItRI6pabaPXJCQKVrx0Tf7Oj3cgo1iBJ4muHotiabxzJ41ZLbcG1ryRvs1fqQCADs=
//下方为这个PNG五角星图片的base64编码 306B
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAATlBMVEUAAACQt9WLud2HuuOGu+WNuNqLudyKud+Jud+JuuCHu+OGu+WQt9aOuNiOuNiLud2Kud6IuuGIuuKIuuKHuuKHuuOHu+OGu+SGu+SSttOk7P+aAAAAGXRSTlMA/dZoDu3fwbejTgf89fTYyYSAfHBfWTAqS2zOYQAAAHpJREFUGNNVi0kOhDAQxDoNIRv77v9/dJQEjcCXki2VPKjKhwuuT3Dg3t4aMO3LPdbia4lBB2DdgEFDlB7AriKbBeilMXTt8+wwjZRSQ/VSlrxL9oJnzjPjpaIESUkC+oSRQ0EPxuqJP6mEE5hinICzhL13d97bmV3kB5JHCBhDzK2/AAAAAElFTkSuQmCC
//下方为这个PNG图片的base64编码 201B
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEUAAACSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttLDUWjVAAAADnRSTlMAEPqShgrr6d69qEg2GdzbypsAAAA9SURBVAjXY3B6BwYqDHoQxiOGd1DA8I4BDN7BRYiX4kMRgZlsB2E8ZmCVevdSUFAwgIGBsa+WAQKObQCRAOwRUuN2WOHxAAAAAElFTkSuQmCC
//下方为这个PNG图片的base64编码 246B
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAMAAABl5a5YAAAAM1BMVEUAAACSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttKSttLdir3bAAAAEHRSTlMAgL+PIN+fYFBAEO/PMK9winCrVwAAAGJJREFUGNN9jEkOwCAMxBygLF3n/68tVFUFHGrlYksZOtbdGHByg3uNIUny3b+vvoXPy6LKRSPHgOnB0tGmPFEfO1JBHdT7DW4ONoc8B6ZwNgldSGCK5OX1bQWKBTjMtWhwA9OHCi6k/HncAAAAAElFTkSuQmCC