巧用CSS换行让网站更美观

网络整理 - 07-27

CSS换行可以使你的页面看起来更加美观。如下图

这样看起来美观过了,是怎么做到的呢,看下代码:

li { display:inline; float:left}
a { padding: 0 1.2em; display: block; white-space:nowrap}

代码解释:display:inline意图在于消除IE6双倍margin的bug,white-space:nowrap忽略所有空格回车等元素,目的是强制“文字在该块里”不换行。如果不强制换行,当宽度不合适时就会出现下图症状。

除此之外,还有其他解决方案,比如让上面的 【a】也浮动,这样它的宽度,就变成自适应。

总结:

对于同样的效果,通过CSS可以有很多种实现方法,到底哪种更优秀,需要长时间经验积累。

下一篇我正在策划“CSS系统布局和排版”,意思就是站在整个网站层面上,统一布局,而不单是针对一个页面。

为什么有这个打算。现在很多站,尤其是CMS建起来的,往往页面优化不够,造成浏览速度不够快。很多站长抱怨空间速度不行,想花大价钱买好空间。其实完全可以从页面优化入手。