常用收藏(自己用的)

PC端

设置基本样式

@charset "utf-8";
*{ margin:0px; padding:0px;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; color:#333; font-size:14px; line-height:22px;}
h1 , h2 , h3 , h4{ font-weight:normal; display:inline;}
li{ list-style:none;}
i{ font-style:normal;}
a:link , a:visited ,a:active{ text-decoration:none; color:#333;}
a:hover{ color:;}
img{ vertical-align:middle;}
a img{ border:none;}
.cle{ *zoom:1;}
.cle:after{ content:""; display:block; height:0; clear:both;}
.f_right{ float:right;}

移动端:与PC端切图一致,不受比例设置影响

在head部分加

宽640px的UI效果图
<meta name="viewport" content="width=640, user-scalable=no">
或 宽750px的UI效果图
<meta name="viewport" content="width=750, user-scalable=no">

设置基本样式

@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
/*max-width:根据UI宽度设置*/
html{ max-width:640px; margin:0 auto;}
/*html{ max-width:750px; margin:0 auto;}*/
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:24px; line-height:1.5em; color:#333;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:#333;}
.cle:after{ content:""; display:block; height:0; clear:both;}
button ,
input ,
select ,
textarea{
	font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; outline:none; border-radius:0; font-size:24px;
    -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none;
}
input[type=checkbox] ,
input[type=radio]{ margin:0 5px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0; 
}
.f_right{ float:right;}
.hide{ display:none;}

img{ vertical-align:middle;}

移动端:比例单位切图

移动端JS设置HTML字号

function initHtmlFontSize(){
	var _width = document.body.clientWidth;
	_width = _width>640?640:_width;
	var _fs = _width/26.66667;//640尺寸的设计图,1rem = 24px
	//var _fs = _width/16;//640尺寸的设计图,1rem = 40px
	document.getElementsByTagName("html")[0].style.fontSize = _fs+"px";
}
initHtmlFontSize();

移动端设置基本样式,以下设置的1rem=24px

@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ min-width:320px; max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:1rem; line-height:1.5rem; color:#333;
    -webkit-user-select:none;/* 禁用长触选择文字等功能 */
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    -webkit-touch-callout:none; /* 禁用长触弹出的下载图片菜单 */
    -moz-touch-callout:none;
    -ms-touch-callout:none;
    -o-touch-callout:none;
    touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:;}
.cle:after{ content:""; display:block; height:0; clear:both;}
button ,
input ,
select ,
textarea{
	font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; outline:none; border-radius:0; font-size:1rem;
    -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none;
}
input[type=checkbox] ,
input[type=radio]{ margin:0 0.5rem;}
/*去除input[type=number]安卓端上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0; 
}
.f_right{ float:right;}
.hide{ display:none;}
/*去除input[type=number]上下箭头*/
/*在chrome下:*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}
/*Firefox下:*/
input[type="number"]{-moz-appearance:textfield;}


公共弹层设置
公共弹层基本样式

.pop_box{ width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,.7); position:fixed; left:0; top:0; z-index:1;}
.pop_box:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle;}
.pop_box > div{ display:inline-block; width:24rem; padding:1rem; border-radius:.5rem; background-color:#fff; vertical-align:middle; position:relative; overflow:hidden;
				-webkit-animation:showMax .5s ease-in-out both;
						animation:showMax .5s ease-in-out both;
}
@-webkit-keyframes showMax{
	0%{ -webkit-transform:scale(.2); opacity:0;}
	50%{ -webkit-transform:scale(1.1); opacity:1;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes showMax{
	0%{ transform:scale(.2); opacity:0;}
	50%{ transform:scale(1.1); opacity:1;}
	100%{ transform:scale(1); opacity:1;}
}
.pop_box_bt{ height:2rem; line-height:2rem; margin-bottom:.5rem; font-size:1.2rem; font-weight:bold; color:#d00;}
.pop_box_bt:before , .pop_box_bt:after{ content:""; display:inline-block; width:5.5rem; height:0; border-bottom:#d00 dashed 2px; vertical-align:middle; position:relative; margin-top:-2px;}
.pop_box_bt:before{ margin-right:.5rem;}
.pop_box_bt:after{ margin-left:.5rem;}
.pop_box_text{ text-align:left;}
.pop_box img{ max-width:100%;}
.close_pop{ display:block; width:2rem; height:2rem; line-height:1.6rem; text-align:center; font-size:1.8rem; color:#d00;/* border-radius:50%; background-color:#ddd;*/ cursor:pointer; position:absolute; right:0; top:0;}
.close_pop:before{ display:inline-block; content:"×"; vertical-align:middle;}
公共弹层HTML基础代码

<div class="pop_box hide">
	<div>
    	<div class="pop_box_bt">标题</div>
        <div class="pop_box_text">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</div>
        <div class="close_pop"></div>
    </div>
</div>
公共弹层JS关闭设置

$('body').on('click','.close_pop',function(){
	$(this).parents('.pop_box').hide();
});

音乐播放、暂停(CSS、HTML、JS)
音乐播放、暂停CSS
#chatAudio{ display:none; width:0; height:0;}
#stopmusic{ display:block; width:2rem; height:2rem; position:fixed; right:.5rem; top:.5rem; overflow:hidden;}
#stopmusic:before{ content:""; display:block; width:100%; height:100%; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplODZjZmIzYy1kZmNkLTQ4NTUtOTg4Yi0zNmI5OTNhNzllZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0Y5RjUxNUU4NzRBMTFFNEE3OTJCRDg1RUEzMENCNDkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0Y5RjUxNUQ4NzRBMTFFNEE3OTJCRDg1RUEzMENCNDkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MmJkZjhjOGItYmMwMy00NTVlLTg3N2EtYzYxNWVhMjU5ZGQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmU4NmNmYjNjLWRmY2QtNDg1NS05ODhiLTM2Yjk5M2E3OWVlOCIvPiA8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) no-repeat center center; background-size:100% 100%; position:absolute; left:0; top:0;
	-webkit-animation:stopmusic 1s infinite linear both;
	animation:stopmusic 1s infinite linear both;
}
@-webkit-keyframes stopmusic{
	0%{ -webkit-transform:rotate(0);}
	100%{ -webkit-transform:rotate(360deg);}
}
@keyframes stopmusic{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg);}
}
.stopmusic:after{ content:""; display:block; width:1px; height:100%; background-color:#DDDDDD; -webkit-transform-origin:center center; transform-origin:center center; -webkit-transform:rotate(45deg) translateX(-50%); transform:rotate(45deg) translateX(-50%); position:absolute; left:50%; top:0;}
音乐播放、暂停HTML

<audio id="chatAudio" loop autoplay src="images/music.mp3"></audio>
<span id="stopmusic" class=""></span>
音乐播放、暂停JS

//解决iphone不能自动播放
document.addEventListener("WeixinJSBridgeReady", function () {  
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
        document.getElementById('chatAudio').play();  
    });  
}, false); 
var $myVideo = $("#chatAudio")[0];
$('#stopmusic').on('click',function(){
    $(this).toggleClass('stopmusic');
    if($(this).hasClass('stopmusic')){
        $myVideo.pause();
    }else{
        $myVideo.play();
    }
});

发布了97 篇原创文章 · 获赞 50 · 访问量 39万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览