常用前端代码归纳

首先针对不同浏览器内核需要的前缀：
-moz-：/* Gecko browsers */
-webkit-：/* Webkit browsers */
无前缀： /* W3C syntax */

---

1，圆角实现

< div id=”round”>
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}

---

2，hover触发突起

< div id=”round”>
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-webkit-transition: .3s cubic-bezier(.3,0,0,1.05);
transition: .3s cubic-bezier(.3,0,0,1.05);
}

#round:hover{
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 3000;
}

---

3，ul li横向排列，去掉圆点，自定义符号

< ul>
    < li>我是一< /li>
    < li>我是二< /li>
    < li>我是三< /li>
< /ul>
ul li{
list-style-type:none;/* 去掉点 */
list-style-image:url(../image/ul_point.png);/* 自定义符号 */
display:inline-block;/* 横向排列 */
}

---

4，段落开头空两格

< span>这是一段话< /span>
span{
text-indent:2em;
}

---

5，阴影效果

{
-moz-box-shadow: 3px 3px 4px #666;
-webkit-box-shadow: 3px 3px 4px #666;
box-shadow: 3px 3px 4px #666;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#666’)”;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#666’);
}

---

6，jquery替换链接

有以下这段html，需要替换第一个a标签内的超链接。
< div class=”nev”>
< a href=”http://3g.shhfgj.com/index.html”>主页< /a>
< a href=”/yiliaofuwu/”>医疗服务< /a>
< a href=”/chankezhongxin/chankezhongxin/”>产科中心< /a>
< a href=”/fenmian/”>分娩模式< /a>
< a href=”/fenmian/shuizhongfenmian/”>水中分娩< /a>
< /div>
在body中添加以下JS即可：
< script>
$(function(){
$($(“.nev a”)[0]).attr(“href”,”这里填你需要替换成的url”);
});
< /script>
备注：(“.nev a”)[n],n=0,1,2,3……就是把a当成一个数组，n是下标，一一对应。