首页 > 代码库 > 常用的代码，实用

常用的代码，实用

2024-09-05 03:42:35   220人阅读

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

初始化：
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]>

<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-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>
<!--
// 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=http://www.mamicode.com/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 =http://www.mamicode.com/= 0)
window.location=‘http://www.baidu.com‘;
if(mylink.value =http://www.mamicode.com/= 1)
window.location=‘http://www.163.com‘;
if(mylink.value =http://www.mamicode.com/= 2)
window.location=‘http://www.sina.com‘;
}
</script>
</head>
<body>
<select name="mylink" id="mylink">
<OPTION value="http://www.mamicode.com/0">百度</OPTION>
<OPTION value="http://www.mamicode.com/1">网易</OPTION>
<OPTION value="http://www.mamicode.com/2">新浪</OPTION>
</select>
<input type="button" id="btn" value="http://www.mamicode.com/提交" onclick="setsubmit(this)" />
</body>
</html>
---------------------------------------------------------------------------------------------------

常用的代码，实用


联系
我们