导航

写了一个Google登陆风格的table

Posted on 2006-09-15 18:13  InterMa  阅读(518)  评论(0编辑  收藏  举报
待着无聊,发现Google账户的那个登陆table真好看,就仿照着写了一个。
效果如下:

Context


html代码:
        <table cellspacing="0" cellpadding="2" align="center" border="1px" bordercolor="#C3D9FF">
            
<tr>
                
<td align="center" valign="middle">
                    
<table border="0" bgcolor="#E8EEFA">
                        
<tr>
                            
<td width="400px" height="300px">
                                Context
                            
</td>
                        
</tr>
                    
</table>
                
</td>
            
</tr>
        
</table>

还有一个标题风格:(这里就看不到了,不过就是那个圆角矩形)
.bubble {background-color:#C3D9FF}.tl {padding: 0; width: 4; text-align: left; vertical-align: top}.tr {padding: 0; width: 4; text-align: right; vertical-align: top}.bl {padding: 0; width: 4; text-align: left; vertical-align: bottom}.br {padding: 0; width: 4; text-align: right; vertical-align: bottom}     

        
<table border = "0" cellspacing="0" cellpadding="0">
            
<tbody>
                
<tr>
                    
<td class="bubble tl" valign="top" align="left">
                        
<img class="c" alt="" src="https://mail.google.com/mail/images/corner_tl.gif"></td>
                    
<td bgcolor="#C3D9FF" style="padding-right: 0px; padding-left: 0px; font-weight: bold;
                        padding-bottom: 3px; padding-top: 3px; font-family: arial; text-align: left"

                        rowspan
="2">
                        
<b>欢迎使用 Gmail</b></td>
                    
<td class="bubble tr" valign="top" align="right">
                        
<img class="c" alt="" src="https://mail.google.com/mail/images/corner_tr.gif"></td>
                
</tr>
                
<tr>
                    
<td class="bubble bl" valign="bottom" align="left">
                        
<img class="c" alt="" src="https://mail.google.com/mail/images/corner_bl.gif"></td>
                    
<td class="bubble br" valign="bottom" align="right">
                        
<img class="c" alt="" src="https://mail.google.com/mail/images/corner_br.gif"></td>
                
</tr>
            
</tbody>
        
</table>

没准以后就抄这2个风格了,hoho