【示例】
友情提示:本示例效果没有考虑移动设备,适合在PC端浏览。
-
HTML
<form id="login-form" action="#" method="post"> <fieldset> <legend>登录</legend> <label for="login">Email</label> <input type="text" id="login" name="login"> <div class="clear"></div> <label for="password">密码</label> <input type="password" id="password" name="password"> <div class="clear"></div> <label for="remember_me" style="padding: 0;">记住状态?</label> <input type="checkbox" id="remember_me" name="remember_me"> <div class="clear"></div> <br> <input type="submit" style="margin: -20px 0 0 287px;" class="button" name="commit" value="登 录"> </fieldset> </form> <p align="center"><strong>© www.xxxxxx.cn</strong></p>
-
CSS
* { margin: 0; padding: 0; } body { font-family: Georgia, serif; background: url(login-page-bg.jpg) center -50px no-repeat #c4c4c4; color: #3a3a3a; } .clear { clear: both; } form { width: 406px; margin: 120px auto 0; } legend { display: none; } fieldset { border: 0; } label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; } input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px; color: #3a3a3a; font-family: Georgia, serif; } input[type=checkbox] { width: 20px; margin: 0; display: inline-block; position:relative; top:-3px; } .button { background: url(button-bg.png) repeat-x top center; border: 1px solid #999; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px; color: black; font-weight: bold; font-size: 13px; width: 70px; } .button:hover { background: white; color: black; }