[Google Style系列] 加框效果

Google的网页别具风格,简单,一眼就可以看出分类而又不失美观.我暂且称这个网页的风格为Google Style吧(自己觉得很合适),查看了它的源代码,研究了一番,希望以后借助这种风格来设计自己的网页.

 

Google Style No1: 加框效果

 

原处在 http://labs.google.cn/ 右边的”实验室毕业生”这个框.

 

思路:

实现上这是一个table,而且只有一行,一列.也就是一个tr,一个td.而在这个单元格中又是一个table,实现边框效果是利用两个table背景色的巧妙叠加,类似在同心圆的外层涂上颜色,

其中有两个不常用的参数解释一下:

 

cellspacing:

The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table.

单元格与表格外边缘以及单元格之间的空格数

 

 

cellpadding:

The cellpadding attribute controls the amount of space between the edge of a cell and its contents, which by default is 1 pixel.

单元格内部 单元格边缘与单元格内容之间的空格数,默认为1个像素

 

下面请看代码,为使效果明显,将边框改成了红色

< table  border ="0"  cellpadding ="0"  cellspacing ="1"  width ="100%"  align ="right"  bgcolor ="red" >   
     <!--   bgcolor="red" 指定框架颜色  -->
     <!--   cellspacing="1"  指定框架的粗细程度  -->
    
    
         < tr >  
           < td  bgcolor ="dae4fc" >  
               < table  width ="100%"  cellpadding ="5"  cellspacing ="0"  bgcolor ="#ffffff" >  
                  
               < tr >  
                 < td  colspan =3  nowrap >< b > 实验室毕业生 </ b ></ td >  
               </ tr >
              
               <!--                 
              1.        <td colspan="3">
                                            tells the browser to make the cell occupy the same horizontal space 
                                            as three cells in rows above or below it. 
                                            The browser flows the contents of the cell to occupy the entire space. 
                                
                            2.         nowrap:
                                    将单元格内容放在一个line上,除非使用<br>或<p>迫使其换行                    
                             -->
               
               < tr >
                 < td  valign ="top" >< img
                                         src ="http://labs.google.com/images/yellow.gif"  width ="16"
                                        height ="16"  alt ="O" >
                             </ td >  
                 < td >< font  size ="-1" >< a
                                         href ="http://www.google.com/psearch/?hl=zh-CN" >< b > 个性化搜索 </ b ></ a >   < br >  
                  根据您的兴趣获得个性化的搜索结果 </ font >     
                   <!--   size="-1" 实现了这个超链接有下划线的效果  -->
                  </ td >  
               </ tr >                                         
                     </ table >                 
                 </ td >  
     </ tr >  
</ table >