待着无聊,发现Google账户的那个登陆table真好看,就仿照着写了一个。
效果如下:
html代码:
还有一个标题风格:(这里就看不到了,不过就是那个圆角矩形)
没准以后就抄这2个风格了,hoho
效果如下:
|
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>
<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>
<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