文章关键字 ‘css相关’

CSS float浮动的深入研究、详解及拓展(二)

2010年01月22日,星期五

本文可以说是有别于目前绝大多数关于浮动的文章,我没有讲浮动的使用实例啊之类的东西,也没有去分析浮动的一些特性,仅仅从最根本的地方分析浮动,我想这个比单纯的讲解几个浮动的应用作用更深远。而且还有一点,本文其实某种程度上是批判浮动的,希望开发者尽可能的少使用浮动,少使用浮动去做些其实并不是浮动应该做的事情。
本文内容多理论,着重表达了我个人的观点,即目前大多数的float应该都不是浮动本应完成的工作,其中使用了大量深入的研究证明自己的观点,相信对您对浮动的认识一定大有帮助。

阅读全文…

CSS float浮动的深入研究、详解及拓展(一)

2010年01月21日,星期四

保证是您没有见过的对浮动的原理本质研究最透彻的文章,没有之一。浮动专题内容较多,本篇是第一部分,重点分析了浮动的意义,深入研究了浮动显示的原理。本文内容较深,概念抽象,适合于一定CSS基础的人阅读,我尽量将我想表达的内容表述清楚,提供详尽的插图,必要的动画演示。多是个人观点,如有异议欢迎反驳。

阅读全文…

页面可用性之outline轮廓外框的一些研究

2010年01月4日,星期一

在IE以及Firefox浏览器下,默认情况下,点击链接文字或图片(特指a标签下的)。会留下一个轮廓框。就我个人而言,对于链接点击后留下的轮廓框,我都是采取无视的态度,因为权衡来讲,对链接轮廓框大动干戈麻烦大于好处。但是网站千差万别,总有需要解决这类虚框的时候。

目前网上或设计师工程师常用的方法就是设置…,此方法确实有效,或是由于跟风,或是由于没有深入思考,或是根本没有必要想那么多,此方法会大大降低页面的可用性…

阅读全文…

CSS3 transition实现超酷图片墙动画效果

2009年12月30日,星期三

最终的图片墙效果
CSS3是个新东西,也是个好东西,不过以往用CSS并没有让自己兴奋。比如圆角,文字投影等就的CSS也可以实现,就是多一些标签而已。但是,今天,对CSS3 transition过渡的学习真正让我兴奋了一把。因为我见到了我以前没有见到过的东西,简单的几行CSS代码实现了flash都不容易实现的炫酷效果。本文就将展示一下使用CSS3 transition实现的炫酷图片墙图片旋转悬浮效果,文章由浅入深,循序渐进,提供详尽的代码讲解以及相应的demo实例页面,相信会对您了解CSS3的一些特性有所帮助的。

阅读全文…

HTML CSS列表元素ul,ol,dl的研究与应用

2009年12月30日,星期三

HTML标签元素就是砖砖瓦瓦,看上去很一般,但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力,于是有了我们多姿多彩的互联网。列表元素也是如此,HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。虽然还有几十更多的用途和技术可以在本文中讨论,但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌,帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。

阅读全文…

酷酷的jQuery鼠标悬停图片放大切换显示效果

2009年12月25日,星期五

缩略图放大显示效果截图
介绍一个蛮酷的图片缩略图放大预览的效果,外带图片切换显示功能。动画显示,投影样式,效果不错。提供demo页面,提供源文件下载,希望对您有所帮助。

阅读全文…

IE6下z-index犯癫不起作用bug的初步研究

2009年12月24日,星期四

CSS中,z-index是个内容繁多,牵连甚广的知识点,CSS手册中的那点知识那就是冰山一角。如果深入研究,牵涉到border及background的堆叠模型,同级显示问题,同级牵连显示问题,以及浏览器处理显示的机制等,我可能表述有些含糊,但确确实实z-index蕴含着很深的知识点。
我在z-index的研究上面的功夫还不够,所以一些深入的东西我是没有信心讲好的。不过本篇文章可以说是做了个不错的表面功夫,详细的阐述了IE6下两个常见的z-index层级bug,有理有据,一步步细致分析,提供代码演示,提供demo页面,希望对您的学习能有所帮助。

阅读全文…

jQuery之使用slideToggle实现垂直下拉菜单

2009年12月22日,星期二


本文展示如何用简单的jQuery代码配合CSS实现效果上佳的下拉菜单效果。并对效果实现的核心函数方法slideToggle做一定的讲解。
本文提供详尽的demo页面以及简化的源文件代码下载,希望对您能有所帮助。

阅读全文…

IE下css bug集合-翻译自haslayout.net

2009年12月14日,星期一

本文翻译自haslayout.net,里面集合了IE6,IE7,IE8下的bug们,每个bug都有一个相应的教程页面,教程页面有关于bug的介绍,产生原因以及解决方法等。教程页面未翻译直接链接到原项目。本文相对于一个bug集合的中文版首页。虽然我很努力,但是其中难免会有不准确之处,欢迎之处。最后,附上doc版的翻译内容,希望对您有所帮助。

阅读全文…

翻译-IE7/8@font-face嵌入字体与文字平滑

2009年12月13日,星期日

这是一篇翻译的文章。主要内容如下:使用@font-font调用字体进行文字渲染的时候,IE7和IE8浏览器下的文字会有丑陋的锯齿,本篇文章就是讲为什么会有锯齿,如何解决这个问题。文章含有详细的demo页面,还有相应的jQuery插件方面解决这一问题。虽然,我们平时很少遇到这一问题,但是了解也是很重要的。
翻译水平有限,如果有不足之处欢迎指正。希望对您的学习有所帮助。

阅读全文…