CSS:区分IE版本的三个方法
分类:CSS、XHTML 发表时间:2011年03月2日
虽然我们从心理上都不愿意去处理IE的bug,但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器,这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题,但其实还是有其他的一些方法来处理IE的CSS bug的。
一、IE条件判断语句; 二、CSS规则(IE CSS hacks); 三、HTML条件判断,给出不同的className。
分类:CSS、XHTML 发表时间:2011年03月2日
虽然我们从心理上都不愿意去处理IE的bug,但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器,这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题,但其实还是有其他的一些方法来处理IE的CSS bug的。
一、IE条件判断语句; 二、CSS规则(IE CSS hacks); 三、HTML条件判断,给出不同的className。
分类:CSS、XHTML 发表时间:2010年11月25日
在写这篇文章之前,我一直以为css中position定位时一直是读取最后出现两个方位属性的值。昨天给一同事演示jQuery的animate特效时,我试图通过js来控制已经设置过top和left的DIV的right属性为0,以达到滑动到最右边的效果。结果没有效果,很是郁闷。
早上写了一些关于postion的样式做测试,发现不论给某个DIV设置了多少个方位(当然最多到4个),也不管存放的顺序是如何颠倒,它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。
很长时间没有更新了,也很久没有做实例分享了。最近比较动荡,也比较忙,所以博客的更新频率也变了。
今天的实例算是很小的了吧,是在之前公司的公司网上做的效果,今天朋友让我扣出来给他。我便做了份,整理了分享出来给大家参考。
近期因新工作需要,在学习XML和XSLT相关的知识,以后也会在博客中记录一些学习笔记!
该文是用来讲解CSS3中calc()方法,这一功能特性在Firefox之前的任何版本中都没曾集成,但在Firefox4版本中它将得以实现。
Firefox将支持CSS3 calc(),它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小,margins的值,borders的宽度,等等。
一个重要的特性是:在calc()方法的算术表达式中可以联合多个不同的单位进行计算;calc()方法支持+, -, *, /, mod, min, 和 max 运算符。
资料参考来自:http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc
分类:CSS、XHTML 发表时间:2010年05月17日
通常我们知道为了修复IE各个版本与其他浏览器的兼容,在head标签内会添加条件判断,根据不同的判断结果联入不同版本的CSS样式表。
这样的方法在我所有的网站或者博客中都是如此应用,但我也一直在纠结着多出了多余的样式表文件,HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题,但一直都没有找到可以优化的方法。
但是今天我看到了一篇文章,他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现,自己思考的太少了。
今日在Web Designer Wall博客上看到这篇介绍css3基础的博文,文章其实很普通,关键喜欢他配上了截图,看起来就更加明了。便花了点时间整理后发表出来与大家分享一下!
文中主要介绍了四个css3高级属性,也是最最常用的四个css3属性。
最后,css3高级属性远远不值文中的这些,文中讲到的是一些基础的,也是使用最多的,为了给用户带去更多的美好体验,努力学透css吧!
昨天晚上收到的求助邮件,说因上级的要求需要制作一个走马灯效果的公告栏,希望我可以帮助他解决。因看到邮件的时候都快要睡觉了,所以并没有立即处理。
今天早上到了公司,放开手边的工作,花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他,但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候,该同学又发来了邮件,说我的公告栏的效果有点欠缺,现在的效果和marquee标签的效果一样,需要等内容上移完成后才会重复滚动,如果可以连续滚动的话那就完美了。
于是就在刚刚的时间我有花了几分钟的时间给他解决了,mail给他。不知道他是否还会有什么新的要求呢,期待啊!毕竟这对我来说也是一个挑战嘛,同时也帮助到了别人,何乐而不为呢!
相信大家有用过Google Doc或Flickr,或者一些SNS社区的图片添加描述信息的效果,他们是在点击了一段文字后出现一个输入框,在输入框内输入你要填写的内容,点击“确认”或者“发表”即可立即显示出来。
今天做的这个效果呢,就是其中的截取版本。为什么这么说呢,因为我的效果只实现了前端的更改后立即发布的效果,而没有实际的与服务器端交互,也没有将输入的内容添加到数据库中,主要是为大家介绍一下实现原理。
注意:源代码中没有jQuery库文件,请下载查看代码的朋友根据源代码路径自行添加。
分类:CSS、XHTML 发表时间:2009年09月3日
随着近几年来Web标准的流行,css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离,使得后期的版面维护与更新工作得以更加地便捷!
今天与大家分享一些在网站开发过程中常用到的一些css技巧,或许会给你的编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。
这些css技巧或许很简单,但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些,以后会逐渐整理了发表出来与大家分享。
分享一个我做的图片轮换展示效果,主要实现原理:通过设置非第一个图片的position,通过overflow:hidden属性隐藏,再使用jQuery的animate效果函数作出链性轮换的效果。
轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件,喜欢修改的朋友可以自行修改!另压缩包中的源码没有添加注释,不懂的请阅读本文中的注释。
PS:jQuery库请根据源码的路径自行加入,压缩包中不提供下载。