日常积累汇总

作者: hiddensmile | 来源:发表于2017-04-16 18:06 被阅读0次

日常积累汇总
分享一些办公技巧
日常积累
日常积累
日常积累
日常积累
日常积累
日常积累
日常积累
日常积累

背景固定大小：

background:transparent url(../images/bot_search_hong.png) no-repeat scroll 50% 10px/18px 18px;

在线音乐：
http://mp3.13400.com:99/20131228/181.mp3

手机站开头自适应得写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport" id="viewport" />

1、<meta name="format-detection" content="telephone=no" />
说明：
1）使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch点击数字为存入联系人，iPhone为拨打电话），忽略将页面中的数字识别为电话号码。
2）若需要启用电话功能将 telephone=yes 即可，若在页面上面有Google Maps, iTune参考：http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html
3）-webkit-appearance: none; -moz-appearance: none; appearance:none;

2、 http://zxp.artron.net//resource/js/sha1.js js的sha1加密http://tool.chinaz.com/js.aspx

3、https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

4、超出的文字用......的写法：
http://m.blog.itpub.net/29870867/viewspace-1295450/

width:200px; whitespace:nowrap; overflow:hidden; text-overflow:ellipsis;

确定一下设置的高度能放下几行文字,假如有3行：

text-overflow: ellipsis;  
display: -webkit-box;   
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;   
overflow: hidden;

4、01圆弧形css写法：

.profit_wrap{
    background: #F9F0DF;
    min-height: 100vh; 
    position: relative;
    .header_wrap{
        height: 280px;
        overflow: hidden;        
        position: relative;
        text-align: center;
        &::after{
            width: 160%;
            height: 280px;
            position: absolute;
            left: -30%;
            top:0;
            z-index: 1;
            content: '';
            border-radius: 0 0 50% 50%;
            background:linear-gradient(142deg,rgba(255,217,140,1) 0%,rgba(255,207,109,1) 100%);
            border-bottom:2.5px solid #F4C06D;
            box-sizing: border-box;
        }       
    }

5、CSS如何控制数字之间的间距距：

添加letter-spacing:2px;  多少像素可以自行调整。

6、图片垂直居中：

<p>
   <a href="javascript:;">
     ![](images/rbz_view_list16.png)
   </a>  
</p>  
<style>
p{ width:90%; height:300px; line-height:300px; border:1px solid #ccc; display:table; text-align:center;}
p a{ height:100%; vertical-align:middle; display:table-cell;}
p img{ max-height:100%; max-width:100%; vertical-align:middle; }

7、图片垂直居中：
http://m.blog.csdn.net/article/details?id=7615098

父级：{width:170px; height:170px; line-height:170px;text-align:center; vertical-align:middle; }
子级：{ max-height:100%;max-width:100%; vertical-align:middle; }

8、图片和文字在一起，

P{ height:18px;  line-height:23px;  text-align:center;}
img{ height: 18px;  margin-right: 6px;  vertical-align: top;}

不确定宽高 要求垂直居中
父级position: relative;   
子级position: absolute;    top: 50%;   transform: translateY(-50%);

9、手机端，需要加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" id="viewport" />

10、input属性为只读模式：readonly="readonly"

 <input type="text" name="country" value="China" readonly="readonly" />

11、PC端居中

@media(max-width:1200px){
      body{
         width:1200px;
      }
}

12、音乐播放及歌词
https://github.com/DIYgod/APlayer
http://aplayer.js.org/docs/

13、ios中input有默认样式iOS下的safari中有默认的按钮样式：

input[type=“button”], input[type=“submit”], input[type=“reset”]
     {-webkit-appearance: push-button; white-space: pre;}s
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance : none ;｝

12、全兼容，背景透明，文字不透明

<div class="demo"><p>背景透明，文字不透明：</p></div>
<style>
 .demo{ padding: 25px;   background-color: rgba(0,0,0,0.1);    /* IE9标准浏览器 IE6和部分IE7内核浏览器(qq浏览器)会读懂 */ 
 .demo p{ color: #FFFFFF;} 

@media \0screen\,screen\9 {/*只支持IE6、7、8 */ 
  .demo{background-color:#000000;   
  filter:Alpha(opacity=10);   
  position:static; /* IE6、7、8只能设置position:static(默认属性)，否则会导致子元素继承Alpha值 */
  *zoom:1;/*激活IE6、7的haslayout属性，让它读懂Alpha */  }
  .demo p{ position: relative;/*设置子元素为相对定位，可让子元素不继承Alpha值 */} 
}

13、弹出层，背景为黑色透明，且禁止滚动；

//背景为全屏黑色透明
#rbz_bg{ background-color:#000; width:100%; height:100%; position:fixed; opacity:0.6; display:none; z-index:99; top:0;}
//弹出层
$(".r_but_clickable").click(function(){
  $(".send_confirm").show();
  $("#rbz_bg").show();
  $("body,html").css({"height":"100%","overflow":"hidden"});
})

//点击背景以外得地方，复原
$("#bg").click(function(){
  $(".send_confirm").hide();
  $("#rbz_bg").hide();
  $("body,html").css({"height":"auto","overflow":"auto"})
})

另一种方法：http://blog.csdn.net/hunannanhu/article/details/50592020

//禁止滚动
window.ontouchmove=function(e){
  e.preventDefault && e.preventDefault();
  e.returnValue=false;
  e.stopPropagation && e.stopPropagation();
  return false;
}
document.body.style.overflowX=document.body.style.overflowY="hidden";
    
//继续滚动
 window.ontouchmove=function(e){
  e.preventDefault && e.preventDefault();
  e.returnValue=true;
  e.stopPropagation && e.stopPropagation();
  return true;
} 
document.body.style.overflowX=document.body.style.overflowY="auto";

14、调整手机兼容性

/* iphone4*/
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
  .record_state{ margin-top:-6%;}
}

/* iphone5*/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
 .record_state{ margin-top:-6%;}
}

/* iphone6竖屏*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
  .record_state{ margin-top:-3%;}
}   

/* iphone6 plus竖屏*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
  .record_state{ margin-top:-2%;}
}
/* iPhone X 和 iPhone XS */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  
}

/* iPhone XR */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  
}

