轻轻一叶风

从code farmer到code designer的脚步

常用前端代码归纳

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

阅读更多
文章标签: 前端
个人分类: web开发
想对作者说点什么? 我来说一句

web前端常用代码

2015年07月07日 5KB 下载

Web前端必备35种前端高档代码

2017年10月31日 12KB 下载

没有更多推荐了,返回首页

不良信息举报

常用前端代码归纳

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