用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>