常用前端代码归纳

原创 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是下标,一一对应。

PHP与前端结合知识点

1.     //$('#Form-field-Course-introduction-group').append('0/500');     $('#Form-field-Package-in...
  • chajinglong
  • chajinglong
  • 2016年09月20日 18:31
  • 694

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

前端开发中最常用的JS代码片段
  • wangji5850
  • wangji5850
  • 2016年05月11日 16:38
  • 1356

前端代码规范(静态检查)工具

CSSLint官网:http://csslint.netCSSLint是一个用来帮你找出CSS代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是可以扩展的。JSHi...
  • haozhoupan
  • haozhoupan
  • 2016年06月07日 18:57
  • 3940

前端常用的正则表达式大全

对于正则表达式,我们或许会经常使用,但是又很难记住。这篇博客,我将介绍下简单的正则表达式语法,然后总结前端开发中常用的正则表达式大全。 正前端常用 则表达式语法 1.括号: 小括号:分组 中括号:...
  • qq_34477549
  • qq_34477549
  • 2016年10月14日 22:14
  • 1709

WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...
  • qq_34409701
  • qq_34409701
  • 2016年08月12日 01:05
  • 4418

前端开发常见的英语词汇整理

在前端开发过程中,掌握一些常见英语词汇是必要的,下面整理了一些前端一些常见的英语词汇,供大家参考。 一、页面布局(layout) header 头部/页眉; logo 标志; nav/sub...
  • lijing_1133082
  • lijing_1133082
  • 2016年11月30日 23:39
  • 4781

Jquery前端常用插件整理记录.(个人用)

发现自己的浏览器标签夹各种乱,各种曾经工作时需要的资料全集中一时,有的可能用一次就没在用过,躺在某个角落,此时资料的想法应该是 为了改变自己一下习惯做做整理记录。 前端实用插件 ...
  • dcb_ripple
  • dcb_ripple
  • 2017年03月28日 17:27
  • 1139

浅谈归纳偏置

本人学渣一枚,如有错误,敬请指出。        《机器学习》2.7节谈到了归纳偏置,我不敢说自己对归纳偏置理解的很透彻,但这里简单记录一下我对归纳偏置的理解,以后我也会继续补充。      ...
  • AlexZhang67
  • AlexZhang67
  • 2016年04月18日 00:10
  • 1188

实用的 html 前端组件源代码总结

这次被拉过去临时做前端,遇到了一些不错的常用组件,在这篇博客中整理一下,会持续更新。(提前声明,本文中所有的例子都引入了bootstrap框架)1 图片铺满整个网页背景这次我帮忙做的页面没有复杂的组件...
  • antony9118
  • antony9118
  • 2016年08月16日 09:45
  • 1141

大前端必备网站-超全

01.前端这个圈子 社区/组织W3C TPAC w3ctech WebReBuild HTML5研究小组 阿里技术嘉年华 京/沪JS 前端圈HTML5梦工场 无障碍联盟 国内综合前端观察 阮一峰 W...
  • mrbourne
  • mrbourne
  • 2016年10月26日 12:19
  • 581
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:常用前端代码归纳
举报原因:
原因补充:

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