HTML+CSS常用,待续......

http://libs.baidu.com/jquery/1.4.2/jquery.min.js

视频

<video width="100%" controls="controls" autoplay="autoplay">
<source src="/public/swt/sp.mp4" type="video/mp4">
</video>

CSS

文字不换行,自动隐藏,省略显示 overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
文字两端对齐 text-align:justify;
p.uppercase {text-transform: uppercase}  大写
p.lowercase {text-transform: lowercase}   小写
p.capitalize {text-transform: capitalize}     首字大写
文字阴影:text-shadow: 0 0.05rem 0.1rem #fff;
图片阴影 img {box-shadow:5px 2px 6px #000}
内阴影:box-shadow:0 0 10px 5px #dfdfdf inset;

透明背景background:rgba(246,233,170,0.7)

span:nth-of-type(2)
span:nth-child(odd) dd{}/*奇*/
span:nth-child(even) dd{ }偶
span:nth-child(3n+0)
span:first-child
span:last-child

.nav{display:-moz-box;display:-webkit-box;display:box;}
.nav a{display:block;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;width:0%;}

html,body{-webkit-text-size-adjust:none;}
html{font-size:12px;font-size:calc(100vw / 32);}

.clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
 

手机号码验证

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(tel)) {
alert("请填写正确的手机号码");
return false;
}

回到顶部
.topbtn{width:1.75rem;position: fixed;bottom:10%;right: 0;z-index: 100; display:none}
<div class="topbtn adv"><img src="/public/img/top.png" /></div>
$(window).scroll(function(){
if($(window).scrollTop()<100){$('.topbtn').hide();}
else{$('.topbtn').show();}

});
$(".topbtn").click(function(){
$('html,body').animate({'scrollTop':0},600);
})

字体图标

<style>
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1550382871406'); /* IE9 */
src: url('iconfont.eot?t=1550382871406#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1550382871406') format('woff'),
url('iconfont.ttf?t=1550382871406') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1550382871406#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 30px; color:#00F;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-guanbi:before {
content: "\e624"; font-size:20px; color:#F00
}
</style>

<span class="iconfont">&#xeca7;</span>
<span class="iconfont">&#xec36;</span>

<span class="iconfont icon-guanbi"></span>

猜你喜欢

转载自blog.csdn.net/leejing623/article/details/87532761
今日推荐