devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

常用收藏（自己用的）_c1.dakald.xyz

作者：我家自动化 | 2024-07-26 04:13:06

赞

踩

c1.dakald.xyz

PC端

<link rel="icon" href="你的路径/favicon.ico" type="image/x-icon"/>
设置基本样式

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

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

在head部分加

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. <meta name="viewport" content="width=640, user-scalable=no">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="Cache-Control" content="no-cache">
  9. <meta http-equiv="Expires" content="0">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <meta name="format-detection" content="telephone=no">
  13. <meta name="apple-mobile-web-app-title" content="">
  14. <title>页面标题</title>
  15. </head>

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

设置基本样式

  1. @charset "utf-8";
  2. *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
  3. /*max-width:根据UI宽度设置*/
  4. html{ max-width:640px; margin:0 auto;}
  5. /*html{ max-width:750px; margin:0 auto;}*/
  6. body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:28px; line-height:1.6; color:#000;
  7.     -webkit-user-select:none; user-select:none;
  8.     -webkit-touch-callout:none; touch-callout:none;
  9. }
  10. li{ list-style:none;}
  11. i{ font-style:normal;}
  12. a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:#000;}
  13. .cle:after{ content:""; display:block; height:0; clear:both;}
  14. button , input , select , textarea{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; outline:none; border-radius:0; font-size:28px;
  15.     -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none;
  16. }
  17. input[type=checkbox] , input[type=radio]{ margin:0 5px;}
  18. input::-webkit-outer-spin-button , input::-webkit-inner-spin-button{ margin:0; 
  19.     -webkit-appearance:none !important;
  20.             appearance:none !important;
  21. }
  22. input::-webkit-input-placeholder , textarea::-webkit-input-placeholder{ color:#ccc;}
  23. img{ vertical-align:middle;}
  24. [v-cloak] , .hide{ display:none;}


移动端：比例单位切图

与PX布局不同设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />

移动端JS设置HTML字号

注：经测试，被除数不可大于26.66667（大于26.66667时，Chrome显示正常，360却因JS设置的html的字号小于12px，导致所有的rem计算标准是12，并不是html设置的字号标准）

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

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

  1. @charset "utf-8";
  2. *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
  3. html{ min-width:320px; max-width:640px; margin:0 auto;}
  4. body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:1rem; line-height:1.5rem; color:#333;
  5.     -webkit-user-select:none;/* 禁用长触选择文字等功能 */
  6.     -moz-user-select:none;
  7.     -ms-user-select:none;
  8.     -o-user-select:none;
  9.     user-select:none;
  10.     -webkit-touch-callout:none; /* 禁用长触弹出的下载图片菜单 */
  11.     -moz-touch-callout:none;
  12.     -ms-touch-callout:none;
  13.     -o-touch-callout:none;
  14.     touch-callout:none;
  15. }
  16. li{ list-style:none;}
  17. i{ font-style:normal;}
  18. a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:;}
  19. .cle:after{ content:""; display:block; height:0; clear:both;}
  20. button ,
  21. input ,
  22. select ,
  23. textarea{
  24. 	font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; outline:none; border-radius:0; font-size:1rem;
  25.     -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none;
  26. }
  27. input[type=checkbox] ,
  28. input[type=radio]{ margin:0 0.5rem;}
  29. /*去除input[type=number]安卓端上下箭头*/
  30. input::-webkit-outer-spin-button,
  31. input::-webkit-inner-spin-button{
  32.     -webkit-appearance: none !important;
  33.     appearance: none !important;
  34.     margin: 0; 
  35. }
  36. .f_right{ float:right;}
  37. .hide{ display:none;}
  38.  
  39. img{ vertical-align:middle;}

