[Google style系列] 标题效果

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