[Google style系列] 标题效果 Google网页的标题非常醒目,效果很多了,就不说明出处了. 思路: 这个标题的效果也是个table,这里巧妙的是,Google用一个图片(并非实实在在的图片),来控制一个单元格的height,width,通过设置其中某一单元格的height = 1,实现了一根细线的效果. 下面是代码: < TABLE cellSpacing =0 cellPadding =0 width ="100%" border =0 > <!-- 修改width可以控制标题的宽度 --> < TR > < TD colSpan =2 >< IMG height =1 alt ="" width =1 ></ TD > </ TR > < TR bgColor =#3366cc > < TD >< IMG height =1 alt ="" width =1 ></ TD > </ TR > <!-- 上面一根深蓝色的线 --> < TR bgColor =#e5ecf9 > <!-- 浅蓝色底纹 --> < TD style ="PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; PADDING-TOP: 2px; FONT-FAMILY: arial,sans-serif" > < B > The Title: You can certainly change it ! It is useful and convenient ! </ B > <!-- 在这里输入标题名字 --> </ TD ></ TR > < TR > < TD colSpan =2 >< IMG height =5 alt ="" width =1 ></ TD > </ TR > </ TABLE >