用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>
运行代码复制代码另存代码

　　访问经典网站建设类教程>>