新浪博客设计制作分析（二）

这节主要是讲新浪博客的DIV+CSS

说到这里不得不说一下关于这个的一个概念了，那就是压缩代码。人们做一件事不会无目的 的去做，压缩代码的目的就是让网站变得更小。真的是这样吗？笔者去观察了下各大网站

发现无论是新浪、百度、还是网易，他们的代码都保留了注释，并没有压缩。当压缩代码所获得的收益超过不压缩的收益那自然是选择压缩了，但大部分的事实不是这样，都在跟风而已。所以在选择时候要慎重，如果你的网站经常要修改，时常添加功能。那你压缩代码就得不偿失了，这时候可以选择Gzip压缩,同样可以起到压缩网页的效果。如果你的网站不需要修改，一年到头都是这个样子，那可以压缩下节省空间，加快速度。

说了这么多废话，现在正式开讲。

新浪博客用的是很通用的三列布局，其它的不多说，这里讲个大家可能感兴趣的效果。就是等高布局。这个也有很多种方法可以实现，一种是通过边距实现的。我并不推荐这个方式，边距是个危险的东西。特别是对IE来说。还有一种也就是我这里讲的，新浪博客所使用的一个实现方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style> .w250{width:250px;} .w440{width:440px;} .w960{width:960px;} .fl{float:left;} .fr{float:right;} .part{background:url(part-bg.gif) repeat-y; width:960px; margin:0 auto;} .part-bottom{ clear:both; height:1px; font-size:0px; line-height:1px; background:url(part-bottom-bg.gif) no-repeat;} </style> <div class="part"> <div class="fl w250 mr10"></div> <div class="fl w440"></div> <div class="fr w250"></div> <div class="part-bottom"></div> </div>

这个方法的原理是在这个部件的最外层class=”part”使用一个背景图像，通过垂直平铺可实现等高的背景。从而达到看起来是等高的布局了。然后所有浮动的后面加个class=”part-bottom”用来清除浮动并添加边框，这里有个不能忽略的问题，那就是必须将字体大小，行高都设置为0。否则会这个DIV会被撑开

文笔、知识有限，只能写到这样子了

新浪博客设计制作分析（一）

首发自21cpu，文章原文地址：新浪博客设计制作分析（二）