【 以下文字转载自 Google 讨论区 】
发信人: modico (modico), 信区: Google
标  题: gmail client code review,part 14
发信站: 水木社区 (Tue Oct 24 09:36:44 2006), 站内

gmail的有关用户界面的2个细节：

1、圆角矩形框。圆角，在垂直的边线相交处，在gmail界面上很常见，大多数不是用图片实现，而是这样：一个3行table，首末行用来造圆角，中间行放置内容。首末行都各自2个像素高，首行第一个像素行的宽度比table宽度左右各少或只一边少，2个像素；第二个像素行的宽度比table宽度左右各少或只一边少，1个像素；这样总体看来，是造了一个45度的斜坡，看上去就成圆角了。为了减少代码量，google改造了一个单字符的HTML元素B的一些默认样式，用它来完成这个圆角布局的任务：

<TABLE class=cv cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<B class=rnd>
<B class=rnd1l></B>
<B class=rnd2l></B>
</B>
<TR class=an>
<TD>
<B id=comp class=lk style="MARGIN-LEFT: 8px">
<B>撰写新邮件</B>
</B>
<TR>
<TD>
<B class=rnd>
<B class=rnd2l></B>
<B class=rnd1l></B>
</B>
</TR>
</TBODY>
</TABLE>

<style>
B.rnd /* weight=11 */
{
BACKGROUND: #fff;
DISPLAY: block;
FONT-SIZE: 1px
}

B.rnd B
{
DISPLAY: block;
HEIGHT: 1px;
OVERFLOW: hidden
}

B.rnd1 /* weight=11 */
{
MARGIN: 0px 2px
}

B.rnd2 /* weight=11 */
{
MARGIN: 0px 1px
}

B.rnd1l /* weight=11 */
{
MARGIN: 0px 0px 0px 2px
}

B.rnd2l /* weight=11 */
{
MARGIN: 0px 0px 0px 1px
}
</style>

2、添加附件。gmail里添加附件的形式不是通常的"浏览..."按钮，而是一个链接，大概他跟我们一样都对不能定制这个按钮的文字内容感到恼火，索性用了一个链接。<input type=file>的值不能通过程序设置，必须有用户交互过程，这是出于安全性考虑；那么如何不显示传统按钮而弹出文件选择对话框呢？google放置了一个隐藏的<input type=file>，然后在用户点击链接后，用程序模拟点击这个隐藏的文件域，结果就弹出了文件选择对话框。根据当前附件添加的状态，可以动态修改链接文字为“添加附件”或“再添加一个附件”。

<DIV>
<DIV>
<SPAN></SPAN>
<INPUT name=f_etnml82j style="VISIBILITY: hidden; POSITION: absolute" type=file onchange=top.js._CM_OnAttach(window,this) size=50>
<SPAN class=s style="DISPLAY: none">
<SPAN id=da_f_etnml82j class=lk>删除</SPAN>
</SPAN>
</DIV>
</DIV>
<DIV>
<SPAN id=at class=lk>添加附件</SPAN>
</DIV>
--
FROM 218.249.84.*