实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{height:600px;background:linear-gradient(to bottom,blue,#B4DDEE);}
.login{
margin: 100px auto;
width: 400px;
height: 300px;
background: rgba(230,247,241,0.2);
border-radius: 5px;
text-align: center;
}
input{width:250px;height:40px;margin:20px auto;border-radius:2px;border: none;padding-left:10px;}
input:focus{outline:pink solid 5px;}
button{
display: block;
width: 260px;
height: 40px;
margin: 15px auto;
background:#7AC23C;
border:none;
border-radius: 3px;
color: #ffffff;
font-size: 18px;
}
button:hover{cursor:pointer;background-color: #49D27B;}
</style>
</head>
<body>
<div class="login">
<img src="" alt="">
<form action="" >
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<button>登 录</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例