#590
展开↯#591
作者:Administrator
<a href="tel:400-888-6633">拨打电话<a>
<a href="sms:19956321564">发送短信<a>
<a href="mailto:mail@mail.com">发送邮件<a>
Run code
Cut to clipboard
IE edge浏览器强制修改了电话样式,办法解决
<meta content="telephone=no" name="format-detection">
Run code
Cut to clipboard
加个meta标签就可以
去掉Egde浏览器 对电话号码的默认样式
win10 edge 关闭电话号码识别
Microsoft Edge 浏览器会把某些IP地址强制识别为电话号码
文章:常用html、demo代码 发表时间:2017-10-19, 17:10:43
#592
作者:广西河池市宜州市
CSS3实现图片循环旋转
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-03, 11:51:59
#593
作者:广西河池市宜州市
Chrome 谷歌浏览器 清除 DNS 缓存 ;遇见有时候本应该打开的网页无法打开时使用
打开 Chrome 浏览器,在输入网址的地方输入
然后点击红色条右上角的下拉按键,点击 Clear cache 和 Flush sockets 两项即可清除
打开 Chrome 浏览器,在输入网址的地方输入
chrome://net-internals/#dns
Run code
Cut to clipboard
然后点击红色条右上角的下拉按键,点击 Clear cache 和 Flush sockets 两项即可清除
文章:程序员编程常用网页工具集[游戏] 发表时间:2018-03-03, 10:12:01
#594
作者:广西河池市宜州市
7 阶层叠水平(stacking level)

#,广西河池市宜州市,2018-03-03,10:06:16, 3D 动画硬件加速
用CSS开启硬件加速来提高网站性能
.item {
transform: translateZ(0); /* 或者 will-change: transform; */
}
Run code
Cut to clipboard
用CSS开启硬件加速来提高网站性能
文章:常用html、demo代码 发表时间:2018-03-03, 10:04:51
#595
作者:广西河池市宜州市
富二代明白,再穷些就一定找不到

