实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录窗口</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: rgba(0,220,220,0.2);
}
div{
width: 300px;
height: 400px;
margin: 100px auto;
border-radius: 5px;
background: linear-gradient(to bottom,#FF99CC,#FFFFCC);
box-shadow:black 1px 1px 5px 0;
text-align: center;
}
img{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 50px auto;
}
.p1{
width: 200px;
margin-bottom: 10px;
border-radius: 5px;
padding-left:15px;
border: 0;
}
button{
border-radius: 3px;
border: 0;
margin: 10px;
width: 100px;
height: 30px;
background: #FFFF00;
}
</style>
</head>
<body>
<div>
<img src="static/images/p3.jpg">
<form action="" method="">
<input class="p1" type="text" placeholder="请输入账号"><br>
<input class="p1" type="password" placeholder="请输入密码"><br>
<input type="checkbox"> 自动登录
<input type="checkbox">记住密码<br>
<button><b>登录</b></button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例