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

最新推荐文章于 2023-06-10 11:14:20 发布

weixin_30608131

最新推荐文章于 2023-06-10 11:14:20 发布

阅读量226

点赞数

原文链接：http://www.cnblogs.com/zuley/archive/2011/12/08/2280657.html

版权

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

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

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

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

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

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

   <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，文章原文地址：新浪博客设计制作分析（二）