纯CSS表单显示效果

  •   2009-07-31/13:37
  • <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'">

    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多