/*去除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;}

px 与 rem 互转工具：
离线版本：GitHub - leon776/grunt-px2rem
在线版本：px转rem
使用前请将px转rem 和 rem转px先点击一遍，因在使用过程中发现基础字体值没有根据设置的改变，而是默认的20

其他字体

  1. --网页字体通常分为5类--
  2. <div style="font-family: sans-serif;">你好 hello world &nbsp;&nbsp; sans-serif(无衬线) </div>
  3. <div style="font-family: serif;">你好 hello world &nbsp;&nbsp; serif(衬线) </div>
  4. <div style="font-family: monospace;">你好 hello world &nbsp;&nbsp; monospace(等宽) </div>
  5. <div style="font-family: fantasy;">你好 hello world &nbsp;&nbsp;&nbsp;&nbsp; fantasy(梦幻) </div> 
  6. <div style="font-family: cuisive;">你好 hello world &nbsp;&nbsp; cuisive(草体) </div>
  7. <br/>
  8. --无衬线类--
  9. <div style="font-family: Helvetica, sans-serif;">你好 hello world &nbsp;&nbsp; Helvetica </div>
  10. <div style="font-family: Arial, sans-serif;">你好 hello world &nbsp;&nbsp; Arial </div>
  11. <div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world &nbsp;&nbsp; Lucida Grande </div>
  12. <div style="font-family: Verdana,sans-serif;">你好 hello world &nbsp;&nbsp; Verdana </div> 
  13. <div style="font-family: Tahoma, sans-serif;">你好 hello world &nbsp;&nbsp; Tahoma </div>
  14. <div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world &nbsp;&nbsp; Trebuchet MS </div>
  15. <br/>
  16. --衬线类--
  17. <div style="font-family: Georgia, serif;">你好 hello world &nbsp;&nbsp; Georgia </div>
  18. <div style="font-family: Times, serif;">你好 hello world &nbsp;&nbsp; Times </div>
  19. <br/>
  20. --中文字体--
  21. <div style="font-family: 宋体">你好 hello world &nbsp;&nbsp; 宋体 </div>
  22. <div style="font-family: 微软雅黑">你好 hello world &nbsp;&nbsp; 微软雅黑 </div>
  23. <div style="font-family: 华文细黑">你好 hello world &nbsp;&nbsp; 华文细黑 </div>
  24. <div style="font-family: 黑体">你好 hello world &nbsp;&nbsp; 黑体 </div>

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

  1. .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;}
  2. .pop_box:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle;}
  3. .pop_box > div{ display:inline-block; width:24rem; padding:1rem; border-radius:.5rem; background-color:#fff; vertical-align:middle; position:relative; overflow:hidden;
  4. 				-webkit-animation:showMax .5s ease-in-out both;
  5. 						animation:showMax .5s ease-in-out both;
  6. }
  7. @-webkit-keyframes showMax{
  8. 	0%{ -webkit-transform:scale(.2); opacity:0;}
  9. 	50%{ -webkit-transform:scale(1.1); opacity:1;}
  10. 	100%{ -webkit-transform:scale(1); opacity:1;}
  11. }
  12. @keyframes showMax{
  13. 	0%{ transform:scale(.2); opacity:0;}
  14. 	50%{ transform:scale(1.1); opacity:1;}
  15. 	100%{ transform:scale(1); opacity:1;}
  16. }
  17. .pop_box_bt{ height:2rem; line-height:2rem; margin-bottom:.5rem; font-size:1.2rem; font-weight:bold; color:#d00;}
  18. .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;}
  19. .pop_box_bt:before{ margin-right:.5rem;}
  20. .pop_box_bt:after{ margin-left:.5rem;}
  21. .pop_box_text{ text-align:left;}
  22. .pop_box img{ max-width:100%;}
  23. .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;}
  24. .close_pop:before{ display:inline-block; content:"×"; vertical-align:middle;}

公共弹层HTML基础代码

  1. <div class="pop_box hide">
  2. 	<div>
  3.     	<div class="pop_box_bt">标题</div>
  4.         <div class="pop_box_text">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</div>
  5.         <div class="close_pop"></div>
  6.     </div>
  7. </div>

公共弹层JS关闭设置

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


音乐播放、暂停（CSS、HTML、JS）
音乐播放、暂停CSS（普通音符播放暂停显示）

  1. #chatAudio{ display:none; width:0; height:0;}
  2. #stopmusic{ display:block; width:2rem; height:2rem; position:fixed; right:.5rem; top:.5rem; overflow:hidden;}
  3. #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;
  4. 	-webkit-animation:stopmusic 1s infinite linear both;
  5. 	animation:stopmusic 1s infinite linear both;
  6. }
  7. @-webkit-keyframes stopmusic{
  8. 	0%{ -webkit-transform:rotate(0);}
  9. 	100%{ -webkit-transform:rotate(360deg);}
  10. }
  11. @keyframes stopmusic{
  12. 	0%{ transform:rotate(0);}
  13. 	100%{ transform:rotate(360deg);}
  14. }
  15. .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;}

音乐播放、暂停CSS（点唱机播放暂停显示）
因显示问题，显示及复制后，需查找
7y7+76+Pn6+Pfe3t7Pz9DBwsP
在此之后加4个/

  1. #chatAudio{ display:none; width:0; height:0;}
  2. #stopmusic{ display:block; width:175px; height:157px; position:absolute; right:0; top:600px; overflow:hidden; cursor:pointer;
  3. 	-webkit-transform-origin: right top;
  4. 			transform-origin: right top;
  5. 	-webkit-transform: scale(.5);
  6. 			transform: scale(.5);
  7. }
  8. #stopmusic:before{ content:""; width:188px; height:100%; background:url(data:image/png;base64,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) no-repeat center center; background-size:100% 100%; position:absolute; left:0; top:0;
  9. 	-webkit-transform-origin: 75px 75px;
  10. 			transform-origin: 75px 75px;}
  11. #stopmusic:not(.stopmusic):before{
  12. 	-webkit-animation:stopmusic 6s infinite linear both;
  13. 			animation:stopmusic 6s infinite linear both;
  14. }
  15. @-webkit-keyframes stopmusic{
  16. 	0%{ -webkit-transform:rotate(0);}
  17. 	100%{ -webkit-transform:rotate(360deg);}
  18. }
  19. @keyframes stopmusic{
  20. 	0%{ transform:rotate(0);}
  21. 	100%{ transform:rotate(360deg);}
  22. }
  23. #stopmusic:after{ content:""; width:188px; height:100%; background:url(data:image/png;base64,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) no-repeat center center; background-size:100% 100%; position:absolute; left:0; top:0;
  24. 	-webkit-transform-origin: 164px 18px;
  25. 			transform-origin: 164px 18px;
  26. 	-webkit-transition: all linear .2s;
  27. 			transition: all linear .2s;
  28. }
  29. #stopmusic.stopmusic:after{
  30. 	-webkit-transform: rotate(-18deg);
  31. 			transform: rotate(-18deg);
  32. }

音乐播放、暂停HTML

  1. <audio id="chatAudio" loop autoplay src="images/music.mp3"></audio>
  2. <span id="stopmusic" class=""></span>

音乐播放、暂停JS

  1. //解决iphone不能自动播放
  2. document.addEventListener("WeixinJSBridgeReady", function () {  
  3.     WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
  4.         document.getElementById('chatAudio').play();  
  5.     });  
  6. }, false); 
  7. var $myVideo = $("#chatAudio")[0];
  8. $('#stopmusic').on('click',function(){
  9.     $(this).toggleClass('stopmusic');
  10.     if($(this).hasClass('stopmusic')){
  11.         $myVideo.pause();
  12.     }else{
  13.         $myVideo.play();
  14.     }
  15. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/883521
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号