#,广西河池市宜州市,2018-03-02,11:14:40,
一个渔夫抓到一只美人鱼,然后就把她放了,他的朋友问他
why
他说
how #,广西河池市宜州市,2018-03-02,16:07:05, 你根本不在乎意大利面还够不够,也不在乎40米大刀抽出来再放回去有多难,更不在乎橘子树结果子要多久,你只在乎你自己。 #,广西河池市宜州市,2018-03-03,09:52:29,
一个渔夫抓到一只美人鱼,然后就把她放了,他的朋友问他
why
他说
how
文章:给未来年轻创业者们 发表时间:2018-03-02, 09:59:34
#597
作者:广西河池市宜州市
使用JS判断用户操作系统是否安装某字体
其中fontFamily参数是必须的,为CSS中font-family设置的web可识别的字体名称,例如宋体'simsun',微软雅黑'Microsoft Yahei'等
如果用户的操作系统安装了微软雅黑,则isSupportMicrosoftYahei为true,否则为false。
由于本检测方法本质上是基于web检测,因此,fontFamily参数必须是web可识别的,因此,很多中文字体需要使用其英文名称如“思源黑体”, “兰亭黑体”等
原文:小tips: 使用JS检测用户是否安装某font-family字体
<script>var isSupportFontFamily=function(f){if(typeof f!="string"){return false}var h="Arial";if(f.toLowerCase()==h.toLowerCase()){return true}var e="a";var d=100;var a=100,i=100;var c=document.createElement("canvas");var b=c.getContext("2d");c.width=a;c.height=i;b.textAlign="center";b.fillStyle="black";b.textBaseline="middle";var g=function(j){b.clearRect(0,0,a,i);b.font=d+"px "+j+", "+h;b.fillText(e,a/2,i/2);var k=b.getImageData(0,0,a,i).data;return[].slice.call(k).filter(function(l){return l!=0})};return g(h).join("")!==g(f).join("")};
// isSupportMicrosoftYahei为true或者false
var isSupportMicrosoftYahei = isSupportFontFamily('Microsoft Yahei');
alert(isSupportMicrosoftYahei);
</script>
Run code
Cut to clipboard
其中fontFamily参数是必须的,为CSS中font-family设置的web可识别的字体名称,例如宋体'simsun',微软雅黑'Microsoft Yahei'等
如果用户的操作系统安装了微软雅黑,则isSupportMicrosoftYahei为true,否则为false。
由于本检测方法本质上是基于web检测,因此,fontFamily参数必须是web可识别的,因此,很多中文字体需要使用其英文名称如“思源黑体”, “兰亭黑体”等
原文:小tips: 使用JS检测用户是否安装某font-family字体
文章:常用html、demo代码 发表时间:2018-03-02, 17:36:31
#598
作者:广西河池市宜州市
js bind 传递参数
Jquery之Bind方法参数传递与接收的三种方法
方法一、
方法二、
函数句柄
方法三、
函数闭包
#,广西河池市宜州市,2018-03-02,17:22:06, #,广西河池市宜州市,2018-03-02,17:22:35,
Jquery之Bind方法参数传递与接收的三种方法
方法一、
function GetCode(event)
{
alert(event.data.foo);
}
$(document).ready(function()
{
$("#summary").bind("click", {foo:'abc'} ,GetCode);
});
Run code
Cut to clipboard
方法二、
函数句柄
$("#summary").bind("click", function()
{
GetCode("abc")
});
function GetCode(str)
{
}
Run code
Cut to clipboard
方法三、
函数闭包
function GetCode(str)
{
return function()
{
alert(str)
}}
$("#summary").bind("click", GetCode("abc"));
Run code
Cut to clipboard
<script type="text/javascript">
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
Run code
Cut to clipboard
$(selector).bind(event,data,function)
Run code
Cut to clipboard
$(selector).bind({event:function, event:function, ...})
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-02, 17:20:54
#599
作者:广西河池市宜州市
仿造张鑫旭-鑫空间-鑫生活博客回到相关文章按钮动画效果
<style>
#back{line-height:40px;position:absolute;right:20px;padding: 0 10px 0 13px;background-color: #000;animation:tada 1s 1s;color: #cd0000;font-size:12px;}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
</style>
<a href="http://www.zhangxinxu.com/" id="back" style="">回到相关文章 »</a>
<script>
var BAK = document.getElementById('back');
if (BAK){setInterval(function () {BAK.style.animation='none';BAK.offsetHeight;BAK.style.animation='';}, 3000);}
</script>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-02, 16:54:12
#602
作者:广西河池市宜州市
display: flex; 的兼容问题解决办法
.cardBagMxList {
height: 1.2rem;
display: -webkit-flex;
display: flex;
/* for uc */
display: -webkit-box;
display: -ms-flexbox; /* TWEENER - IE 10 */
}
.cardBagMxList div {
text-align: center;
color: #888888;
font-size: 0.24rem;
padding-top: 0.25rem;
-ms-flex: 1; /* IE 10 */
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-02, 16:02:44
#605
作者:广西河池市宜州市
Div里超出部分,省略号显示
1.一行显示并出现省略号
1)三个属性:
2)网上张大神想出来的margin-top负值的办法:
CSS:
这种方法应该是兼容所有的浏览器。
还有用js或者插件来解决的方法,感觉有点麻烦。
2.两行显示,第二行出现省略号
当文字强制两行显示,并且在第二行才出现省略号。解决办法:
这个是使用的是-webkit-的私有属性,只有在谷歌浏览器上才能正确显示出来,其它浏览器无效果,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。
1.一行显示并出现省略号
1)三个属性:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;
Run code
Cut to clipboard
2)网上张大神想出来的margin-top负值的办法:
<div class="box">
<div class="wz">文字内容</div>
<div class="dot">...</div>
</div>
Run code
Cut to clipboard
CSS:
.box{
width:设定宽度;
height:设定高度;
overflow:hidden;
}
.wz{
float:left;
height:设定同样的高度;
margin-right:这里的大小是给省略号留的空间;
}
.dot{
float:right;
width:刚才留的空间大小;
height:设定同样的高度;
margin-top:与高度一样的值的负数;
}
Run code
Cut to clipboard
这种方法应该是兼容所有的浏览器。
还有用js或者插件来解决的方法,感觉有点麻烦。
2.两行显示,第二行出现省略号
当文字强制两行显示,并且在第二行才出现省略号。解决办法:
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Run code
Cut to clipboard
这个是使用的是-webkit-的私有属性,只有在谷歌浏览器上才能正确显示出来,其它浏览器无效果,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。
文章:常用html、demo代码 发表时间:2018-03-01, 17:55:11
#606
作者:广西河池市宜州市
DIV里面的图片水平与垂直居中的方法
1.水平居中:
2.垂直居中:
html:
css:
这样图片就在table里面水平和垂直居中了
DIV水平和垂直居中的方法:
HTML:
css:
这个能实现div垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;
如果只想垂直居中,只要top与bottom,然后 margin:auto 0;
同理,只想水平居中,只要top与bottom,然后 margin: 0 auto;
但是这种方法不支持ie8以下。
还有一种使用css3 translate的方法,能让div垂直水平居中:
<div class=“box”>
<img />
</div>
Run code
Cut to clipboard
1.水平居中:
1)box设置 text-align:center ; text-align:center可以实现子元素字体,图片的水平居中。
2)img设置 margin:0 auto;display:block ; margin:0 auto是针对块元素的水平居中方法,所以要加上display:block。
Run code
Cut to clipboard
2.垂直居中:
1)图片使用padding,用box的高度减去图片的高度再除以2,就是padding-top的值,这样也可以实现图片在div里居中。也可以在设置margin:0 auto时,把0改为刚才padding-top的值也可以。
2)
Run code
Cut to clipboard
img{
position:relative;
top:50%;
left:50%;
margin-top:负图片height的一半;
margin-left:负图片width的一半;
}
Run code
Cut to clipboard
3)box设置 display: table-cell;vertical-align: middle; display: table-cell 相当于是把标签元素当作一个单元格来处理。但是唯一的缺点就是IE6/7不兼容。
注意:vertical-align: middle;这个垂直属性,只对 inline 或者 inline-block 元素有效
☆垂直和水平居中的另外种方法:table的宽高自己设置
Run code
Cut to clipboard
html:
<table class="img_meng_show">
<tr>
<td>
<img src="">
</td>
</tr>
</table>
Run code
Cut to clipboard
css:
.img_meng_show td{
vertical-align: middle;
text-align: center;
}
Run code
Cut to clipboard
这样图片就在table里面水平和垂直居中了
DIV水平和垂直居中的方法:
HTML:
<div class="box></div>
Run code
Cut to clipboard
css:
.box{
position:absolute(或者是fixed);
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width:100px;
height:200px;
}
Run code
Cut to clipboard
这个能实现div垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;
如果只想垂直居中,只要top与bottom,然后 margin:auto 0;
同理,只想水平居中,只要top与bottom,然后 margin: 0 auto;
但是这种方法不支持ie8以下。
还有一种使用css3 translate的方法,能让div垂直水平居中:
.box{
position: fixed(或者absolute);
top: 50%;
left: 50%;
width: 100px;
/*height: 100px;*/高度可以不定死
background: skyblue;
transform: translate(-50%,-50%);
}
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-01, 17:53:32
#607
作者:广西河池市宜州市
水平垂直居中之table-cell篇
<style>
.container{
display: table;
width: 800px;
height: 500px;
background-color: red;
}
.container.item{
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
</style>
<div class="container">
<div class="item"></div>
</div>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2018-03-01, 17:20:45
#608
作者:广西河池市宜州市
关键做外包活的哥们儿还是老外眼中的专家

#,广西河池市宜州市,2018-03-01,14:29:11, 聪哥掉线了,尽忠的机会来了
【视频】王思聪绝地求生掉线 队友扔烟掩护 化身成人体当肉盾 最后吃鸡_绝地求生吧_百度贴吧.mp4
【视频】王思聪绝地求生掉线 队友扔烟掩护 化身成人体当肉盾 最后吃鸡_绝地求生吧_百度贴吧.mp4
文章:给未来年轻创业者们 发表时间:2018-02-28, 10:21:05
次日小姐垂泪送书生:“君若高中莫负妾身。”
书生发誓后,带着姑娘给的银子走了。
小姐让丫环把书生的名字纪录在册,丫头说:“这已经是第五十个书生了!”
小姐说:“没办法,总有一个会真的考上的”。
——2017最佳小说《风投》
书生让书童把小姐的名字记下,感叹说:这是第一百个了啊。
——2017最佳小说《融资》
书生的伴读童子问书生:公子,自从三年前你离家,如今已经睡了九十余名女子了,我们在各大赴京路上往复,难道就不去赶考了吗?书生答:赶考当大官不也是为了钱和女人吗?既得痴情女子九十有余,还赶着考啥?
——2017最佳小说《泡沫》
丫环帮小姐把名字记下后,从贴身处掏出一个小本,记下了第五十个书童的名字!
一一2017最佳小说《跟投》