咨询热线
137 1731 25507×24小时服务热线
微信交流
终于等到你，还好我没放弃
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--早于IE7的版本-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" lang="en"><![endif]--><!--IE7-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]--><!--IE8-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]--><!--大于IE8的版本-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>登录表单样式代码</title>
<style type="text/css">
body {font-size:12px;line-height:20px;font-family:Verdana,sans-serif;color:#404040;background:#ebc9a2;}
input,textarea,select,label {font-family:inherit;font-size:12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.login {
width:200px;
margin:20px auto;
padding:18px 20px;
background:#3f65b7;
border:1px solid #172b4e;
border-bottom-color:#142647;
border-radius:5px;
/*
background-clip属性规定背景的绘制区域，默认值border-box
IE8以及更早的版本不支持background-clip属性。
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
*/
background-clip:padding-box;
/*
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
*/
background-image:-webkit-radial-gradient(ellipse cover, #437dd6, #3960a6);
background-image:-moz-radial-gradient(ellipse cover, #437dd6, #3960a6);
background-image:-o-radial-gradient(ellipse cover, #437dd6, #3960a6);
background-image:radial-gradient(ellipse cover, #437dd6, #3960a6);
-webkit-box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 0 1px 1px rgba(255,255,255,0.1),
0 2px 10px rgba(0,0,0,0.5);
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 0 1px 1px rgba(255,255,255,0.1),
0 2px 10px rgba(0,0,0,0.5);
}
.login > h1 {margin-bottom:20px;font-size:16px;color:white;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.4)}
.login-input {
display:block;width:100%;height:37px;margin-bottom:20px;padding:0 9px;color:white;
text-shadow:0 1px black;
background:#2b3e5d;
border:1px solid #15243b;
border-top-color:#0d1827;
border-radius:4px;
background-image:-webkit-linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.2) 20%, rgba(0,0,0,0));
background-image:-moz-linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.2) 20%, rgba(0,0,0,0));
background-image:-o-linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.2) 20%, rgba(0,0,0,0));
background-image:linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.2) 20%, rgba(0,0,0,0));
-webkit-box-shadow:
inset 0 1px 2px rgba(0,0,0,1),
0 1px rgba(255,255,255,0.2);
box-shadow:
inset 0 1px 2px rgba(0,0,0,1),
0 1px rgba(255,255,255,0.2);
}
.login-input:focus {
outline:0;
background-color:#32486d;
-webkit-box-shadow:
inset 0 1px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(255,255,255,0.6);
box-shadow:
inset 0 1px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(255,255,255,0.6);
}
/*IE5-8*/
.lt-ie9 .login-input {line-height:35px;}
.login-submit {
display:block;width:100%;height:37px;margin-bottom:15px;font-size:14px;text-align:center;font-weight:bold;
color:#294779;background:#adcbfa;border:1px solid #284473;border-bottom-color:#223b66;
cursor:pointer;border-radius:4px;background-clip:padding-box;
text-shadow:0 1px rgba(255,255,255,0.3);
background-image:-webkit-linear-gradient(to bottom, #d0e1fe, #96b8ed);
background-image:-moz-linear-gradient(to bottom, #d0e1fe, #96b8ed);
background-image:-o-linear-gradient(to bottom, #d0e1fe, #96b8ed);
background-image:linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow:
inset 0 1px rgba(255,255,255,0.5),
inset 0 0 7px rgba(255,255,255,0.4),
0 1px 1px rgba(0,0,0,0.15);
box-shadow:
inset 0 1px rgba(255,255,255,0.5),
inset 0 0 7px rgba(255,255,255,0.4),
0 1px 1px rgba(0,0,0,0.15);
}
.login-submit:active {
background:#a4c2f3;
-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);
box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);
}
.login-help {text-align:center;}
.login-help > a {font-size:11px;text-decoration:none;text-shadow:0 -1px rgba(0,0,0,0.4);color:#d4deef;}
.login-help > a:hover {text-decoration:underline;}
::-moz-focus-inner {padding:0;border:0;}
/*
设置对象文字占位符的样式。
::placeholder伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
需要注意的是，除了Firefox是::[prefix]placeholder，其他浏览器都是使用::[prefix]input-placeholder
Firefox支持该伪元素使用text-overflow属性来处理溢出问题。
*/
::-moz-placeholder {color:#bcc0c8 !important;}
::-webkit-input-placeholder {color:#bcc0c8;}
:-ms-input-placeholder {color:#bcc0c8 !important;}
</style>
</head>
<body>
<form class="login" onsubmit="return false">
<h1>wangzhanchengxu</h1>
<input type="email" name="email" class="login-input" placeholder="邮箱地址 Email Address" autofocus>
<input type="password" name="password" class="login-input" placeholder="密码 Password">
<input type="submit" value="登录 Login" class="login-submit">
<p class="login-help"><a href="">忘记密码 Forgot password?</a></p>
</form>
</body>
</html>