- 博客(83)
- 收藏
- 关注
RSS订阅转载 响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。em 的计算是基于父级元素的，在实际使用中给我们的
2015-11-26 17:44:59
876
转载 position()与offset()区别
使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。可以看看下边的图：从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器
2015-11-22 14:56:10
574
转载 关于正则表达式的总结
为了解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思？”这个问题，也为了能够便于大家对正则表达式有一个更为综合和深刻的认识，我将一些关键点和容易犯糊涂的地方再系统总结一下。 总结1：附件参数g的用法 表达式加上参数g之后，表明可以进行全局匹配，注意这里“可以”的含义。我们详细叙述： 1）对于表达式对象的exec方法，不加入g，则只返回第一个匹配，无论执行多
2015-11-16 00:10:30
342
原创 分享一个css浏览器兼容重构代码
@charset "utf-8";body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,p,pre,code,form,fieldset,legend,input,button,textarea,blockquote { margin: 0; padding: 0}table { border-collapse: collapse; border-sp
2015-11-12 13:25:43
438
原创 获取文本节点的值
获取文本节点的方法有很多，下面就总结一下：1>x.firstChild.data:获取元素第一个子节点的数据2>x.childNodes[0].nodeValue:这种方法兼容行更好一些3>x.innerHTML：这种方法使用于元素里面只有文本节点的情况4>x.childNodes[0].textcontent:这种方法不支持ie8之前的版本个人还是推荐第二种方法，这种方法的兼
2015-11-11 11:01:11
1270
转载 深入详解javascript之delete操作符
最近重新温习JS，对delete操作符一直处于一知半解的状态，偶然发现一篇文章，对此作了非常细致深入的解释，看完有茅塞顿开的感觉，不敢独享，大致翻译如下。原文地址：http://perfectionkills.com/understanding-delete/P.S. 作者是PrototypeJS的开发组成员之一 ========分割线========
2015-11-08 10:21:26
395
转载 js逗号运算符
JS逗号运算符的用法详解(转)注意：一、由于目前正在功读JavaScript技术，所以这里拿JavaScript为例。你可以自己在PHP中试试。二、JavaScript语法比较复杂，因此拿JavaScript做举例。最近重新阅读JavaScript权威指南这本书，应该说很认真的阅读，于是便想把所学的东西多记录下来。后面本人将逐步写上更多关于本书的文章。
2015-11-07 20:01:04
434
原创 animate.css强大的动效库
这是一个非常强大炫酷的css3动画库，使用时只需要引入相应的class 就行了。http://daneden.github.io/animate.css/演示地址
2015-11-06 19:08:58
824
原创 window.name==window['name']
这是js调用属性的一种方式，最常见的是window.name这种链式操作，导致把后面的用法给忘了，后面这种方式还是很重要的，因为当使用jquery的时候，直接调用一个变量是没有效果的，这时候可以试试用['name']这种方法
2015-11-06 12:59:08
685
原创 发现几个超棒的滚动动画延迟加载插件，超酷
http://www.scrollrevealjs.org/、http://mynameismatthieu.com/WOW/
2015-11-05 23:36:23
1123
转载 可替代CSS3 transition和transform的jQuery插件
插件介绍jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡动画效果，这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的jQuery插件。点击打开链接
2015-11-05 20:40:37
473
转载 漫谈CSS transform动画技术
css3博大精深，真的要潜心钻研，分享一篇博文应该对你的css3学习有很大帮助http://www.webhek.com/css-animation-using-css-transforms/
2015-11-05 20:30:31
714
原创 ie css3兼容方法之 ie 滤镜
https://msdn.microsoft.com/en-us/library/ms533087(v=vs.85).aspx这是官网地址css3在ie6,7,8的兼容性很差，这时候可以用ie自带的滤镜来实现效果，比如阴影，透明度，1.Alpha，调整对象内容的不透明度。语法：filter:progid:DXImageTransform.Microsoft.Alpha(
2015-11-05 20:08:22
1158
转载 让IE6/IE7/IE8浏览器支持CSS3属性
IE6/7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等这些属性呢？这里介绍一个通过htc脚本实现这些属性的方法使用是很容易的，看下面的示例代码：.box { -moz-border-radius: 15px; /* Fire
2015-11-05 18:11:59
556
转载 IE中的CSS3不完全兼容方案
到Internet Explorer 8为止，IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影，就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后，就想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer，其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。Opacity透明度
2015-11-05 18:00:14
466
原创 用css3动画为焦点图加延迟动画
这是一个fullpage插件改写成的页面，一直对里面的动画效果很好奇，今天搞明白到底是怎么实现的了。fullpage插件会在当前显示的标签里加入一个.active类，当标签从可视区域里消失时会动态去掉这个.active类接着就没jquery的事了，用css3的过渡效果来实现所需的效果。这种方法兼容性受到css3兼容性的影响，所以在ie9及以下版本显示效果很差，如果网站是渐进增强设计的话
2015-11-05 17:06:01
500
转载 通过Jquery判断页面元素是否在浏览器的可视区域内
通过Jquery判断页面元素是否在浏览器的可视区域内前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.(伸手党可直接看文章屁股 :cool:) 假设此元素为 #item,先说几个关键的属性:
2015-11-05 13:49:29
542
转载 如何判断一个div是否在页面可视区域内
js <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> <script type="text/javascript"> $(document).ready(function () { $(window)
2015-11-05 13:17:12
6914
转载 CSS 多类选择器一个class值可以包含一个词列表
类选择符链类选择符名称可以使用多个.相连，形成类选择符链.www.dreamdu.com{ color:blue;}只有当一个元素使用了www、dreamdu、com三种选择符才能显示.www.dreamdu.com类选择符定义的样式p class="www dreamdu com">梦之都CSS 蓝色字体p>p class="www dreamdu">梦之都CS
2015-11-04 15:51:08
1850
原创 分享一个超棒的动画延迟载入轮播图插件
演示效果：点击打开链接这个插件的动画效果设置很简单，和jquery的animate动画设置很像，可以很简单的使轮播图有动画延迟效果。
2015-11-03 22:39:25
589
转载 <li><img>标签之间空隙解决办法
第一，给图片img标签display:block。 Example Source Codeimg{display:block}第二，定义容器里的字体大小为0。 Example Source Codediv { width:110px; border:1px solid #000000; font-size:0 }第三，定义图片img标签ver
2015-10-29 09:26:49
4067
原创 $(window).resize(function(){ window.location.reload() });
$(window).resize(function(){ window.location.reload() });在写响应式网页的时候可能某些浏览器性能不好或是功能不完善，导致网页大小不能按照预定的样式展示，这时候可以强制页面刷新来达到响应式的目的。
2015-10-28 20:48:31
1043
原创 clearInterval()与setInterval()的使用心得
阅读插件源码的时候发现一个js写法，（省略了一些代码，结构是这样子的）function changeImg(_index){ $bannerList.eq(_index).fadeIn(250); $bannerList.eq(_index).siblings().fadeOut(200); $focusBubble.find("li").removeClass("current");
2015-10-28 20:44:33
761
转载 margin collapsing现象
读过李松峰老师翻译的新书中《CSS设计师指南（第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊，这地方实在是有些没写到位，也有错误（如“叠加的只是垂直外边距，水平外边距不叠加”）margin collapsing现象BFC（block formatting context）中相邻的两个block-level
2015-10-26 13:26:01
339
转载 BFC原理
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？ 在解释 BFC 是什么之前，
2015-10-26 12:21:34
373
转载 overflow清除浮动
在使用Div+Css布局的时候我们所面临的共同问题之一是，包装容器不扩到子元素的浮动元素的高度。你也可以使用overflow属性来解决这个问题 ？这不是一个新的CSS技巧。今天，我想重新拾起这几个技巧的话题。演示地址：http://webdesignerwall.com/demo/clear-float/ 演示1： 下面的演示中显示的浮动子元素在父容器高度不自动适
2015-10-26 11:07:50
668
转载 <li><img>图片间有空隙的解决方法
在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:直接加样式img{vertical-align:bottom; display:block} 当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-ali
2015-10-21 11:50:22
803
原创 css hack大全
CSS hack分类CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\
2015-10-21 00:30:05
378
转载 clearfix清除浮动进化史
clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的。.clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码，相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤，就是每次清除浮动的时候都需要增加一个空标签来使用。 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标
2015-10-21 00:00:51
318
原创 git学习入门
协同开发是做项目必不可少的，git应运而生，使用起来非常方便，虽然刚开始觉得很高大上，很难理解，但耐着性子学了一下午还是清楚了很多。说白了，就是一个工具，让多个人提交代码，而且避免冲突。介绍一个教程，看完之后，自己模仿者写一遍，也就入门了廖雪峰 Git教程还是那句话：再牛逼的梦想，也抵挡不住你傻逼似的坚持！加油
2015-10-20 00:23:00
272
转载 function, new function, new Function之间的区别
函数是JavaScript中很重要的一个语言元素，并且提供了一个function关键字和内置对象Function，下面是其可能的用法和它们之间的关系。 使用方法一： 复制代码代码如下: var foo01 = function() //or fun01 = function() { var temp = 100; this
2015-10-19 18:42:46
384
转载 jQuery插件开发
要说jQuery 最成功的地方，我认为是它的可扩展性吸引了众多开发者为其开发插件，从而建立起了一个生态系统。这好比大公司们争相做平台一样，得平台者得天下。苹果，微软，谷歌等巨头，都有各自的平台及生态圈。学会使用jQuery并不难，因为它简单易学，并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶，编写一个属于自己的插件是个不错的选择。本教程可能不是最
2015-10-19 13:54:06
457
转载 Javascript 严格模式详解
作者： 阮一峰日期： 2013年1月14日一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个： - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
2015-10-19 13:47:34
274
原创 让ie6,7,8支持HTML５
今天的主题是：HTML5 Shiv下面是引用Google的html5.js文件，好处就不说了：将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）当然，你也可以把代码拿出来自己看着办：(function(){if(!/*@cc_on!@*/0)return;var e ="abbr
2015-10-18 10:43:40
395
转载 插件推荐Echo.js 简单易用的图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的 src 属性，从服务端加载所需的图片，这也是一个异步的过程。您可能感兴趣的相关文章那些让人惊叹的的国外创意404错误页面设计让人爱不释手的精美
2015-10-15 00:39:45
340
转载 图片延迟加载
有时我们看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。推荐：使用jquery图片延迟加载插件jquery.lazyload实现图片延迟实现原理：把所有需要延时加载的图片改成如下的格式：
2015-10-15 00:36:17
357
转载 7款本地搭建PHP环境工具推荐
通常在开发PHP程序时，需要用到服务器环境来调试自己的页面。有时候仅仅是为了学习PHP程序开发，如果是出于这样的理由去购买一个空间或者服务器是完全没必要的。本文推荐7款目前主流的PHP集成环境工具，可以快速的在电脑上搭建服务器环境，无需再逐个的安装与配置服务器程序。1. XAMPPXAMPP是一款比较强大的本地测试平台，它集成了必须的三个功能，还带有 FileZilla，软
2015-10-14 21:39:20
825
原创 强大的jquery UI
把Jquery ui的API看了一下，真的很强大，尤其是自定义扩展插件功能，使得你可以设计出功能更加强大的插件，而且非常容易。还有jquery ui拖拽功能也很方便，使用方法非常简单。感兴趣的同学赶快来试试吧。官网地址：jquery ui下载下来的文件夹，分为三类：第一类是jquery-ui.theme.min这部分是主题样式第二类是jquery-ui.structure.
2015-10-14 15:26:27
431
原创 边框border的特殊应用
边框是经常用到的属性，但是有时候却很让人抓狂，比如这种情况边框带有阴影，hover之后白色的方块被后面的遮挡一部分，这就比较恼火了，阴影边框本来应该是admin有边框是border-left: 1px solid #0080DD;退出那部分有边框1px solid #0065B0，然后产生一个阴影效果，但是这样做使得hover时边框会被覆盖，需要些很多css样式
2015-10-14 09:02:36
392
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人