今天无聊在看gmail首页的html代码时,看到了关于页头里的“欢迎使用 Gmail”这一行字的UI设计代码,由此看到为了性能,真正的好网站是怎么优化的:
在上面的这段html页面中,gmail使用了一个table,代码如下:
<tr>
<td nowrap="nowrap">
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#c3d9ff" align="center" style="margin-bottom: 5px;">
<tbody><tr>
<td valign="top" align="left" class="bubble tl
"><div class="SPRITE_corner_tl"></div></td>
<td style="padding: 5px 0pt; font-family: arial; text-align: left; font-weight: bold;" rowspan="2" class="bubble"><b>欢迎使用 Gmail</b></td>
<td valign="top" align="right" class="bubble tr
"><div class="SPRITE_corner_tr"></div></td>
</tr>
<tr>
<td valign="bottom" align="left" class="bubble bl
"><div class="SPRITE_corner_bl"></div></td>
<td valign="bottom" align="right" class="bubble br
"><div class="SPRITE_corner_br"></div></td>
</tr>
</tbody></table>
</td>
</tr>
为了既考虑UI效果,又能避免带来速度上的影响,用了最少的图片来实现弯角效果(图片在div的SPRITE_corner
CSS中),从而避免设计成一个大的图片而影响用户浏览器下载资源的速度。
从我这个非UI设计人员的视角来看,不知道GMAIL这样设计的初衷是否是这样的,如果不是的话,请高手赐教。