/* iPhone XS Max */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  
}

@media screen and (device-width: 360px) and (device-height: 640px){
  .record_state{ margin-top:-2%;}
}

@media screen and (device-width: 411px) and (device-height: 731px){
  .record_state{ margin-top:-2%;}
}

@media screen and (device-width: 435px) and (device-height: 773px){
  .record_state{ margin-top:-2%;} 
}

针对iphoneX
js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){

        $(".phonex-pb").css("padding-bottom","34px");
}

15、返回顶部：

$(window).scroll(function () {
  if($(window).scrollTop() >= 80)   //距离顶部多少高度显示按钮   
     {    
       $('#goTopBtn').fadeIn(200);    
     }else{    
       $('#goTopBtn').fadeOut(200);    
   }  
});
$('#goTopBtn').click(function(){   
    $('body,html').animate({scrollTop:0},500)  
});

16、javascript大于40个后面用“...+查看详情”

/*判断超过40个 出现.....*/
var txtLength=$(".pro_detail p").html().length;
var relTxt=$(".pro_detail p").html().substring(0,40)
if(txtLength>40){
  $(".pro_detail p").html(relTxt+"......"+'  <a href="javascript:;" class="check_detail">查看详情</a>')
  $(".check_detail").css("display","inline_block")
 }

16、javascript请问如何获取下面li里面的img

<ul id="parent"> 
  <li>![](img/1.gif)</li> 
  <li>![](img/2.gif)</li> 
  <li>![](img/3.gif)</li> 
  <li>![](img/4.gif)</li>
</ul>

var listImg=document.getElementById("parent").getElementsByTagName("img");//获取ul中的img返回一个对象数组
for(var i=0;i<listImg.length;i++){
      listImg[i].onclick=function() {
            alert("您点击的是"+this.getAttributeNode("src").nodeValue);}
      }