[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>