用CSS设计高体验的表单显示效果示例

<style type="text/css">
.input1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
font-family:verdana;background-color:#F0F8FF;font-size: 12px;
border: 1px solid #333333;}
</style>

<table cellspacing=2 cellpadding=0 width=300 border=0>
<tr>
<td><font class="en1">姓名:</font> </td>
<td><input size=40 name=name class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">邮箱:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor""></td>
</tr>
<tr>
<td><font class="en1">网址:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">主题:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">内容: </font> </td>
<td><textarea name=message rows=5 cols=35 class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor""></textarea></td></tr></table><script language="Javascript">
var now = new Date();
document.write("<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"" border="0" alt="" width="0" height="0">");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border="0" width="0" height="0"/>
</noscript>

以下是引用片段：
<style type="text/css">
.input1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
font-family:verdana;background-color:#F0F8FF;font-size: 12px;
border: 1px solid #333333;}
</style>
<table cellspacing=2 cellpadding=0 width=300 border=0>
<tr>
<td><font class="en1">姓名:</font> </td>
<td><input size=40 name=name class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">邮箱:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor""></td>
</tr>
<tr>
<td><font class="en1">网址:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">主题:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor"">
</td>
</tr>
<tr>
<td><font class="en1">内容: </font> </td>
<td><textarea name=message rows=5 cols=35 class="input1" onblur="this.className="input1"" onfocus="this.className="input1-bor""></textarea></td></tr></table>