热血洒红尘

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

这节主要是讲新浪博客的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,文章原文地址:新浪博客设计制作分析(二)

posted on 2011-12-08 13:56  热血洒红尘  阅读(694)  评论(0编辑  收藏  举报