2012年3月18日
拖拽效果的实现原理分析
摘要： 一些网友给我反馈，希望我给下详细的demo，其实我觉得学习知识还是要自己动手，亲身实践下才体会深刻，顾没有提供可以使用的demo给大家直接下载下来看效果了，但是为了大家对我的期望，后面写的一些文章，如有必要，我都会给大家提供demo，供大家参考的。 好了，进入正题，经常在网站上看到各种拖动的效果，很酷，如，百度新首页，接下来我来分析下拖动到底是什么实现的。一、html5现在已经提供支持拖动和拖放的API了，所以，支持html5的浏览器可以不必折腾了，直接使用吧。 关于html5的拖拽api 请查看http://dev.w3.org/html5/spec/dnd.html以下摘录一些 比... 阅读全文
posted @ 2012-03-18 15:17 yupeng 阅读(4518) 评论(0) 推荐(5) 编辑
图片旋转效果的研究
摘要： 最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况一、图片旋转的方案1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的。 具体代码为：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代码的意思就是将图片顺时针旋转90度，其实可以旋转任意的度数。但是支持css3的浏览器只有chrome，firefox3.6 ，safari，ie浏览器是不支持的。那么IE下该怎么处理呢？于是就有了下面的一种方案2）在IE下通过滤镜来实现旋转 具体代码为.. 阅读全文
posted @ 2012-03-18 00:06 yupeng 阅读(2063) 评论(2) 推荐(6) 编辑
2012年3月17日
文字内容溢出用点点点(...)省略号
摘要： 我们在项目中一直都是使用JS来控制如果文字内容超过的时候，用...来表示，其实是可以通过CSS来控制的，下面提供几种办法测试的浏览器：ie6，ie7，ie8，chrome17 ，firefox101）css方法 text-overflow-fag{ width:500px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; }该方法在ie6,7,8 chrome17,firefox10 下均测试通过2）网上别人提供的一个负margin定位的方法，我觉得比较好。 ... 阅读全文
posted @ 2012-03-17 21:17 yupeng 阅读(9725) 评论(0) 推荐(1) 编辑
页面滚动图片等元素动态加载实现本质
摘要： 各种网站经常看到页面滚动到可视区域，然后才加载相应的图片资源，他的本质是什么呢？本文来分析一下很简单，就是判断当前元素是否是可视区域内假设：h1 = 滚动条滚去的高度 w1 = 滚动条滚去的宽度 h2 = 屏幕的高度 obj 表示当前对象 {x：当前对象相对于文档左上角的位置x,y:当前对象相对于文档左上角的y}则应该这样判断 在y轴方向上：if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()} 同理在X轴 阅读全文
posted @ 2012-03-17 19:25 yupeng 阅读(670) 评论(0) 推荐(0) 编辑
这些东西，你知道吗?是否忘记了
摘要： 1）nodeType 属性可返回节点的类型。最重要的节点类型是：value 1 表示 元素element ；2表示 属性attr ；3表示文本text；8 表示注释；9表示 文档document，元素所属文档一般用element.ownerDocument||element.document 来兼容2） JS判断网页的渲染模型 document.compatMode如果为：BackCompat：标准兼容模式关闭。如果为：CSS1Compat：标准兼容模式开启。当document.compatMode等于BackCompat时，浏览器客户区宽度(网页视觉区域)是document.body.cli 阅读全文
posted @ 2012-03-17 17:46 yupeng 阅读(246) 评论(0) 推荐(0) 编辑
深入研究浏览器的各种高度
摘要： 项目中经常碰到各种高度，今天再次总结一下1）getboundingClientRect() 这个是IE下特有的一个方法，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，它返回的是一个对象，该对象有是个属性：top，left，right，bottom，其中如果滚动了滚动条，top和left的值可能会为负值，因为他是相对了可视窗口，被卷进去了。2）scrollTop 表示的意思是对象被卷进去的高度，如果是body的对象，那么则表示滚动条卷去的高度，即浏览器上方隐藏的高度。如果是div等对象，那么就表示滚动条滚去该div上方的高度。3）offsetHeight,offsetWi.. 阅读全文
posted @ 2012-03-17 17:41 yupeng 阅读(1509) 评论(0) 推荐(0) 编辑
整理电脑里面的前端开发中的小Tips2【及时更新】
摘要： 21）在HTTP1.1标准的请求支持（同一个域名）的并行，各个浏览器的下载数为：ie6/7（2）、Firefox3、IE8（6）、Opera10/Chrome3/Safari4（4）22）浮动元素在ie6下的使用要注意：如果不设置宽度，可能会引起问题。23）如果在父级元素和子级元素之间（div > p）有一个HTML注释，在IE7中，子选择器是不会起作用的。24）iframe的使用：iframe默认样式中有边框，隐藏使用display：none ，去掉滚动条和边框可以设置成：scrolling="no" frameborder="no"25）在IE 阅读全文
posted @ 2012-03-17 12:52 yupeng 阅读(812) 评论(1) 推荐(0) 编辑
整理电脑里面的前端开发中的小Tips【及时更新】
摘要： 1）img 标签如果src设置为空或者#的时候，会多发一次请求，建议设置为 about:blank 。测试浏览器 ie6,ie7,ie8,chrome17,firefox102) try ~catch 中如果使用了setTimeout 的话，会报错的，catch 不到内容的。3）input radio 如果没有设置 name的属性，在ie下是不能被点击到的，另外 input radio，checkbox 不支持及时的change事件，意思是点击或者选定的时候，没有触发change，而是在鼠标离开的时候才触发的，如果要做到这样的效果，必须使用click要代替4）在ie<9下如果使用appl 阅读全文
posted @ 2012-03-17 11:42 yupeng 阅读(1880) 评论(5) 推荐(8) 编辑
2012年3月16日
doc.documentElement.scrollTop&&doc.body.scrollTop
摘要： doc = document；doc.documentElement.scrollTop, doc.body.scrollTop的区别scrollTop 是指对象被卷去的高度，在body对象上就是指窗口被滚动条卷去的高度，如果在其他的对象上，那么就是容器被滚动条卷去的高度其实doc.documentElement.scrollTop, doc.body.scrollTop 都是指窗口被滚动条卷去的高度，是一个意思。那么为什么还有两个呢？本质：如果页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。如果页面不具有 DTD（或者说没有指定了 阅读全文
posted @ 2012-03-16 09:00 yupeng 阅读(1123) 评论(0) 推荐(0) 编辑
跨浏览器事件的其他问题（小记）
摘要： 今天来总结下在项目中事件使用的以下问题*DOMContentLoaded在不同浏览器的实现 什么是DOMContentLoaded？ 它是firefox为了处理在页面DOM结构建立后（无需下载js，css，img等图片资源）绑定事件的一个方法，对于IE是没有这个方法的，但是在IE中可以模拟出这个方法来，来达到同样的目的。我们经常使用jquery的 $(document).ready(function(){});或者百度的tangram框架的时候， baidu.dom.ready(function(){})其实是对这个方法在不同浏览器中做了一个封装。在IE中的实现方式，我们可以参考这个文档ht. 阅读全文
posted @ 2012-03-16 08:37 yupeng 阅读(1582) 评论(0) 推荐(0) 编辑
2012年3月15日
js中事件绑定研究
摘要： 本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源，还是IE事件模型和W3C事件模型不同的处理方式1）W3C事件模型：支持事件捕捉和冒泡addEventListener('type',function(){},bool) removeEventListener('type',function(){},bool)2）IE事件模型：仅支持事件冒泡attachEvent('type',function(){});detachEvent('type',fucntion(){});*如何统一：设置W3C事件绑定函数的第三个参 阅读全文
posted @ 2012-03-15 00:37 yupeng 阅读(5083) 评论(0) 推荐(0) 编辑
2012年3月11日
extend 方法在js框架中的设计
摘要： 今天来分析下extend方法在各种js框架下的设计。这个函数的功能基本都是实现对象的拷贝功能，即将一个对象的所有属属性拷贝到另外一个对象上去，这个函数使用的频率也很高，如果我们要将一个类的所有方法拷贝到另外方法上去，使用这个方法很方便的。1）在百度tangram js 框架中的实现，baidu.extend =baidu.object.extend = function (target, source) { for (var p in source) { if (source.hasOwnProperty(p)) { target[p] = source[p]; } ... 阅读全文
posted @ 2012-03-11 12:48 yupeng 阅读(31093) 评论(1) 推荐(3) 编辑
jquery 文档操作2
摘要： 接着上篇，继续。。1）selector.toggleClass(className),在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在例如：<div class="user">username</div> $('div.user').toggleClass('bing') 第一次我们应用的时候得到<div class="user bing">username</div> 再次应用就还原开始那样的2）selector.text() 得到匹配元素 阅读全文
posted @ 2012-03-11 00:56 yupeng 阅读(234) 评论(0) 推荐(0) 编辑
2012年3月10日
jquery 文档操作
摘要： 今天以一个例子来看看jquery 的文档操作，首先上例子：<!DOCTYPEhtml><html><head><style>p{margin:8px;font-size:16px;}.selected{color:blue;}.highlight{background:yellow;}</style><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head&g 阅读全文
posted @ 2012-03-10 07:58 yupeng 阅读(376) 评论(0) 推荐(0) 编辑
jquery proxy && delegate 的比较
摘要： 1）proxy 方法：通俗的讲就是改变函数的作用域，有两种调用方式： （1）jquery.proxy(function,context) function 为将要执行的函数，context为function上下文对象 （2）jquery.proxy(context,name) 函数上下文object对象，name为将要执行的函数。2）delegate 方法：为匹配到的选择器绑定一个或者多个事件 调用方式：delegate(selector,eventType,handler);selector为选择器，eventType 为事件类型(包含一个或者多个事件的字符串)，handler为事件触发执行 阅读全文
posted @ 2012-03-10 00:48 yupeng 阅读(1261) 评论(0) 推荐(0) 编辑
丰富的jquery选择器
摘要： 今天抽时间看了下jq，里面的选择器还是很丰富的，下面分别来对他进行分类下：1）首先是基本的选择器，可选择标签 ，样式，id，通配符4种属性的，eg：$(div) 是选择dom文档下所有的div元素，$(.class) 是选择所有dom文档下的所有样式为class的元素，id则必须通过$(#id)这种方式来使用，通配符是指 * ，能匹配所有的元素。2）组合选择器，就是通过各种方法选择的元素组合在一起，返回一个数组元素，各个选择器以，号分隔。3）层级选择器： $(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素，即子孙元素,例如：$(“div span.num”) 阅读全文
posted @ 2012-03-10 00:36 yupeng 阅读(1371) 评论(0) 推荐(0) 编辑
2012年3月5日
百度前端js库分析
摘要： 百度前端js库tangram已经开源一年多了。自己也一直在使用这个工具库，这个工具库使用起来是很方便的百度对性能要求是很好的。它对常见的操作都做些了封装和拆分，比如数组，ajax提交，dom操作，方法的操作，事件等的操作，每个函数都是静态的方法，对其他的方法没有依赖关系，可以很方便的对其中的某些功能抽取出来单独使用，同时提供了方法定义和自动抽取的工具，这个都是可以实现的。我觉得对方法的操作，语言层面的封装，事件的封装，dom的操作都挺好的，下面来着重来分析下这些方法的实现方式。1）对方法的封装。提供baidu.fn这个对象（1）定义了抽象方法abstractMethod baidu.fn.ab 阅读全文
posted @ 2012-03-05 23:54 yupeng 阅读(3238) 评论(0) 推荐(0) 编辑
2012年3月4日
js数组操作，拼写好像，没看清楚就容易出错的。
摘要： 有2个单词很像，如果没有看清楚，就很容易出错，特此记录下：1）数组的 切片操作（slice），看w3c对他的描述：（1）定义：从已有的数组中选定制定的数组（2）返回值：数组（3）注意： 不改变原数组的值，可以用负数作为索引。常见用法：[].slice.call(arguments)，意思就是将参数链接成数组形式2）删除数组元素操作（splice），和上面的单词只有一个字母（p）的区别（1）定义：插入，替换，删除数组中的元素（2）语法：arryobject.splice(index,howmany,ele1,ele2,.....)可以理解为先删除，然后再添加元素，index 是开始位置，从0开始 阅读全文
posted @ 2012-03-04 22:58 yupeng 阅读(664) 评论(0) 推荐(0) 编辑
web数据交互方式
摘要： 也做了很久前端开发了，先总结下web数据交互方式，web数据交互，简单的讲，是client与server端的数据交互，通过http协议交互的。首先看一个传统的页面请求的生命周期：1. 浏览器发送一个HTTP请求到Web服务器。2. Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。3. HTTP响应通过互联网传送到浏览器。4. 浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。5. CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。6. JavaScript资源下载后. 阅读全文
posted @ 2012-03-04 22:11 yupeng 阅读(10894) 评论(1) 推荐(0) 编辑
2012年3月3日
2011年总结
摘要： 2011年总体来说是忙碌的一年，在这一年中，经历了几个好朋友的离职，6月份去负责了下团队的技术交流和人员的培训工作，，下半年由原来的coder转变成了项目的负责人。总结这一年的工作，我觉得有一下几点： 1）有分享的心态：分享是提高自己的水平和认识的一个方式，说出自己的想法，和别人分享，可以检验出来自己对这个问题的理解是否正确，是否有出入，如果别人有好的想法的时候，或许是对自己的一个补充。 2）坚持写博客：岁月留下我们的东西真的不是很多，记忆也就那么多，一定要坚持写自己的博客，一周至少写2篇博客，2012年我要将我的博客完善起来。 3）不要砸在项目里面：项目不是我们的生命，当然我们要做好项目.. 阅读全文
posted @ 2012-03-03 07:47 yupeng 阅读(269) 评论(0) 推荐(0) 编辑
2011年5月18日
HTTP POST GET 比较
摘要： 1）用途： get 一般用于获取、查询资源信息，get是幂等的，post一般用于更新信息2）安全性 get请求是不安全的，对参数的请求是放在url中，用户可以看得到，如果是英文，则原样发送，如果是空格，则转化为+，如果是汉字或者是其他的，则用 base64转换，post请求相比而言，安全性要好一点，3）传输数据的大小： get对url的长度大小也是有限制的，在ie下不能超过2083k，在理论上ff和其他浏览器是没有限制的，但是受到操作系统限制。 post他将参数放到消息体中，传输的数据在理论上不受限制，但是受到各个web服务器对post提交数据的大小有限制，apache和iis都有不同的配置（ 阅读全文
posted @ 2011-05-18 19:58 yupeng 阅读(387) 评论(1) 推荐(0) 编辑
最近开发问题记录
摘要： 1）跨域 由于同源策略（同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。同源指的是：同协议，同域名和同端口。）。由于浏览器的一些安全限制，ajax不能跨域提交。js不能跨域调用函数。网上解决方案有很多，我采用的是iframe+domain的形式，在2个不同的子域下分别设置domian ，通过设置一个代理页，将iframe的src指向这个代理页面，在这个代理页面去调用父页面的方法 .代理页和当前页面处在同一个域名下。2） iframe使用总结（1）iframe+post进行跨 阅读全文
posted @ 2011-05-18 17:44 yupeng 阅读(358) 评论(0) 推荐(0) 编辑
2011年4月15日
表单问题总结与最佳实践
摘要： 工作中常常碰到很多的表单提交，表单对齐的问题，下面来总结下我碰到的问题。也欢迎大家补充。1）表单对齐问题 曾今做了这么个表单，当时关于这个表单对齐的问题上可是花费了一些时间，即使是设置vertical-align：middle，也没有对齐。后来是通过添加margin-top：-2px来解决这个问题的。这个其实和字体的设置是有很大关系的，我们的字体是font:12px/1.5 arial,宋体; 首选的是arial字体，所以必须是通过添加margin-top：-2px来解决（我是用的12px字体），其实只要把字体换成tahoma字体的话，然后再设置vertical-align：middle。就可 阅读全文
posted @ 2011-04-15 13:36 yupeng 阅读(1372) 评论(0) 推荐(0) 编辑
overflow：hidden在各个浏览器中的应用
摘要： 首先看看w3c的解释： 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。理解这句话的深刻含义，可以看出有一个包含，包裹的意思。它的值可能为值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。ie不支持inherit特性，包 阅读全文
posted @ 2011-04-15 10:35 yupeng 阅读(7765) 评论(0) 推荐(3) 编辑
深入分析line-height 在浏览器中的特性以及最佳实践
摘要： 首先看2个问题： 1）line-height和font-size 有联系吗，什么联系？ 2）line-height的继承特性有什么特殊性？如果你对这2个问题很清楚的话，你可以跳过本文。首先看看w3c的解释：line-height 属性设置行间的距离（行高，行间距）。 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是 阅读全文
posted @ 2011-04-15 00:58 yupeng 阅读(5535) 评论(7) 推荐(5) 编辑
2011年4月13日
调研CSS选择器在浏览器中的支持情况
摘要： 网上有很多这样的信息，很多的图表对各个浏览器进行比较，关于特性的支持，其实有些不全面，本文就日常常见的一些css选择器进行一个总结（本文在标准模式下）。1）关于:active,:link,:hover,:visited伪类在css1的规范中，这四个伪类仅作用在a 标签上。在后来的所有浏览器中都是支持a标签的这个属性。所以为了鼠标特效能够支持各种浏览器，a标签是一个首选的标签，利用display：block或者display：inline-block可以使a标签具有很多的特性。我经常用它来做按钮，来实现3态，效果很好，不过在表单中就不推荐来做按钮了。 ：link 和:visited 从表面上来看 阅读全文
posted @ 2011-04-13 14:55 yupeng 阅读(1871) 评论(3) 推荐(1) 编辑
深入研究display:inline-block在浏览器中的应用
摘要： 写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。 官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的） ，ie6，ie7 是不支持这个属性的。ie6,7 如何支持这个属性呢？ 对于块级元素，直接让块级元素成行内元素， 然后再触发layout。 {display：inlin 阅读全文
posted @ 2011-04-13 00:12 yupeng 阅读(4199) 评论(7) 推荐(3) 编辑
2011年4月12日
vertical-align在不同浏览器表现的研究
摘要： 首先看看w3c中是怎么描述的。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。默认值是baseline。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置元素的垂直对齐方式。 很重要的一点就是它是针对行内元素起作用的，如果不是行内元素或者没有设置成display:inline或者display：inline-block的元素就可能出现各种各样的问题，有的生效了，有的却没有生效。这里我举例来说明一下。 代码如下所示：1<!DOCTYPEHTML>2<html&g 阅读全文
posted @ 2011-04-12 20:01 yupeng 阅读(3966) 评论(0) 推荐(3) 编辑
深度解析CSS 属性的用法
摘要： 用CSS开发也很久了。早就打算对我使用的CSS做一个总结，在接下来的一段时间我打算逐个解析下CSS的一些用法。下面是目录：1）vertical-align在不同浏览器的表现2）display:inline-block在在浏览器中的应用3）line-height 在浏览器中的应用以及最佳实践4）overflow：hidden在各个浏览器中的应用5）水平居中&&垂直居中的一些想法6）表单问题总结与最佳实践7）html&& body 标签与滚动条研究 阅读全文
posted @ 2011-04-12 10:53 yupeng 阅读(505) 评论(0) 推荐(0) 编辑
高效CSS写法
摘要： 上周末翻译了molliza 和google关于高效CSS 的写法的文章，觉得他们的说法有一些共同之处，就是CSS解析引擎是从右到左开始解析的，我们要做的就是减少CSS引擎的解析时间，所以避免一些低效的CSS 选择器去匹配大量元素能够减少页面加载的时间。结合我自己编写CSS的经验，我总结如下：1) CSS 的层级选择器不要超过3个，保持3个以内 bad case： .class1 ul li a{} good case .class a{}2) 尽量少使用标签选择器，但是也是可以使用的，比如写列表（ul li语法）的时候，如果给每个li一个class，那样相反不仅代码难看，而且也无疑的增加了代码 阅读全文
posted @ 2011-04-12 09:28 yupeng 阅读(6606) 评论(14) 推荐(6) 编辑
2011年4月11日
css style标签所见即所得
摘要： style 也是标签（在非ie内核的浏览器中支持），直接上图我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。附上我研究的代码：[代码]23/html参考文章：http://css-tricks.com/show-an... 阅读全文
posted @ 2011-04-11 22:43 yupeng 阅读(953) 评论(0) 推荐(0) 编辑
IE hasLayout的问题总结
摘要： 这篇文章是翻译http://haslayout.net/haslayout这篇英文的。写的挺好的。介绍这篇文章是一个总结haslayout的文章。更新：haslayout在ie8的标准模式下已经被废弃了，但是在ie7的兼容版本以及以下的版本是仍然存在的。什么是haslayout？MSIE有一个很早很早，过时的渲染引擎Mosaic . 在表格布局的时代。几乎是所有的元素（除了内联内容）都是一个盒子。内容几乎不可能超过表格的单元格。表格的单元格不可能超出表格。很多年过去了。微软开始采用Tridentengine来使用CSS，但是，CSS改变了最初的这个古老引擎的假设（最重要的一点就是任何元素都会包 阅读全文
posted @ 2011-04-11 22:10 yupeng 阅读(4473) 评论(0) 推荐(2) 编辑
css的写法，记录下。
摘要： 上代码：<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"> .mod-test1{ font:20px/1.5; color:red; } .mod-test1.bg{ background:#dfdfdf; display:inline-block; padding:5px 10px 阅读全文
posted @ 2011-04-11 20:27 yupeng 阅读(392) 评论(0) 推荐(0) 编辑
IE6 position:fixed (固定定位)的解决方案
摘要： ie6下是不支持position：fixed的，这是ie6下的一个bug，ie7+ firefox，chrome都支持固定定位的。怎么解决这个问题呢？有两种方案：1）针对ie6写hack，其他的浏览器仍然用position：fixed属性。使用position：fixed 很简单，这里就不再叙述了。下面介绍下怎么解决ie6下的问题。使用position：absolute 绝对定位来解决。构造一个滚动条，这个滚动条是包含该文档的内容滚动条（它可以是body的，也可以是某个div的）。很明显position：absolute是绝对定位的。他脱离了整个文档流，他不相对该滚动条包含的文档，而应该是滚动 阅读全文
posted @ 2011-04-11 18:21 yupeng 阅读(2928) 评论(10) 推荐(1) 编辑
我对浮动的理解和认识（二）
摘要： 上篇我写了我对浮动的认识（一），里面主要说了float的初衷和浮动带来的一些实际本质的问题。聪明的css开发者利用css的占位特性进行布局，的确起到了一些很好的效果，但是也会带来一些实际的问题。比如浮动后没有高度，高度为0.这个现象 ，请广大的css开发者留意。不然可能出现一些很莫名奇妙的问题。如何解决这个问题呢？亦即清除浮动有2种方式：1）使用伪对象（不用增加新的标签），代码如下：.clearfix:after{content:".";display:block;height:0;clear:both,visibility:hidden}.clearfix{ zoom:1 阅读全文
posted @ 2011-04-11 10:52 yupeng 阅读(1796) 评论(1) 推荐(0) 编辑
调研雅黑字体在各浏览器的显示
摘要： 直接写的代码，在各个浏览器测试总结的结果。如果有什么不全面，请各位大侠指正。结果在代码：<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">h4{margin:5px;padding:0px;border-bottom:1pxsolid#000;}</style><title>微 阅读全文
posted @ 2011-04-11 09:03 yupeng 阅读(2019) 评论(3) 推荐(1) 编辑
2011年4月10日
图片被包含问题
摘要： 刚才在研究浮动的问题的时候发现，图片被包含的时候下面总有一个空隙。分析一下，先上图：代码：<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"> .item {border: 2px solid #dfdfdf} .item img {padding:2px; border:1px sol 阅读全文
posted @ 2011-04-10 23:33 yupeng 阅读(431) 评论(0) 推荐(0) 编辑
我对浮动的认识（一）
摘要： 浮动布局是我之前用的比较多的一种布局，在用的过程中我也碰到了很多很诡异的问题，今天有空我花了些时间研究了下浮动布局，发现以前对浮动的理解有些不对，特来记录下。欢迎大家拍砖。浮动在历史上最初是做什么的？ 在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。代码：<!DOCTYPE HTML><html ><head> &l 阅读全文
posted @ 2011-04-10 23:07 yupeng 阅读(1836) 评论(4) 推荐(2) 编辑
闪光字的处理
摘要： 前阶段做了一个简洁版博客，里面涉及到了闪光字（类似qq空间，百度空间里面的那样闪光字），处理的时候出现了一些问题，记录下。分析里面的原理，其实还是很深刻的。在标准模式下<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title></title></head><body><DIV style="O 阅读全文
posted @ 2011-04-10 11:17 yupeng 阅读(429) 评论(0) 推荐(0) 编辑
2011年4月9日
高效css 写法
摘要： 以下文章是 翻译 google高效css写法文章地址：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors使用高效的css样式总体 避免一些低效的key selectors去匹配大量的元素能够加速页面的展现 。细节 当浏览器解析html的时候，它构造了一个文档树来展现所有被显示的元素。它在特定的样式表中去匹配元素，根据标准的css的层叠，继承和顺序规则，在mozilla的实现中（可能其他的也是这样），对于每一个元素，css引擎通过规则去寻找匹配，css引擎评估每一个规则是从右到左 阅读全文
posted @ 2011-04-09 18:28 yupeng 阅读(1183) 评论(2) 推荐(2) 编辑