Pages

Sunday, April 25, 2010

勿忘table,table在页面布局中的用法

DIV+CSS的布局格式不是一天两天了,可别被这流行的趋势冲昏了头脑,在很多时候table式的布局是相当有用的,这并不是复古,也不是不懂进步,至少现在,还不能完全把它抛到脑后。在网页布局里面,感觉有两个地方用起表格来屡试不爽。 

1.100%宽,部分自适应宽度式的页面布局
这种页面布局方式是现在页面布局里面用得最多的,像Google Reader,blogger,维基百科,Gmail,QQ邮箱等等都是这种方式的布局。这种布局的好处就在于最大化利用屏幕空间展示更多信息给用户,在此同时,固定操作栏的宽度以保证操作的可用性。
那么,table给这种页面布局带来什么好处呢,DIV为什么不能完成这种布局呢?首先,DIV是可以完成的,不过很麻烦,而利用table 就方便得多,区别在于两者在宽度自适应和100%宽的实现上有差异。
  • DIV左右布局中,左部分固定为200px,剩余部分宽度自适应,这就很难办,如果设置右半部分DIV的宽度为100%的话,自身宽度会变为整个屏幕宽度,并且自己撑开位于左半部分下方,要完成布局,需要用到Javascript。
  • 而table并不会发生这种情况,如果table分作左右两列,左列的td宽度固定为200px,当把整个table的宽度设置为100%时,右边的td部分自动自适应全屏宽,完成布局的目的。不管是可以在横向的宽度自适应上利用table,竖向的高度自适应也能用上。
NOTE:图上传不了,搞得云里雾里的。
2.多行多列对齐排列
这方面的布局经常被用在多列列表布局时,可能会想用li标准的列表先呈现纵向列表,或者直接利用div充当每一横行,然后再分割每个li或者div元素,这样的方式不是很好,因为每个横行里尼可能要用多个span标签或者div:float的标签去划分,如果是用了span,宽度和高度由于它是个行内元素无法调整,只能用padding或者margin调整。如果是利用float的div,还需要用另一个空的div去clear。当然,如果肯花时间的话,可以把所有浏览器都过一遍,当遇到那个已经死掉的IE6时,也需要多花些功夫。
如果把时间浪费在调试上,还不如利用table去简化它,table在各个浏览器中的实现都是一样的(除了td的行高)。而且天生据来的列和行的划分,使得对齐元素是小菜一碟。

DIV+CSS的流行并不是用来完全取代table布局的,它的存在带来了很多地位的好处,在这里就不一一列举了。请勿忘记table,而是要利用他们双方的优势,节约开发时间和提高开发效率。DIV+CSS不是万能的。

Sunday, April 18, 2010

小记

从印度回来有一阵子了,回来之后总是做些文档工作,除此就是搞什么测试工具,不管怎么干都提不起精神来,好像是整个人老了,吃喝等闲那种感觉。虽然知道这不是个办法,但是想找点正事干却被些碎小的事搞得断断续续的,久而久之,正事业懒得管了。

等印度佬过来等了差不多1个月了,现在一点消息也没有,估计又遇到类似“5分钟”的事情。来了还要接受培训,又要等很久才能正式开始。看来,qi.wang说的投资需要代价是这么一回事。不是不想做事,是没事可做,不是做不了事,是不被信任去做。杜总曾经说过,小事你是让做了,比如说成千上万的内部垃圾项目,各种杂志刊物设计,但给事做不给工具同样做不成。太不协调了。公司高层和我们这些底层跑龙套的之间被一群脑残,弱智外加非专业的HR+行政+财务隔断了(个别人除外,但老大肯定在其中)。我回来从报账和他们新补助政策的制定已经看出来了。

昨天Guo打来打算跳了算了,他同学找了个工作,工资4开头在成都已经很爽了,他打算去。难道我不心动么,可是那万恶的Binding和长时间的非专业的事做多了,哪里还会有公司要哦。心想在现在这个公司发展还有很多机会来安慰自己,其实是担心什么都已经不会了,C#低水平,Java就没有特别深入过,加上没有什么项目经验,之前的小打小闹算个P哦。

Guo的同事也是前段时间悄悄离开了,一走就是好几个,听到后真是有点心凉,拿着这卑微的工资,个税都省了 。唯一图的就是突然有一天在这个号称在被投资中的公司有点什么在别的已经NB的公司里得不到的机会,可长期的等待让我懒惰,消极,失望。

哎,等到这个该死的Binding结束后,如果还没有什么机会,我也要好好为我真想做的事做出点努力。

又在用错别字抒发情感。