摘要: 绑定事件addEventListener:W3C标准写法IE不兼容attachEvent:兼容IE注意:1:事件名不同:IE下要加“on“,W3C不加 2:加载事件的执行顺序不同,W3C按绑定事件的顺序来执行,而IE6,7是后绑定的时间先发生 3:this的指向,W3C中,绑定函数中的this指向DOM对象,而IE6,7指向WINDOWS对象var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else ... 阅读全文
posted @ 2013-09-24 17:20 sony静 阅读(178) 评论(0) 推荐(0) 编辑
摘要: 绝对定位方式的瀑布流布局:一、布局1、包围块框的容器: ... ...2、一个块框: 3、初始化第一行/5个块框:.pin{ padding: 15px 0 0 15px; float: left;}.box{ padding: 10px; border:1px solid #ccc;}.box img{ width:192px; height:auto;}效果:二、思路:1、设置父级main的样式:水平居中。2、设置每个块框pin的样式:绝对定位。3、设置窗口滚动事件的监听... 阅读全文
posted @ 2013-09-24 17:08 sony静 阅读(437) 评论(0) 推荐(0) 编辑
摘要: 先看下面的代码: var $ = KISSY.all; $(‘a’).on(‘click’,function(e){ doSomeThing();//这个方法貌似很有名 e.halt(); }); 上面的代码看起来像是很好的完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,但这么做到底有什么不对呢? 在解释有什么不对前,我们来看看浏览器中事件中的几个概念 浏览器默认行为 当我们点击某一个链接的时候,浏览器会直接跳转,在表单中按回车,表单会自动提交,这些都是浏览器的默认行为。 Javascript事件传播的机制 什么是事件冒泡? 比如点击了一个按钮,这个... 阅读全文
posted @ 2013-09-24 17:02 sony静 阅读(172) 评论(0) 推荐(0) 编辑
摘要: .test{ background: #f00; /*各浏览器都认识,主要给高级浏览器用*/ background: blue\0; /*ie10、9、8*/ background: red\9; /*所有的 ie*/ background:#F60\0\9; /*\0\9 或 \9\0 IE8*/ +background: yellow; /*ie7、6 +号同*号 */ _background:black; /*ie6*/}:root .test{background: blue\9;} /*ie9*/background:#f00; 各浏览器都认识,主要给高级浏览器用back... 阅读全文
posted @ 2013-09-17 11:18 sony静 阅读(133) 评论(0) 推荐(0) 编辑
摘要: 此 处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如 说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。有关于hack的使用方法和种类,互联系网上成千上万,比较典型的介绍有:浏览器兼容之旅的第二站:各浏览器的Hack写法Browser CSS HacksMoving IE specific CSS into @media blocksDetecting browsers javascript hacksBrowser Specifi 阅读全文
posted @ 2013-09-17 11:10 sony静 阅读(352) 评论(0) 推荐(0) 编辑
摘要: 多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝 阅读全文
posted @ 2013-09-17 11:05 sony静 阅读(198) 评论(0) 推荐(0) 编辑
摘要: html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display:block }li{ display: list-item }head{ display: none }table{ display: table }tr{ display: table-row }thead{ display: table-header-group }tbody{ d 阅读全文
posted @ 2013-09-16 15:41 sony静 阅读(566) 评论(0) 推荐(0) 编辑
摘要: //显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent 阅读全文
posted @ 2013-09-04 15:05 sony静 阅读(123) 评论(0) 推荐(0) 编辑
摘要: CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。/** 清除内外边距 **/body, h1... 阅读全文
posted @ 2013-09-04 09:53 sony静 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录: /*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */ 如此你代码的结构就一目了然,你可以容易的查找和修改代码。 而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发: /*** He... 阅读全文
posted @ 2013-09-04 09:51 sony静 阅读(170) 评论(0) 推荐(0) 编辑