常用代码整理

初始化：
html { font-family:"微软雅黑";} 
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input,figure { margin: 0; 
padding: 0; }
body { -webkit-overflow-scrolling: touch; text-align:left;  max-height: 100%; }
a, a:hover { text-decoration: none; outline: none;  }
li { list-style: none }
img { border: none; max-width:100%; }
input, select, textarea { border: none; outline: none; background: none }
em,i { font-style: normal }
h1, h2, h3, h4, h5, h6 { font-weight: normal }
.jz{ width:1200px; margin:0 auto;}
.clearfix{*zoom:1;}

.clearfix::after{ clear: both; display: block; height: 0; content: ''; visibility: hidden;}

ie不支持html5标签的解决方案：

<!--[if IE]>
<script src=”js/html5.js”></script>
< ![endif]-->
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

垂直居中
.verticalcenter{
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
---------------------------------------------------------------------------------------------------
wap中的meta：
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

flexible.js
<meta name="flexible" content="maximum-dpr=1" />

动画效果：
transition-property:all; transition-duration:0.5s;

适应屏幕宽度：
@media screen and (max-width:1200px) {
---------------------------------------------------------------------------------------------------

:nth-child() 选择器写法  兼容ie8以上

p:first-of-type                         选择第一个 p 

p:last-of-type                          选择最后一个 p

li:nth-child(2)                         选择第二个li 

p:nth-of-type(odd)                      单排的 p

p:nth-of-type(even)                     双排的 p

p:nth-of-type(2n+0)                     第2n个p
  
---------------------------------------------------------------------------------------------------

文字截断：

不太兼容但是可以截断多行：

.nowrap { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1; 
}
.nowrap2 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; 

}
.nowrap3 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3; 

}
.nowrap4 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:4; 

}

常用的一种可兼容但是只截断一行：

overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-line-clamp:1;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;  -webkit-line-clamp:1;

Jquery方法：

$(function() {
                $(".head-pic .user-name").each(function() {
                    var maxwidth = 4;
                    if ($(this).text().length > maxwidth) {
                        var b = $(this).children().is("a");
                        if (b) {
                            $(this).children().text($(this).children().text().substring(0, maxwidth) + "...");
                        } else {
                            $(this).text($(this).text().substring(0, maxwidth));
                            $(this).text($(this).text() + "..");
                        }
                    }
                });
            });


css方法:
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis; // IE
-o-text-overflow: ellipsis; //Opera
-icab-text-overflow: ellipsis; //iCab
-khtml-text-overflow: ellipsis;  //Konqueror Safari
-moz-text-overflow: ellipsis;  //Firefox,mozilla
-webkit-text-overflow: ellipsis;    //Safari,Swift 

---------------------------------------------------------------------------------------------------          
返回上一页
<a href="javascript:history.go(-1)"></a>
---------------------------------------------------------------------------------------------------              
swiper常用的参数
   
pagination: '.swiper-pagination',
slidesPerView: '3',
paginationClickable: true,
spaceBetween: 8,
initialSlide :2,               
---------------------------------------------------------------------------------------------------
css代码：

.ovfHiden{overflow: hidden;height: 100%;}

jquery:
  $(".header_right").click(function(){
        $('html,body').addClass('ovfHiden'); //使网页不可滚动
        $(".searchbox").show();
    })
    $(".yg-close").click(function(){
        $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
        $(".searchbox").hide();
    }) 
---------------------------------------------------------------------------------------------------

select跳转

第一种：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select加链接</title>
</head>
<body>
<SCRIPT language=javascript>
<!--
// open the related site windows
function mbar(sobj) {
var docurl =sobj.options[sobj.selectedIndex].value;
if (docurl != "") {
   open(docurl,'_blank');
   sobj.selectedIndex=0;
   sobj.blur();
}
}
//-->
</SCRIPT>
<Select οnchange=mbar(this) name="select">
<OPTION selected>=== 合作伙伴 ===</OPTION>
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
<OPTION value="http://www.flash8.net/">闪吧</OPTION>
</Select>
</body>
</html>

第二种：
<select name="pageselect" οnchange="self.location.href=options[selectedIndex].value" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
</select>

第三种：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选择-按钮跳转</title>
<script type="text/javascript">
function setsubmit()
{
if(mylink.value == 0)
window.location='http://www.baidu.com';
if(mylink.value == 1)
window.location='http://www.163.com';
if(mylink.value == 2)
window.location='http://www.sina.com';
}
</script>
</head>
<body>
<select name="mylink" id="mylink">
<OPTION value="0">百度</OPTION>
<OPTION value="1">网易</OPTION>
<OPTION value="2">新浪</OPTION>
</select>
<input type="button" id="btn" value="提交" οnclick="setsubmit(this)" />
</body>
</html>
---------------------------------------------------------------------------------------------------
input输入手机号之间间隔  例如：xxx--xxxx--xxxx

<input id="ph-no" οninput="this.value = this.value.replace(/((^\d{3})(?=\d)|(\d{4})(?=\d))/g, '$1 ')" autocomplete="off" placeholder="支持移动、联通、电信" maxlength="13" type="tel">

---------------------------------------------------------------------------------------------------