点评:简洁蓝白风格的登录模板,考生学号、考生密码等输入字段,经测试在非IE的状态下浏览效果更佳,特色是纯css3打造,无js无图片,绝对适合简单风格的你
效果图:
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)</TITLE><META content="text/html; charset=unicode" http-equiv=Content-Type><STYLE>h1, h2, h3, h4, h5, h6{font-weight:normal;margin:0;line-height:1.1em;color:#000;}h1{font-size:2em;margin-bottom:.5em;}h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}h4{font-size:1.25em;margin-bottom:.6em;}h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}ul, ol, dl{padding:0;}ul ul, ul ol, ol ol, ol ul, dd{margin:0;}li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;}blockquote, dd{padding:0 0 0 2em;}pre, code, samp, kbd, var{font:100% mono-space,monospace;}pre{overflow:auto;}abbr, acronym{text-transform:uppercase;border-bottom:1px dotted #000;letter-spacing:1px;}abbr[title], acronym[title]{cursor:help;}small{font-size:.9em;}sup, sub{font-size:.8em;}em, cite, q{font-style:italic;}img{border:none;}hr{display:none;}table{width:100%;border-collapse:collapse;}th,caption{text-align:left;}form div{margin:.5em 0;clear:both;}label{display:block;}fieldset{margin:0;padding:0;border:none;}legend{font-weight:bold;}input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}/* base */body, table, input, textarea, select, li, button{font:1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;line-height:1.5em;color:#444;}body{font-size:12px;background:#c4f0f1;text-align:center;}/* login form */#login{margin:5em auto;background:#fff;border:8px solid #eee;width:500px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 10px #4e707c;-webkit-box-shadow:0 0 10px #4e707c;box-shadow:0 0 10px #4e707c;text-align:left;position:relative;}#login a, #login a:visited{color:#0283b2;}#login a:hover{color:#111;}#login h1{background:#0092c8;color:#fff;text-shadow:#007dab 0 1px 0;font-size:14px;padding:18px 23px;margin:0 0 1.5em 0;border-bottom:1px solid #007dab;}#login .register{position:absolute;float:left;margin:0;line-height:30px;top:-40px;right:0;font-size:11px;}#login p{margin:.5em 25px;}#login div{margin:.5em 25px;background:#eee;padding:4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-align:right;position:relative;}#login label{float:left;line-height:30px;padding-left:10px;}#login .field{border:1px solid #ccc;width:280px;font-size:12px;line-height:1em;padding:4px;-moz-box-shadow:inset 0 0 5px #ccc;-webkit-box-shadow:inset 0 0 5px #ccc;box-shadow:inset 0 0 5px #ccc;}#login div.submit{background:none;margin:1em 25px;text-align:left;}#login div.submit label{float:none;display:inline;font-size:11px;}#login button{border:0;padding:0 30px;height:30px;line-height:30px;text-align:center;font-size:14px;Font-Weight:bold;color:#fff;text-shadow:#007dab 0 1px 0;background:#0092c8;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;cursor:pointer;}#login .forgot{text-align:right;font-size:11px;}#login .back{padding:1em 0;border-top:1px solid #eee;text-align:right;font-size:20px;}#login .error{float:left;position:absolute;left:95%;top:-5px;background:#890000;padding:5px 10px;font-size:11px;color:#fff;text-shadow:#500 0 1px 0;text-align:left;white-space:nowrap;border:1px solid #500;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 5px #700;-webkit-box-shadow:0 0 5px #700;box-shadow:0 0 5px #700;}</STYLE><STYLE id=wiz_custom_css type=text/css>body{font-family: 微软雅黑,Georgia,Helvetica,Arial,sans-serif,宋体,serif;font-size: 10.5pt;line-height: 1.5;}html, body, div, span, applet, object, iframe, p, blockquote, pre,abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{color: inherit;background-color: inherit;}h1 {font-size:1.5em;font-weight:bold;}h2 {font-size:1.4em;font-weight:bold;}h3 {font-size:1.3em;font-weight:bold;}h4 {font-size:1.2em;font-weight:bold;}h5 {font-size:1.1em;font-weight:bold;}h6 {font-size:1.0em;font-weight:bold;}img {border:0;}</STYLE><META name=GENERATOR content="MSHTML 9.00.8112.16421"></HEAD><BODY><FORM id=login method=post action=""><H1><STRONG>考生登录</STRONG></H1><DIV><LABEL for=login_username><STRONG>考生学号:</STRONG></LABEL> <INPUTid=login_username class="field required" title=请输入您的用户名 name=username> </DIV><DIV><LABEL for=login_password><STRONG>考生密码:</STRONG></LABEL> <INPUTid=login_password class="field required" title=密码不能为空 name=passwordtype=password> </DIV><DIV class=submit><BUTTON type=submit>登录</BUTTON> </DIV></FORM></BODY></HTML>