常用的代码，实用

时间：2017-02-20 17:30:18 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：swipe move com font ges 解决参数 page soft

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

初始化：
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标签的解决方案：

IE9以下不支持H5新标签，用js脚本来让它支持：
<!--[if lt IE 9]>

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) {
---------------------------------------------------------------------------------------------------

文字截断：

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

.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>

</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>
---------------------------------------------------------------------------------------------------

常用的代码，实用

标签：swipe move com font ges 解决参数 page soft

原文地址：http://www.cnblogs.com/NatChen/p/6420498.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行