3个比较有用的网页制作技巧

一、CSS内联声明风格的演变

对于如下的CSS代码：

```css

h2 {font-size:18px; border:1px solid blue; color:000; background-color:FFF;}

h2 { font-size:18px; border:1px solid blue; color:000; background-color:FFF; }

```

将样式集中在一行内，虽然看起来更加紧凑，但对于阅读和理解来说，分散的声明方式更有利于快速定位到特定的样式规则。过去我也曾偏好将所有的样式写在同一行，但后来发现，分块的声明方式更有利于代码的管理和阅读。

二、代码分块，管理有道

对于CSS代码的分块书写，不仅能增加代码的可读性，而且能使代码更加结构化。比如狼蚁网站SEO优化的样式表：

```css

content {float:left;}

content p { … }

sidebar {float:left;}

sidebar p { … }

footer {clear:both;}

sidebar p { … }

```

通过分块，我们可以更快速地定位到特定元素的样式定义，这在排查问题时尤为重要。

三、浏览器兼容性问题

现代Web开发的一个挑战就是跨浏览器的兼容性问题。为了简化开发流程，我们应该优先考虑支持版本的浏览器，放弃对旧版本IE的支持，如IE5和IE5.5。这样做可以节省大量时间，并减少复杂性。

以网易新版主页为例，其CSS代码干净利落，没有任何的!important或Hack，但在FF和IE中的显示效果依然出色。通过合理的使用CSS，我们可以避免过多的Hack，虽然可能需要更多的调试时间，但长远来看，这是值得的。

在涉及浮动元素时，要确保容器内的内容与其容器保持一致。内容过多可能会导致布局混乱。同样，使用负值margin调整位置时也要小心，避免内容滑出容器。

当页面中有两个浮动元素，且左容器内容过多时，可能会导致右侧容器布局出现问题。这通常意味着你的margin、宽度或padding设置存在问题。在FF中可能体现不出来，但在IE中，使用overflow:hidden或overflow:scroll可以避免内容冲出容器。为了确保页面的稳定和兼容性，我们需要对CSS的每一个细节都保持警惕。