纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)

点评：简洁蓝白风格的登录模板，考生学号、考生密码等输入字段，经测试在非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> <INPUT

id=login_username class="field required" title=请输入您的用户名 name=username> </DIV>

<DIV><LABEL for=login_password><STRONG>考生密码：</STRONG></LABEL> <INPUT

id=login_password class="field required" title=密码不能为空 name=password

type=password> </DIV>

<DIV class=submit><BUTTON type=submit>登录</BUTTON> </DIV></FORM></BODY></HTML>

上一篇：html之简单网页表格制作示例介绍
下一篇：常见浏览器兼容性问题与解决方案css篇