建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
CSS
* { margin: 0; padding: 0; } body { text-align: center; } input[type="text"] { padding: 4px 6px; } #login { margin: 10px auto 10px; text-align: left; } fieldset { width: 230px; margin: 20px auto; font-size: 12px; padding: 8px 24px; } legend { font-weight:bold; font-size:20px; margin-bottom:12px;} label { width: 200px; height: 26px; line-height: 26px; text-indent: 6px; display: block; font-weight: bold; } #name, #password { border: 1px solid #ccc; width: 160px; height: 22px; margin-left: 6px; padding-left: 28px; line-height: 20px; } #name { background: url(images/name.gif) no-repeat 4px center; } #password { background: url(images/password.gif) no-repeat 4px center; } .button_div { text-align: center; margin: 6px auto; }
-
HTML
<form action="" method="post" class="form" id="login"> <fieldset> <legend>用户登录</legend> <label for="name">姓名</label> <div> <input name="name" type="text" id="name" value=""> </div> <label for="password">密码</label> <div> <input name="password" type="text" id="password" value=""> </div> <div class="button_div"> <input type="image" src="images/login1.gif"> </div> </fieldset> </form>