<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登 录 页 面</title>
<style type="text/css">
body{
margin:0;
padding:0;
background: url(../img/timg.jpg);
}
.d1{
margin:50px 200px;
height:300px;
width:310px;
background-color: rgba(230,230,230,0.7);
padding:60px 45px;
border-radius: 20px;
}
.t1{
display: block;
margin-bottom: 50px;
color:#3c3c3c;
}
input{
display:block;
margin:20px auto 20px;
height:28px;
width:300px;
}
.btn1{
border: none;
font-size:18px ;
height:34px;
width:160px;
border-radius: 30px;
color:#3c3c3c;
background-color:dodgerblue;
}
.btn1:hover{
background-color:orange;
color:#ffffff;
}
.d2{
margin-bottom:20px;
}
.d3{
float: right;
}
.d2 a,.d3 a{
text-decoration: none;
color:#3c3c3c
}
.d2 a:hover,.d3 a:hover{
/*text-decoration: none;*/
color:#ffffff;
}
</style>
</head>
<body>
<!--这个是登录窗口的盒子-->
<div class="d1">
<span class="t1">用户登录页面</span>
<form action="" method="post">
<input type="text" maxlength="18" name="username" id="" placeholder="请输入手机号/微信/邮箱"/>
<input type="password" maxlength="18" name="password" id="" placeholder="请输入密码..." />
<input type="submit" value="登录" class="btn1" />
</form>
<div class="d2">
<img src=""/><span><a href="">微信登录</a></span>
<img src=""/><span><a href="">支付宝登录</a></span>
</div>
<div class="d3">
<span><a href="">忘记密码 </a></span>
<span><a href="">忘记会员名 </a></span>
<span><a href="">免费注册</a></span>
</div>
</div>
</body>
</html>
效果如下：
TIM截图20180814223334.jpg
网友评论