Tag: 登录界面
<!--html start-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>欢迎进入登录 </title>
<link type="text/css" rel="stylesheet" href="css/login.css"></link>
</head>
<body>
<div class="bg"></div>
<div class="login">
<div class="l_content">
<form action="../index.html" method="post">
<h2>用户登录</h2>
<dl>
<dt>请输入您的账号：</dt>
<dd><input type="text" placeholder="您的账号..."><dd>
</dl>
<dl>
<dt>请输入您的密码：</dt>
<dd><input type="text" placeholder="您的密码..."><dd>
</dl>
<dl>
<dt>亲，可以登陆咯：</dt>
<dd><input type="submit" value="登 录" /></dd>
</dl>
<div class="l_info">
<a href="register.html">免费注册</a>
</div>
</form>
</div>
</div>
<div class="l_welcome">
</div>
<div class="l_copy">
<span class="c_text"> <script type="text/javascript">var </script></b></span>
</div>
</body>
</html>
<!--html start-->
<!--css文件-->
*{padding:0px;margin:0px;}
a{text-decoration:none;}
body{font-family:"华文楷体";font-size:12px;color:#666;}
.login{width:600px;height:300px;margin:110px auto 0px auto;color:#fff;background:rgba(0,0,0,0.5);
transform-style:preserve-3D;-webkit-transform-style:preserve-3D;
transform:rotateX(60deg)rotateZ(-50deg);-webkit-transform:rotateX(60deg)rotateZ(-50deg);
transition:all 2s;-webkit-transition:all 2s;-moz-transition:all 2s;-o-transition:all 2s;position:relative;}
.login:hover{transform:rotateX(0deg) rotateZ(0deg);-webkit-transform:rotateX(0deg) rotateZ(0deg);}
.l_content{width:600px;height:300px;padding:15px 0;}
.l_content:before,.l_content:after{content:"";position:absolute;
top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.6);}
.l_content:before{transform-origin:left center;-webkit-transform-origin:left center;
-moz-transform-origin:left center;-o-transform-origin:left center;transform:rotateY(90deg);
-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-o-transform:rotateY(90deg);width:25px;}
.l_content:after{top:auto;left:0px;transform-origin:bottom center;
-webkit-transform-origin:bottom center;-moz-transform-origin:bottom center;
-o-transform-origin:bottom center;transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);
-o-transform:rotateX(90deg);height:25px;}
.l_content h2{margin-left:242px;font-size:30px;font-weight:500;}
.l_content dl{height:50px;line-height:50px;margin:10px 0px;}
.l_content dl dt{width:180px;text-align:right;float:left;font-size:15px;color:#e1e1e1;}
.l_content dl dd{width:420px;float:right;}
input{width:320px;height:24px;padding:5px;border:1px solid #fff;}
input[type="text"]{background:rgba(255,255,255,0.9);font-family:"华文楷体";color:#333;}
input[type="submit"]{width:332px;height:44px;border:4px solid #fff;background:#51a8ff;color:#fff;
font-size:18px;font-weight:700;padding:5px;transition:all 500ms;}
input[type="submit"]:hover{background:#9eceff;color:#222;cursor:pointer;}
input:focus{outline:4px solid #007fff;}
.l_content .l_info{width:300px;height:18px;margin-left:210px;}
.l_content .l_info a{text-decoration:none;float:right;padding-left:15px;color:#ccc;}
.l_content .l_info a:hover{color:#fff;text-decoration:underline;}
.indexmap{display:inline-block;font-size:12px;padding-left:10px;font-weight:400;}
.l_welcome{height:20px;color:#000;font-size:14px;text-align:center;margin-top:220px;}
.l_qqun{display:inline-block;vertical-align:middle}
.l_copy{width:100%;margin-top:10px;}
.l_copy .c_text{display:block;color:#000;line-height:50px;text-align:center;font-size:12px;}
.bg{min-width:100%;min-height:100%;background:url("../images/bg.jpg")no-repeat top center;position:fixed;top:0;left:0;opacity:0.5;z-index:-20;}
<!---->