文章关键字 ‘css相关’

纯CSS实现侧边栏/分栏高度自动相等

2010年03月25日,星期四

为了表现的美观或是一些功能的需要,我们经常希望侧边栏/分栏的高度保持一致。我们可能会使用min-height属性,IE6不支持min-height但是height会自动撑高,所以min-height + _height的组合也是常用手段之一;另外就是使用背景图片了,利用背景图片的垂直平铺,可以模拟分栏的等高背景效果,但是,此方法对布局宽度有一定的要求,如果布局宽度改变,背景图片可能也要做一番修改。但是这些方法都有局限性,没有从根本上解决问题。
本文就将真是分栏高度相等的的技术,使用margin负值实现任意分栏的高度自动相等。提供详尽的插图,代码示意。提供必要的demo,希望能对您的学习有所帮助。

阅读全文…

CSS+JavaScript实现页面不同布局的切换

2010年03月25日,星期四

我们平时使用windows操作系统,应该见过文件才查看功能,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。
本文就将展示如何在web页面上轻松的实现布局的切换,查看方式的转换。提供详尽的插图,提供详尽的demo,以及对应的代码,希望能对您有所帮助。

阅读全文…

中国古代道家思想与网页重构的思考

2010年03月18日,星期四

道家是以老子、庄子为代表的中国春秋战国时期诸子百家中最重要的思想学派之一。道家思想以其独特的宇宙、社会和人生领悟,在哲学思想上呈现出永恒的价值与生命力。
在众多的道家思想内容中,其非常重要的一个核心思想:顺其自然,无为而治,我是非常之推崇,这种哲学思想已经深深地影响到了自己的为人处事,思考问题的方式。
本文就将通过“顺其自然,无为而治”的思想,讲述我对网页页面重构的一些思考。揭示一些规律,希望能对您有所帮助。

阅读全文…

纯CSS实现各类气球泡泡对话框效果

2010年03月13日,星期六

边框法复杂应用 1分快3

本文的知识点较多,内容也较多,展现了CSS惊人的力量,如果使用纯粹的CSS实现视觉良好,体验上佳的web界面。讲解了“字符法”以及“边框法”,丰富示例,逐层深入,非常细致的讲解了实现的原理,方法,代码,注意点等。
本文提供详尽的插图,丰富的按钮,提供详尽的demo,希望你对您有所帮助。

阅读全文…

CSS实现兼容性的渐变、高光等文字效果

2010年03月12日,星期五

CSS实现文字渐变效果 1分快3
对于很多网站的大标题都是有一定的文字效果的,比如渐变就是常用的效果,而这些效果往往都是由世界上最厉害的美容产品photoshop做出来的,一个效果就是一张图片,所以,要是要10个不同的文字标题,可能就要制作十张带有渐变效果的文字图片了。

而实际上,无需使用多张photoshop图片,只要一张小小的图片在配合CSS就能实现各个文字内容的渐变效果。
本文就将展示如何使用CSS,配合一张小小的图片实现文字的各种上佳的效果,没有JavaScript,没有flash,纯粹的CSS,兼容各个浏览器,Firefox,chrome,Safari,甚至已经被微软做了葬礼的IE6也可以降服。

阅读全文…

去除冗余 – 精简您的CSS样式代码

2010年02月5日,星期五

我基本上可以在国内任意的网站上找到冗余的CSS代码,可见CSS代码的冗余是非常普遍的,本文就列举了一些常见的使用无效CSS代码的情况,您可以对照分析看看您的代码是否也存在类似情况。
提供详尽的插图,提供相应的demo,希望能对您有所帮助。

阅读全文…

对overflow与zoom”清除浮动”的一些认识

2010年01月31日,星期日

本文首先以YY的方式将“清除浮动”这个概念用“清除浮动造成的影响”这个更准确的方式表述,然后列举一些具有包裹性的CSS属性,再通过实例证明这些具有包裹性的元素都具有抑制浮动副作用的作用,来证明使用“包裹性”这个概念可以解释为何有些元素可以消除浮动使父标签高度塌陷的问题。最后解释了为何不使用haslayout来解释清除浮动造成的影响。
观点新颖,相信会对您有所启发的。

阅读全文…

absolute绝对定位的非绝对定位用法

2010年01月29日,星期五

“无定位值的absolute元素就是个连实际宽度也没有的float浮动元素”,如果您不知道我这句话说的是什么乱七八糟的东西,那您可能有必要读一读本文了,本文分析了absolute的一些另类的应用,即未脱离DOM tree的一些应用。提供详尽的插图以及demo页面,希望对您的学习有所帮助

阅读全文…

网页布局思想浅议-淘宝新版首页为实例

2010年01月29日,星期五

本文将探讨网页布局思想,从布局方法入手,分析各自优点,再升华为布局思想,并在布局思想的指导下进行布局优势的整合,以淘宝新版首页为实例进行演示,用以表达本文的目的:希望有即使是固定布局,也要有自适应布局的意识。本文提供尽可能多的插图,以及demo页面,希望对您的学习有所帮助。

阅读全文…

回流与重绘:CSS性能让JavaScript变慢?

2010年01月23日,星期六

CSS书写与性能
我之前已经翻译过一篇关于reflow的文章,您有兴趣可以看看(点击这里)。我觉得这个东西还挺重要,所以这里又翻译了一篇文章。对于这里翻译的这篇文章,其实已经有一些介绍,但只是部分内容,这里翻译的则是全文。希望对回流的认识有进一步的提高与重视。

阅读全文…