初始化:
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-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{ 1200px; margin:0 auto;}
.clearfix{*zoom:1;}
.clearfix::after{ clear: both; display: block; height: 0; content: ''; visibility: hidden;}
---------------------------------------------------------------------------------------------------
ie不支持html5标签的解决方案:
IE9以下不支持H5新标签,用js脚本来让它支持:
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
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-1200px) {
---------------------------------------------------------------------------------------------------
文字截断:
不太兼容但是可以截断多行:
.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 onchange=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" onchange="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="提交" onclick="setsubmit(this)" />
</body>
</html>
---------------------------------------------------------------------------------------------------