常用前端代码归纳

原创 2015年07月09日 16:30:55

首先针对不同浏览器内核需要的前缀:
-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前端常用代码

  • 2015年07月07日 21:38
  • 5KB
  • 下载

75款常用的jquery特效前端网页代码

  • 2015年12月07日 15:26
  • 6.24MB
  • 下载

【html】网页常用分享代码大全(前端必备)

网页常用分享代码大全(前端必备)      1、新浪微博  新浪微博 2、腾讯微博  腾讯微博 3、开心网  开心网  或者用  开心网 4、豆瓣网  豆瓣 或者用  豆瓣 ...

前端常用Jquery代码

  • 2013年12月17日 16:43
  • 27.25MB
  • 下载

【前端】gulp常用插件(代码整理)

本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO。 匹配符 *、**、!、{}gulp.src('./js/...
  • hj7jay
  • hj7jay
  • 2017年03月02日 09:08
  • 380

网页常用分享代码大全(前端必备)

1、新浪微博  新浪微博  2、腾讯微博  腾讯微博  3、开心网  开心网  或者用  开心网...

前端开发中最常用的JS代码片段

前端开发中最常用的JS代码片段

Sublime Text 3 Mac 前端代码编写常用快捷键

Sublime Text 3 Mac 代码编写常用快捷键

28个JavaScript常用代码集合,前端老司机问你怕不怕!

所以今天分享给大家一些工作中更实用的内容 —— 28个常用的JavaScript代码,希望各位同学可以喜欢。 手机类型判断 var BrowserInfo = {     ...
  • Lunaqi
  • Lunaqi
  • 2017年06月16日 10:05
  • 362

分享一些前端开发中最常用的JS代码片段

(转自 web前端中常用片段) HTML5 DOM 选择器 javascript 代码 1234567// querySelector()...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:常用前端代码归纳
举报原因:
原因补充:

(最多只允许输入30个字)