简单css后台管理登录
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.5 '微软雅黑';
background: #f9f9f9;
}
a {
color: #00007f;
text-decoration: none;
}
ul,li{
list-style: none;
}
a:hover {
color: #bd0a01;
text-decoration: underline;
}
.admin_login_warp {
margin: 140px auto 0;
width: 312px;
}
.admin_login_warp h1 {
font-weight: normal;
font-size: 20px;
margin-bottom: 15px;
}
.admin_login_border{
box-shadow:1px 2px 3px #ccc;
border: 1px solid #eee;
background: #fff;
padding:0 5px 15px;
overflow: hidden;
}
.admin_input{
margin:15px auto 0;
width:280px;
}
.admin_items li{
line-height: 28px;
margin-bottom:5px;
clear:both;
}
.admin_items label{
display:block;
margin-bottom: 5px;
}
.admin_input_style{
border:1px solid #e6e6e6;
background: #fff;
padding:3px;
height:30px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
color:#666;
border-radius: 5px;
transition-duration: .3s;
width:100%;
}
.admin_input_style:focus{
border-color:rgba(82,168,236,0.8);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
.btn{
display:inline-block;
*display: inline;
padding:12px;
margin-bottom: 0;
*margin-left:.3em;
font-size:14px;
line-height:20px;
color:#333;
text-align:center;
width:100%;
background: #006dcc;
}
</style>
</head>
<body>
<div class="admin_login_warp">
<h1>后台管理</h1>
<div class="admin_login_border">
<div class="admin_input">
<form action="" method="POST">
<ul class="admin_items">
<li>
<label for="user">用户名：</label>
<input type="text" name="username" id="user" value="admin" class="admin_input_style" />
</li>
<li>
<label for="password">密码：</label>
<input type="password" name="password" id="user" value="" class="admin_input_style" />
</li>
<li>
<input type="submit" tabindex="3" value="提交" class="btn btn-primary" />
</li>
</ul>
</form>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
