10 2013 档案
摘要：如果你处在一个需要面试别人有关于CSS方面技巧和知识，一时想起来还真有点难。我把我能想出来的整理在一起，提供给大家参考。练习要做正如他们说的，大家实际工作很重要。当然，大家通过工作练习更为重要。这些都是一些练习，并不特别困难，任何人或有没有CSS经验都应该做得到。只看或只听，这样做是没有任何意义的。在CodePen中做练习就挺完美的。CodePen如何使用？详细使用可以点击这里。——大漠创建这个按钮我在Mobify的CodePen账号里看到这样的一个想法。给大家一张按钮的图片，并告诉大家：仅使用CSS属性，创建这样的一个按钮这将是测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样
阅读全文
摘要：Google的PageSpeed和yahoo的yslow是各位不可少的前端工具（同样也都是firebug的插件，安装了firebug之后才可以拥有她们），当各位无法用三寸不烂之舌收拾产品和各种大佬的时候。我猜您可以用这两锅说服他们。slow地界面一如往常的顺眼下面简单说一下yslow的主要功能其中上图标示3的地方是yslow的几个主要功能的选项卡。第一个选项卡是当前页整体评分（Grade），个人对这个很不敏感。点选后为下图（个人对评分很不敏感）第二个选项卡是当前页的一些加载进来的各种文件统计，点选后为下图第三个选项卡是状态，左边的饼图是缓存前的状态，右边的是缓存后的状态。点选后为下图第四个选项
阅读全文
摘要：Ctrl+L选择整行(按住-继续选择下行)Ctrl+KK从光标处删除至行尾Ctrl+Shift+K删除整行Ctrl+Shift+D复制光标所在整行，插入在该行之前Ctrl+J合并行(已选择需要合并的多行时)Ctrl+KU改为大写Ctrl+KL改为小写Ctrl+D选词(按住-继续选择下个相同的字符串)Ctrl+M光标移动至括号内开始或结束的位置Ctrl+Shift+M选择括号内的内容(按住-继续选择父括号)Ctrl+/注释整行(如已选择内容，同“Ctrl+Shift+/”效果)Ctrl+Shift+/注释已选择内容Ctrl+Space自动完成(win与系统快捷键冲突，需修改)Ctrl+Z撤销Ct
阅读全文
摘要：采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。由于客户端js使用浏览器的同源安全策略，跨域情况下，被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况，提示错误：Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外，同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所
阅读全文
摘要：从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。on(events,[selector],[data],fn)$(elements).on( events [, selector] [, data] , handler );$(elements).off( [ events ] [, selector] [, handler] );events:一个
阅读全文
摘要：1)历史和起源正则表达式的“鼻祖”或许可一直追溯到科学家对人类神经系统工作原理的早期研究。美国新泽西州的Warren McCulloch和出生在美国底特律的Walter Pitts这两位神经生理方面的科学家，研究出了一种用数学方式来描述神经网络的新方法，他们创新地将神经系统中的神经元描述成了小而简单的自动控制元，从而作出了一项伟大的工作革新。在1956 年，出生在被马克•吐温（Mark Twain）称为“美国最美丽的城市之一的”哈特福德市的一位名叫Stephen Kleene的数学科学家，他在Warren McCulloch和Walter Pitts早期工作的基础之上，发表了一篇题目是《神经网
阅读全文
摘要：html 请输入内容 css*{font-size:14px;}input,input:focus{outline:none}label{cursor:pointer;position:absolute;z-index:1;float:left;height:25px;line-height:25px;padding-left:5px;}#div1{position:relative;border:solid 1px #666;height:25px;width:160px;color:#333;}#div1 input{position:absolute;z-index:2;bo...
阅读全文
摘要：几个要点:1.三角箭头效果是用border实现的,详细的可以google下CSS 三角2.IE6下不支持border-color:transparent(透明),解决方法是先将其设置为一个不常用的颜色,然后再用IE的滤镜将其透明化(Demo中有注释)3.每个Step之间的白色间隙为了等距所以处理比较复杂,当然也可以换成margin来做简单处理,但效果差很多;兼容IE的Demo,这个版本唯一优势就是支持IECSS：.wrapper{ padding:20px;}.flow-steps{ position:relative; height:30px; list-style:none; font-s
阅读全文
摘要：【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作：取值和赋值 五、元素的操作：移动 六、元素的操作：复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果【正文】一、选择网页元素jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是CSS选择器： $(document) //选择整个文档对象 $('#myId') //选
阅读全文
摘要：方法1：支持IE说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。方法2：支持IEbody {filter:gray}说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。方法3：同时支持IE和Chrome说明：此方法支持IE浏览器、Safari和Chrome等浏览器，但是不支持Firefox浏览器。方法4：使用grayscale.js插件使用grayscale.js插件。这个插件是模拟IE的filter:progid方，官网地址在：http://james.padolsey.com
阅读全文
摘要：本文的作者哈利来自英国，是一位22岁的设计师、开发人员，同时也是一名作家和讲师（见下图）。不错的一篇文章，推荐熟读！英文原文：Front-end performance for web designers and front-end developers，编译：oschina在这篇长文章中，我将分享个人项目经验，一些关于快速简单且非常有趣的WEB性能知识的点点滴滴，以便使你的行为可以像一个初级的网页设计师和前端开发者；希望对任何想开始学习性能的人，有一定的启迪作用，并使你的前端项目变得超快。我相信这些技巧你能很快掌握，并轻松实现。因为都只需要一点小技巧，以及一些浏览器怎样工作的基础知识。注意本
阅读全文
摘要：之前在做一个单页的时候，有要用到这个功能，现在终于有空把它分享出来，并简单介绍下其实现原理及方法。这个功能经常用在文章页，用于改变文章字体的大小，所以这也不是啥新鲜事了哈，那么写这篇文章的目的就是记录下自己对其的一些理解。其实它的工作原理很简单，就是在触发事件的时候将文章的字号改变，更直白一些就是改变font-size这个属性的值（jQuery版本1.7.2）HTML 放大 缩小 默认 这里是一些文字CSS.box{text-align:center;}.ctrl{padding:50px 0px 0px 0px;backgrou...
阅读全文
摘要：@设计达人网 写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里我总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(ba
阅读全文
摘要：曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）开篇我们来看几个问题：IE6、7 真的不支持 display:inline-block 吗？disp
阅读全文
摘要：一、 善用css缩写规则 /*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于下)1px （四边都相同）2. 简化所有：*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为03. 缩写（border）特定样式：Border:1px solid #ff...
阅读全文
