2006年07月01日

下面这些文章详细介绍了CSS实战中,经常碰到的难题,以及这些难题的标准解决方案:

  • Box Model Hack 盒模型秘计

    盒模型是导致CSS难用,并招致不满声音的最大元凶。主流浏览器理解盒模型的方式不同,造成设计师只能利用Hack手段摆平这些区别。这篇文章详细的介绍了盒模型的概念,各个浏览器处理盒模型的区别,以及数种解法,很全面。延伸阅读 Alternate Box Model Hacks, Box Model Hack

  • Global White Space Reset 全局空白重置 (必读)

    我最喜欢的文章,因为它太实用了。使用这种技巧,CSS不再是那么痛苦的噩梦。这个技巧背后的思想是“默认优于配置”,你只需要很少量的细节微调工作,就可以得到很完美的效果,它不但简化了CSS代码,还有浏览器兼容性强的优点。

  • Efficient CSS with shorthand properties 高效CSS简写属性

    这篇文章汇总了常见的CSS简写技巧,使用简写技巧,不但减少了字节,也使CSS的代码可读性得到提高。比如:

    background-color:#f00;
    background-image:url(background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0 0;
    

    可以简写为:

    background:#f00 url(background.gif) no-repeat fixed 0 0;
  • Sliding Doors of CSS CSS滑动门

    页签导航(tabbed navigation)技术现在应用很普遍,本文详细介绍了如何使用滑动门技术制作图片页签导航,图文并茂,非常详尽。

  • Avoiding Classitis 避免class爆炸 (必读)

    class爆炸可能是CSS使用过程中最容易犯的错误了。典型的代码类似于:

    〈div class="article"〉
     〈h3 class="article-title"〉我的自白〈/h3〉
     〈p class="article-brief"〉我坦白,我犯了一个错误...〈/p〉
    〈/div〉
    

    这段代码的作者似乎有兴趣给每一个元素都加上类,很多时候这是毫无必要的,并且还有浪费带宽,降低可维护性等诸多缺点,通过“全局空白重置”技术和属性继承技术,类爆炸现象可以得到明显的控制。延伸阅读 Div Mania

  • Turning a list into a navigation bar 用列表制作导航条

    一步步教你制作CSS导航条。 没啥说的,每个人都会用到。延伸阅读 Taming Lists

  • How To Clear Floats Without Structural Markup 怎样不用结构化标签就清除浮动

    传统技术中清除浮动一般用{clear: both;} ,这种技术有很多缺点,比如违背直觉、需要添加一个额外的元素、浏览器兼容性不好等。本文介绍了一种新型的技术,克服了这些缺点。图文并茂,非常详尽。

  • Faux Columns 自适应高度栏目

    几乎每个使用CSS的同学都会用div来为网页布局(排版),最终很多同学都会碰到这个问题:怎样使几个div栏目等高?这个看似易如反掌的问题却能把你弄疯,除非你知道这里介绍的技巧。

  • Making the Absolute, Relative 应用绝对和相对属性

    绝对属性和相对属性似乎比较难理解,不知道有什么用,这篇文章通过解释作者的一个实战:自动保持header中导航条和Logo的距离,详细的给我们介绍了绝对和相对属性的原理和应用,图文并茂。

  • Introducing the CSS3 Multi-Column Module 介绍CSS3标准中的多列模块

    在table的时代里,定位元素的手段主要是利用table和透明sizer图片。当前CSS的时代中,定位让位给了各种CSS属性。CSS很好的替代了sizer图片,却对布局支持不足。因为没有CSS语言内建的高级布局支持,同学们不得不使用div加float,clear属性来拼凑出所需的布局,又因为目前各种主流浏览器对盒模型和浮动的理解各有不同,使得CSS排版问题成了一个噩梦:不通过一定的hack手段,你很难实现想象中的设计。在这种背景下,一些同学(比如我自己),开始重新思考table的价值,并给予table在布局上的贡献以应有的尊重。然而这并不是终极解决方案,在未来的CSS标准中,排版应该在语言层级上得到支持,Multi-Column就是CSS3标准中推出的一种排版辅助模块,阅读本文有助于同学们更好的理解CSS版式问题,站在高一层的台阶上设计自己的作品。

[本文实时更新]