#1217
展开↯#1218
作者：广西南宁市
仿新浪App上面的导航
点击文字即可看到效果
点击文字即可看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
text-align: center;
}
.nav_tab{
margin:20px auto;
display: inline-block;
}
.nav_tab_text{
overflow:hidden;
}
.nav_tab_text span{
float: left;
color: #ccc;
margin-right: 10px;
cursor: pointer;
}
.nav_tab .nav_tab_sub{
width: 100%;
height: 2px;
margin-top: 5px;
position: relative;
}
.nav_tab .nav_tab_sub span{
width: 20px;
height: 2px;
background-color: orange;
float: left;
display: block;
position: absolute;
top:0px;
}
.Black{
color:#333 !important;
}
</style>
<body>
<div class="nav_tab">
<div class="nav_tab_text">
<span class="Black">Following</span>
<span>Hot</span>
<span>Hot1</span>
<span>Hot2</span>
<span>FllowingHot</span>
</div>
<p class="nav_tab_sub"><span></span></p>
</div>
<script type="text/javascript">
$(function(){
//初始化函数
var init_width = $('.nav_tab_text span').eq(0).width();
$('.nav_tab_sub span').css('left',init_width/2-10 + 'px');
$('.nav_tab_text span').click(function(){
var i = $(this).index();
setTimeout(function(){
$('.nav_tab_text span').eq(i).addClass('Black').siblings('span').removeClass('Black');
},500)
/*移动元素的left值*/
var _SubEle_P_l =parseInt($('.nav_tab_sub span').css('left'));
/*点击元素的宽度*/
var _Width = $(this).width();
//点击元素距离可视窗口的距离
var _ClickEle_l = $(this).offset().left;
//移动元素距离可视窗口的距离
var _SubEle_l = $('.nav_tab_sub span').offset().left;
//点击元素和移动元素的距离差
var difference_v =parseInt(_ClickEle_l - _SubEle_l);
//值大于 0 向左移动，小于 0 向右移动
if (difference_v>0) {
$('.nav_tab_sub span').animate({'width': difference_v + _Width/2 + 10 + 'px'},200);
$('.nav_tab_sub span').animate({'left': _SubEle_P_l + difference_v + _Width/2-10 + 'px','width': '20px'},200);
}else{
$('.nav_tab_sub span').animate({'width': -difference_v - _Width/2 + 10 + 'px','left': _SubEle_P_l + difference_v + _Width/2-10 + 'px'},200);
$('.nav_tab_sub span').animate({'width': '20px'},200);
}
})
})
</script>
</body>
</html>Run code
Cut to clipboard
文章：transition删除按钮旋转180度过渡效果 发表时间：2017-07-05, 11:02:16
#1219
作者：广西南宁市
transition导航背景色块，从下往上过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ list-style-type: none; margin: 0; padding: 0; }
.demo{
height: 40px;
width: 1000px;
margin: 100px auto;
position: relative;
}
.demo li{ float: left; background: #eee; }
.demo li a{ width: 200px; display: block;height: 40px; line-height: 40px; }
.demo li a .c{ position: absolute; z-index: 2; text-align: center; width: 200px; color: #333;}
.demo li a .b{
position: absolute; bottom: 0px;
-webkit-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
width: 200px; display: block;
height: 0px;
z-index: 1;
}
.demo li a:hover .b{ background: #f00; height: 40px; }
/* .demo .current{ background: #f00; }
.demo .current ul{ display: none; position: absolute; top: 40px; } */
</style>
</head>
<body>
<div class="demo">
<ul>
<li>
<a href="#">
<p class="c">lizhenqiu.com</p>
<p class="b"></p>
</a>
<ul>
<li>1</li>
</ul>
</li>
<li>
<a href="#">
<p class="c">lizhenqiu.com</p>
<p class="b"></p>
</a>
</li>
</ul>
</div>
</body>
</html>Run code
Cut to clipboard
文章：transition删除按钮旋转180度过渡效果 发表时间：2017-07-05, 10:54:52
#1220
作者：广西南宁市
禁用 js 依旧可以在 Amazon 买东西 - -
1.确定几个鸡汤主题，比如努力，奋斗，辛苦，价值观，团队建设，未来，帮助等
2.下个定义，强行对鸡汤主题做解释，比如：未来就是数据，团队就要唐僧式团队，价值观才是成就事业的基石，女人更适合当管理者，等等，至于为什么从来不说
3.根据鸡汤主题编故事，以讲阿里巴巴创立过程的故事为主，真假难辨
4.强调阿里巴巴是最切合那几个鸡汤主题的公司，所以阿里巴巴成功了，你们也要切合这几个鸡汤主题你也能成功
5.循环往复
马云说话基本上都是双标，或者说随意打脸
比如他在一场对大学生的演讲上说：
以前我们阿里巴巴不招收大学应届生，是因为应届生没工作经验，不适合我们阿里巴巴的发展
现在我们阿里巴巴招收大学应届生，是因为我们阿里巴巴要承担社会责任
意思就是：以前阿里巴巴不承担社会责任？应届生没经验其实也是可以用的？
照着学其实很快就能学会，比如我就先编一段给大家看看：
人们都说书中自有黄金屋，书中自有颜如玉，但是我认为多读书不是好事，读书读多了的人都是从一个模板出来的，他的思维就江化了，没有了创新。但是创新是企业的灵魂，缺乏创新的企业无论他今天过得多好他一定会死在明天，所以我在阿里巴巴就经常说，我们要广泛吸收各种不同的人才，我们的hr不要总是拿学历去筛选人，不要用一把尺子量人。曾经我们创业的时候，我们十八个罗汉坐在一起，我坐在当中数了一下，一个985、211都没有，更不要说有的人还不是本科，是大专、中专，后来蔡崇信来加盟我们我说不行，我们这是小庙，你一个哈弗的高材生和我们这群土包子坐一起能行吗，我就劝蔡崇信再想想，但是蔡崇信说：不。他说我看中的就是你们这样不同的思维 ，在美国的同事们都是名校出来的，他们只能上班不能创业，创业要的就是创新的思维，我看美国人没有你们有。所以你看我们阿里巴巴能发展到今天，我们靠的就是这股创新的精神，我们不靠学历，也不需要根据社会成见来挑选人才。所以我宣布，从明年开始我们阿里巴巴将实施新的人才计划，我们每年将从大专毕业生中选取1000人进入我们明日阿里之星培养计划，这一群大专生中将产生我们阿里未来的CEO、CFO，将成为未来的商界领袖。我相信他们的拼搏、他们的创新还有他们深入理解并发扬阿里的价值观，我相信只要他们能够做到这些就一定可以做的比985、211得毕业生更好。
是不是觉得大专生也能进大企业了呢？
但是演讲要有逻辑的，马云的演讲属于只看短逻辑，眼前逻辑，没有长远谋划前后一致的那种。
再比如一个阿里巴巴做游戏的例子，
一开始说不做游戏，游戏是祸害人的东西，阿里巴巴要对人民负责，
后来又说要做游戏，因为没人去挑战腾讯的话腾讯就要去祸害人啦，阿里巴巴为民除害，
正反都有理，但是前后打脸，这就是马云的技巧。3 , 他这种演讲是对的。因为要照顾听众的感受，一般听众只能记住短逻辑，而且如果你还讲为什么，等你讲完了为什么，他们已经忘了你在解释什么问题了，还有反复循环，那是为了加强印象，缺少反复循环，很多人反而会说你没有重点。最后强调阿里的成功证明了我说的这些道理是对的，这是马云的教训和经验，在他没有业绩成功之前，他说的理论经常被别人当中胡扯和放屁，但是越没有眼光的人就越认可明确的数字（比如钱），所以他为了大部分人接受他的理论，就只好说阿里是这么做的……
迷恋成功者，这是俗人的通病，所以他们永远都是俗人。成功的人的任何一句话，都会成为那些俗人深思的东西，哪怕是一句屁话。
同时成功者也会对自己说的深信不疑，不说马云，想想你们自己身边的人，那些赚了点钱的人，他们是不是在扮演专家的角色。
为什么说成功是不能复制的，因为当时那个环境因素你是永远不可能复制重现的，所以那些成功者，最多也就是让你喝碗鸡汤，兴奋个一下午，这就跟你撸管一样，爽那一会，有可能会让你一天都精神不振。
真正的奋斗就是长征，不是喝几碗鸡汤就能挺过雪山草地的，所以那些大佬讲话我不太喜欢听，怕神经衰弱。8 , 勤劳致富是这个世界最大的谎言，是缓解loser们焦虑情绪的一味安慰剂。9 , 我敞亮的未来今天停电了。10 , 你所做的，配不上自己的野心，也辜负了所受的苦难。11 , 一个年轻人什么都没有，就算失败也不过就是烧光这几年的积蓄，你能有多少钱，但是你换的了经历和成长，以及别的现在还不可知的东西。
1.确定几个鸡汤主题，比如努力，奋斗，辛苦，价值观，团队建设，未来，帮助等
2.下个定义，强行对鸡汤主题做解释，比如：未来就是数据，团队就要唐僧式团队，价值观才是成就事业的基石，女人更适合当管理者，等等，至于为什么从来不说
3.根据鸡汤主题编故事，以讲阿里巴巴创立过程的故事为主，真假难辨
4.强调阿里巴巴是最切合那几个鸡汤主题的公司，所以阿里巴巴成功了，你们也要切合这几个鸡汤主题你也能成功
5.循环往复
马云说话基本上都是双标，或者说随意打脸
比如他在一场对大学生的演讲上说：
以前我们阿里巴巴不招收大学应届生，是因为应届生没工作经验，不适合我们阿里巴巴的发展
现在我们阿里巴巴招收大学应届生，是因为我们阿里巴巴要承担社会责任
意思就是：以前阿里巴巴不承担社会责任？应届生没经验其实也是可以用的？
照着学其实很快就能学会，比如我就先编一段给大家看看：
人们都说书中自有黄金屋，书中自有颜如玉，但是我认为多读书不是好事，读书读多了的人都是从一个模板出来的，他的思维就江化了，没有了创新。但是创新是企业的灵魂，缺乏创新的企业无论他今天过得多好他一定会死在明天，所以我在阿里巴巴就经常说，我们要广泛吸收各种不同的人才，我们的hr不要总是拿学历去筛选人，不要用一把尺子量人。曾经我们创业的时候，我们十八个罗汉坐在一起，我坐在当中数了一下，一个985、211都没有，更不要说有的人还不是本科，是大专、中专，后来蔡崇信来加盟我们我说不行，我们这是小庙，你一个哈弗的高材生和我们这群土包子坐一起能行吗，我就劝蔡崇信再想想，但是蔡崇信说：不。他说我看中的就是你们这样不同的思维 ，在美国的同事们都是名校出来的，他们只能上班不能创业，创业要的就是创新的思维，我看美国人没有你们有。所以你看我们阿里巴巴能发展到今天，我们靠的就是这股创新的精神，我们不靠学历，也不需要根据社会成见来挑选人才。所以我宣布，从明年开始我们阿里巴巴将实施新的人才计划，我们每年将从大专毕业生中选取1000人进入我们明日阿里之星培养计划，这一群大专生中将产生我们阿里未来的CEO、CFO，将成为未来的商界领袖。我相信他们的拼搏、他们的创新还有他们深入理解并发扬阿里的价值观，我相信只要他们能够做到这些就一定可以做的比985、211得毕业生更好。
是不是觉得大专生也能进大企业了呢？
但是演讲要有逻辑的，马云的演讲属于只看短逻辑，眼前逻辑，没有长远谋划前后一致的那种。
再比如一个阿里巴巴做游戏的例子，
一开始说不做游戏，游戏是祸害人的东西，阿里巴巴要对人民负责，
后来又说要做游戏，因为没人去挑战腾讯的话腾讯就要去祸害人啦，阿里巴巴为民除害，
正反都有理，但是前后打脸，这就是马云的技巧。
迷恋成功者，这是俗人的通病，所以他们永远都是俗人。成功的人的任何一句话，都会成为那些俗人深思的东西，哪怕是一句屁话。
同时成功者也会对自己说的深信不疑，不说马云，想想你们自己身边的人，那些赚了点钱的人，他们是不是在扮演专家的角色。
为什么说成功是不能复制的，因为当时那个环境因素你是永远不可能复制重现的，所以那些成功者，最多也就是让你喝碗鸡汤，兴奋个一下午，这就跟你撸管一样，爽那一会，有可能会让你一天都精神不振。
真正的奋斗就是长征，不是喝几碗鸡汤就能挺过雪山草地的，所以那些大佬讲话我不太喜欢听，怕神经衰弱。
文章：DOM事件冒泡 发表时间：2017-07-04, 11:00:50
#1221
作者：广西南宁市
从前有个小镇，常年养羊为业
小镇有个大羊圈，羊圈里的羊为镇民共有
羊圈有个洞，一直存在
管羊圈的人，不去填补这个洞，
每次丢掉几只羊，他都说是被狼吃了
如果把洞堵住了，羊丢了，那只能是管羊圈的人担责
人们开始质疑管羊圈的人监守自盗
于是管羊圈的人找到猎人，彼此合作
猎人时不时捕头狼，绑回来杀死后挂在羊圈旁示众
但还是有人公开质疑为什么羊圈有个洞
于是管羊圈的人又找到刺客，彼此合作
刺客让质疑的人消失
但越来越多的人都开始质疑，为什么羊圈一直有洞
于是管羊圈的人找到学者，彼此合作
学者洋洋洒洒写了几篇看似很有道理的文章
《论羊圈上有洞的合理性和必要性》
《警惕污蔑羊圈管理人的这几种谣言》
《羊圈管理者坚守岗位的心路历程》
最后人们渐渐接受了“羊圈有洞是正确的”这一逻辑
并时不时称赞羊圈上挂着的狼尸，和那个“有必要”的洞
得出结论：羊圈管理人无疑是克己奉公的好人，我们应该感谢他
管羊圈的人、猎人、刺客、学者天天吃羊肉，穿羊毛衣服
镇民偶尔能喝到羊汤，也穿不暖，还要为羊汤里飘着的零星羊肉“幸福”一番
后来……
快递员:喂你好，你叫我爹对吧？
朋友:你……是？
快递员:你是不是叫我爹？
朋友:你是谁？
快递员:我问你叫我爹对不对？
朋友:你到底干啥？
快递员:你要是叫我爹我就把快递给你送过去
文章：js 删除前confirm确认提示代码 发表时间：2017-06-21, 14:09:42
#1222
作者：广西南宁市
文章：DOM事件冒泡 发表时间：2017-07-04, 11:41:38
#1223
作者：广西南宁市
文章：DOM事件冒泡 发表时间：2017-07-04, 10:41:47
#1224
作者：广西南宁市
禁止js缓存
<html>
<head>
<script type="text/javascript">
document.write("<script src='**.js?"+Math.random()+"'><\/script>");
</script>
</head>
</html>Run code
Cut to clipboard
文章：DOM事件冒泡 发表时间：2017-07-04, 10:39:17
#1225
展开↯
#1227
作者：广西南宁市
天下没有免费的午餐”，是经济学第一规律。你要社会福利吗？好，拿命来！
文章：希特勒是个好领导？ 发表时间：2017-07-01, 15:26:27
#1228
作者：广西南宁市
在没有摩擦、边界完全弹性碰撞的台球桌上，朝任意方向击打一个球，经过无数次反弹后是否必然能够落入球洞？
首先物理简化一下——认为只有台球与球洞严格同心，球才会落袋。同时球严格走直线、严格遵循反射定律。
然后数学等效一下——把碰撞看成一种镜像过程，问题等价于：在二维无限矩形格点上，任意画一条直线，是否一定会经过某个格点？
再代数等效一下——令相邻的台球洞的距离为单位长度，问题就变成：二维坐标系上的任意一条直线，是否一定经过点P(a,b)，使得a、b同时为整数。
设直线斜率为k，初始位置为(a0,b0)时：
由于有理数 x 无理数 = 无理数，对于方程y-b0=k(x-a0)
若k为有理数，a0为有理数，b0为无理数时，x、y不可能同时为有理数——很容易证明，k为有理数时，即为周期解的情形；
若k为无理数，a0、b0同时为有理数时，x、y不可能同时为有理数；
结论：无论朝哪个方向击打台球，总能找到一个合适的初始位置，使得无论经过多久，台球都不会落入球袋。
当然，对于任何问题的求解，都有其简化和抽象，这是一个高度简化的求解，也是讨论一个问题的第一步，个人并不认为建立一个具有通用性的方法是没有意义的。在这个方法的基础上，进一步考虑球比洞小也并不难，只需要找到间距为直径之差的两条平行线，中间没有格点即可，觉得这个回答太过简单的同学可自行求解。
另外，个人不接受“找到一个反例就行了，更多的讨论没有意义”这样的观点。既然这里是知乎，回答问题之余，再深一步，创建一类方法，寻找问题的普遍解，并无不妥。
首先物理简化一下——认为只有台球与球洞严格同心，球才会落袋。同时球严格走直线、严格遵循反射定律。
然后数学等效一下——把碰撞看成一种镜像过程，问题等价于：在二维无限矩形格点上，任意画一条直线，是否一定会经过某个格点？
再代数等效一下——令相邻的台球洞的距离为单位长度，问题就变成：二维坐标系上的任意一条直线，是否一定经过点P(a,b)，使得a、b同时为整数。
设直线斜率为k，初始位置为(a0,b0)时：
由于有理数 x 无理数 = 无理数，对于方程y-b0=k(x-a0)
若k为有理数，a0为有理数，b0为无理数时，x、y不可能同时为有理数——很容易证明，k为有理数时，即为周期解的情形；
若k为无理数，a0、b0同时为有理数时，x、y不可能同时为有理数；
结论：无论朝哪个方向击打台球，总能找到一个合适的初始位置，使得无论经过多久，台球都不会落入球袋。
当然，对于任何问题的求解，都有其简化和抽象，这是一个高度简化的求解，也是讨论一个问题的第一步，个人并不认为建立一个具有通用性的方法是没有意义的。在这个方法的基础上，进一步考虑球比洞小也并不难，只需要找到间距为直径之差的两条平行线，中间没有格点即可，觉得这个回答太过简单的同学可自行求解。
另外，个人不接受“找到一个反例就行了，更多的讨论没有意义”这样的观点。既然这里是知乎，回答问题之余，再深一步，创建一类方法，寻找问题的普遍解，并无不妥。
文章：程序员编程常用网页工具集[游戏] 发表时间：2017-07-01, 09:51:46
#1229
作者：广西南宁市
花开荼蘼，终有落英缤纷。。。浮华暂借，难免曲终人散。
不言盛景，不叙深情。
慧极必伤，情深不寿。安之若素，微笑向暖。
谁的新欢？谁的旧爱？
所谓一见钟情，不过见色起意；所谓日久生情，不过权衡利弊。
一念放下，万般自在。。。敢不活在当下？憋屈着祝人幸福，是这世上最蠢的事情。
用心甘情愿的态度，过随遇而安的生活。
夜色正好。
佛还说，人生在世如身处荆棘之中，心不动，人不妄动，不动则不伤：如心动则人妄动，伤其身痛其骨，于是体会到世间诸般痛苦。
佛又说，一念愚即般若绝，一念智即半若生。
佛不仅说，大悲无泪，大悟无言，大笑无声。
佛而且说，一切皆为虚幻。
佛虽然说，一花一世界，一叶一如来。
佛但是说，苦海无边回头是岸，放下屠刀立地成佛。
佛总结说，不可说，不可说。
损人利己骑马骡,正直公平挨饿。
修桥补路瞎眼,杀人放火儿多,
我到西天问我佛,佛说:我也没辙!
折煞了世人
梦偏冷 辗转一生
情债又几本
如你默认 生死枯等
枯等一圈 又一圈的年轮
浮图塔 断了几层
断了谁的魂
痛直奔 一盏残灯
倾塌的山门
文章：2017年过半，我们身处的风口和泡沫 发表时间：2017-06-30, 09:41:22
#1231
作者：广西南宁市
css奇技淫巧
在百分比布局中, 使用纯css实现的按照元素寬度的一定比例來設定高度的小技巧(比如寬度占屏幕20%,高度是寬度的100%, 调整宽度,高度会等比缩放),
如果你知道更好的技巧实现它, 欢迎下方留言哦
在百分比布局中, 使用纯css实现的按照元素寬度的一定比例來設定高度的小技巧(比如寬度占屏幕20%,高度是寬度的100%, 调整宽度,高度会等比缩放),
如果你知道更好的技巧实现它, 欢迎下方留言哦
<!DOCTYPE HTML>
<html>
<head>
<style>
.father {
width: 20%; /*改一下宽度试试看*/
}
.daughter {
width: 100%; height: 0;
padding-top: 100%;
background: #ff7500;;
}
</style>
</head>
<body>
<div class = "father">
<div class = "daughter"></div>
</div>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-30, 15:02:05
#1232
作者：广西南宁市
WEB安全色
bootcss官网有个这个页面
bootcss官网有个这个页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>web安全色</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-size: 12px;
background-color: #efefef;
}
h1 {
height: 100px;
line-height: 100px;
font-size: 36px;
text-align: center;
}
.color-list {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
width: 1000px;
margin: 0 auto;
justify-content: space-between;
align-items: space-between;
flex-wrap: wrap;
overflow-y: auto;
}
.color-item {
width: 150px;
height: 190px;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 3px 2px 3px #ccc;
}
.color-block {
width: 148px;
height: 130px;
border-radius: 5px;
border-bottom: 1px solid #ccc;
}
.color-code {
height: 36px;
line-height: 18px;
padding-left: 10px;
margin-top: 10px;
}
.color-code strong {
margin-right: 14px;
}
</style>
</head>
<body>
<h1>WEB安全色DEMO</h1>
<div class="color-list" id="color-list"></div>
<script>
window.onload = () => {
let format = (num) => ('0' + num.toString(16)).slice(-2)
let arr = [0, 0, 0],
dom = []
while (arr[0] <= 5) {
let arr2 = arr.map((ele) => ele * 51)
let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),
rgb = arr2.join(', ')
arr[2]++
if (arr[2] > 5) {
arr[2] = 0
arr[1]++
if (arr[1] > 5) {
arr[0]++
arr[1] = 0
}
}
dom.push(`<div class="color-item">
<div class="color-block" style="background-color: ${hex};"></div>
<div class="color-code">
<p><strong>HEX:</strong><span>${hex}</span></p>
<p><strong>RGB:</strong><span>${rgb}</span></p>
</div></div>`)
}
document.querySelector('#color-list').innerHTML = dom.join('')
setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-30, 14:54:45
#1233
作者：广西南宁市
input复选框单选框样式美化
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus+label::before,
.checkbox input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked+label::after,
.checkbox input[type="radio"]:checked+label::after {
font-family: "FontAwesome";
content: "\f00c";
}
.checkbox input[type="checkbox"]:indeterminate+label::after,
.checkbox input[type="radio"]:indeterminate+label::after {
display: block;
content: "";
width: 10px;
height: 3px;
background-color: #555555;
border-radius: 2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled+label,
.checkbox input[type="radio"]:disabled+label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled+label::before,
.checkbox input[type="radio"]:disabled+label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked+label::before,
.checkbox-primary input[type="radio"]:checked+label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked+label::after,
.checkbox-primary input[type="radio"]:checked+label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked+label::before,
.checkbox-danger input[type="radio"]:checked+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked+label::after,
.checkbox-danger input[type="radio"]:checked+label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked+label::before,
.checkbox-info input[type="radio"]:checked+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked+label::after,
.checkbox-info input[type="radio"]:checked+label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked+label::before,
.checkbox-warning input[type="radio"]:checked+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked+label::after,
.checkbox-warning input[type="radio"]:checked+label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked+label::before,
.checkbox-success input[type="radio"]:checked+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked+label::after,
.checkbox-success input[type="radio"]:checked+label::after {
color: #fff;
}
.checkbox-primary input[type="checkbox"]:indeterminate+label::before,
.checkbox-primary input[type="radio"]:indeterminate+label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:indeterminate+label::after,
.checkbox-primary input[type="radio"]:indeterminate+label::after {
background-color: #fff;
}
.checkbox-danger input[type="checkbox"]:indeterminate+label::before,
.checkbox-danger input[type="radio"]:indeterminate+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:indeterminate+label::after,
.checkbox-danger input[type="radio"]:indeterminate+label::after {
background-color: #fff;
}
.checkbox-info input[type="checkbox"]:indeterminate+label::before,
.checkbox-info input[type="radio"]:indeterminate+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:indeterminate+label::after,
.checkbox-info input[type="radio"]:indeterminate+label::after {
background-color: #fff;
}
.checkbox-warning input[type="checkbox"]:indeterminate+label::before,
.checkbox-warning input[type="radio"]:indeterminate+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:indeterminate+label::after,
.checkbox-warning input[type="radio"]:indeterminate+label::after {
background-color: #fff;
}
.checkbox-success input[type="checkbox"]:indeterminate+label::before,
.checkbox-success input[type="radio"]:indeterminate+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:indeterminate+label::after,
.checkbox-success input[type="radio"]:indeterminate+label::after {
background-color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
z-index: 1;
}
.radio input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked+label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled+label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled+label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"]+label::after {
background-color: #337ab7;
}
.radio-primary input[type="radio"]:checked+label::before {
border-color: #337ab7;
}
.radio-primary input[type="radio"]:checked+label::after {
background-color: #337ab7;
}
.radio-danger input[type="radio"]+label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"]+label::after {
background-color: #5bc0de;
}
.radio-info input[type="radio"]:checked+label::before {
border-color: #5bc0de;
}
.radio-info input[type="radio"]:checked+label::after {
background-color: #5bc0de;
}
.radio-warning input[type="radio"]+label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"]+label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::after {
background-color: #5cb85c;
}
input[type="checkbox"].styled:checked+label:after,
input[type="radio"].styled:checked+label:after {
font-family: 'FontAwesome';
content: "\f00c";
}
input[type="checkbox"] .styled:checked+label::before,
input[type="radio"] .styled:checked+label::before {
color: #fff;
}
input[type="checkbox"] .styled:checked+label::after,
input[type="radio"] .styled:checked+label::after {
color: #fff;
}
</style>
</head>
<body>
<div class="checkbox">
<input id="checkbox1" class="styled" type="checkbox">
<label for="checkbox1">
Default
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" class="styled" type="checkbox" checked>
<label for="checkbox2">
Primary
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox3" class="styled" type="checkbox">
<label for="checkbox3">
Success
</label>
</div>
<div class="checkbox checkbox-info">
<input id="checkbox4" class="styled" type="checkbox">
<label for="checkbox4">
Info
</label>
</div>
<div class="checkbox checkbox-warning">
<input id="checkbox5" type="checkbox" class="styled" checked>
<label for="checkbox5">
Warning
</label>
</div>
<div class="radio">
<input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
<label></label>
</div>
<div class="radio radio-success">
<input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
<label></label>
</div>
</body>
</html>Run code
Cut to clipboard
文章：CSS 美化复选框CHECKBOX-无图片方式 发表时间：2017-06-30, 14:50:46
#1234
作者：广西南宁市
浮点数计算问题
js解释环境里面，0.1+0.2！=0.3 ；结果是true
为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂；
大部分编程语言都是这样处理精度差异的，借用过来处理一下 JS 中的浮点数精度误差。
js解释环境里面，0.1+0.2！=0.3 ；结果是true
为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂；
<script>
Math.formatFloat = function(f, digit) {
var m = Math.pow(10, digit);
return parseInt(f * m, 10) / m;
}
var numA = 0.1;
var numB = 0.2;
console.log(0.1+0.2);
console.log(0.1+0.2==0.3);
console.log(0.1+0.2!=0.3);
console.log(Math.formatFloat(numA + numB, 1) === 0.3);</script>Run code
Cut to clipboard
大部分编程语言都是这样处理精度差异的，借用过来处理一下 JS 中的浮点数精度误差。
文章：JS浮点数运算多出很多位小数点Bug的解决办法 发表时间：2017-06-30, 14:47:14
#1235
作者：广西南宁市
获取当前省市区
<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script><script>$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',
function(){
alert(remote_ip_info.country);//国家
alert(remote_ip_info.province);//省份
alert(remote_ip_info.city);//城市
});</script>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-30, 14:45:02
丈夫为了赎回妻子，不得己去日本打工。日本老板叮嘱他，盘子一定要洗七遍。他有一天因为疲劳，心想少洗几遍也看不出来，就只洗了六遍。结果老板把他毫不留情地开除了，送他的临别赠言是：在我们日本，诚信是第一位的，哪怕别人看不出来，你也要做。
在日本虽然丢了工作，但他却看见迪迦奥特曼在打怪兽的时候不小心说出了自己的QQ号，他怕晚了就加不上了，于是匆忙回国。
丈夫回国便接到一通号码未显示的来电，电话话筒里射出一根毒针，让他当场昏迷。他醒过来，发现自己躺在装满冰块的浴缸里，冰水下一片血红。他一摸发现自己的肾被割了。
丈夫想报警，但起不来，浴室也没电话。就在这千钧一发之际，他想起浴室的下水系统是德国人造的。果然，在浴缸下，他发现了三层油纸包着的手机，还能打。
丈夫打开手机一看，发现手机即将没电。他急忙输入＃2861解锁了暗藏的10％应急电量。
手机里存有一个号码，丈夫抱着孤注一掷的心拨了过去，是美国总统奥巴马亲自接听的。他说：“小伙子你知道吗，我们美国护照上写看‘祖国永远是你的后盾’。我们是自由民主的国家，会为每一个生命停下脚步。我这就开空军一号去救你。”
丈夫一边听电话，一边又在浴缸下摸索出一个充电宝，于是在没挂断电话的情况下直接插上充电宝。突然，手机因为一边充电一边打电话爆炸了。
丈夫没办法，只能不等总统了，自己先去医院治疗。于是他自己用502止血，然后下楼打车去医院。没想到出租车司机只收新版龙图腾人民币。丈夫无奈徒步走到了医院。
到了医院，无德医生说不先给钱不救，没有现金去找提款机。
丈夫好不容易找到了一个提款机，正在取钱，后面的歹徒把刀架在了他的脖子上。丈夫突然想起反输密码能救命的事，把自己的银行卡密码反着输入进去，及时通知了警察，擒拿了歹徒。
这时，奥巴马驾着空军一号赶到了。奥巴马解释说很抱歉自己来晚了，因为在路上他发现一只麻雀落在了电线上，情况十分危急。他不得不通知美国政府果断停掉整个城市的电，然后开飞机救下麻雀，所以耽误了时间。
奥巴马带来了失传的气功大师。气功大师通过拍打疗法，让丈夫当场就长回了肾。
奥巴马也说，他让FBI特工去调查丈夫的妻子，现在也成功把她救出来了。为了治好她，特工们给她吃肯德基的转基因鸡肉，就是一只鸡有六个翅膀八条腿的那种。妻子吃完就长出了四肢和舌头。
丈夫终于和妻子团聚，两人决定庆祝庆祝，就去酒吧喝酒。妻子坐在酒吧的椅子上，被坐垫下有不明血迹的针头扎了一下。后来去医院一查，她得了艾滋病，年纪轻轻就离世了。
悲痛欲绝的丈夫埋葬了妻子，决定报复社会。他利用翻墙工具恶意做空A股，被公安机关擒获。
在监狱里，他把自己的悲惨遭遇写在纸上，夹进他织的毛衣里。毛衣被销往国外，一时没有音讯。
出狱后的丈夫独自去吃饭，点了一条鱼，吃鱼的时候吃到硬物，吐出来一看，是当年送给妻子的钻戒，他们夫妻俩当初去泰国旅游的时候不知怎么弄丢了，没想到现在它又回来了。丈夫不禁泪流满面，来到海边，把水洼里的小鱼一条一条捡起来丢回海里。
从此，他发誓要做一个对社会、对世界有用的人，终于有所成。他的名字叫蒋中正。
后来，哪怕在经济疲软、民生凋敝、政局动荡的时刻，他依然不放弃每一寸领土。他指挥了中国海军最辉煌的一次胜利一一震惊世界的931大海战。四十多年过去了，这段历史却被无情地尘封。
而他在监狱里织的毛衣被销往美国，最终被一个美国人买到了。美国人拿到了纸条，终于在四十年后的今夭，把故事拍成短片放到Youtube上。中国人看到后，纷纷翻墙点赞。这个视频也成了世界上点击率最高的视频。
但是，一夜之间此视频在各大网站纷纷被封杀，疑似不明势力重金买下微博头条，让此事石沉大海。
虽然他从此逢人便说：“我是国民党大总统，现在有十亿资产被冻结，只要你给我的卡里打5000块钱就能解冻，我分你五百万！我有军队，事成之后给你一个师长！我们一起反攻大陆！”但是没人听他的。
从此他的故事再也无人知晓！看到这里，动一动你的手指，花3kb为他转一下好吗？多一个人看到，生活在水深火热中的台湾同胞就早一天解放！把它转发到五个群，你的QQ就会自动升一个太阳，还有100QB！我刚刚试过了，是真的！
因为，今天刚好是马化腾的生日。