|
纯CSS表单显示效果
发表日期:2008-8-18
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的纯CSS表单显示效果 - 站在巨人肩膀上</title> <style type="text/css"> body{ font-family: verdana,font-size: 12px;color: #FFFFFF;background-color:#ffffff} .en1 { font-size: 10px;font-family: Verdana } .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> <style type="text/css"> <!-- .en1 {font-size: 10px;font-family: Verdana } .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; } --> </style> </head> <body> <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'">
|
|
上一篇:CSS文件可维护、可读性提高指南四则
人气:689
下一篇:用CSS实现圆角框框
人气:1029 |
浏览全部CSS的内容
Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐
|
|