关闭

常用前端代码归纳

标签: 前端
317人阅读 评论(0) 收藏 举报
分类:

首先针对不同浏览器内核需要的前缀:
-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是下标,一一对应。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:31113次
    • 积分:711
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:17篇
    • 译文:0篇
    • 评论:2条