<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>  
    <style type="text/css">  
        body  
        {  
            font: normal 12px/17px Arial;  
        }  
        div  
        {  
            padding: 2px;  
        }  
        input, textarea  
        {  
            width: 12em;  
            border: 1px solid #888;  
        }  
        .focus  
        {  
            border: 1px solid #f00;  
            background: #fcc;  
        }  
    </style>  
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            $("input").focus(function () {  
                $(this).addClass("focus");  
            }).blur(function () {  
                $(this).removeClass("focus");  
            });  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <fieldset>  
        <legend>个人基本信息</legend>  
        <div>  
            <label for="username">  
                名称:</label>  
            <input id="username" type="text" />  
        </div>  
        <div>  
            <label for="pass">  
                密码:</label>  
            <input id="pass" type="password" />  
        </div>  
        <div>  
            <label for="msg">  
                详细信息:</label>  
            <textarea id="msg" rows="2" cols="20"></textarea>  
        </div>  
    </fieldset>  
    </form>  
</body>  
</html>