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