<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: darkgray;
}
.b {
width: 300px;
height: 350px;
text-align: center;
margin: 0 auto;
background-color: white;
}
.b1 {
width: 30%;
height: 80px;
line-height: 70px;
float: left;
margin-left: 30px;
border-bottom: 2px solid red;
}
.b2 {
height: 80px;
border-bottom: 2px solid gray;
}
input {
margin-top: 20px;
width: 250px;
height: 30px;
border: 1px solid gray;
outline: none;/*去掉input点击后边框颜色*/
padding-left:20px;
}
.b3 {
width: 140px;
height: 50px;
font-size: 10px;
margin-top: 20px;
margin-left: -35px;
color: gray;
}
.b4 {
width: 140px;
height: 50px;
color: gray;
float: right;
font-size: 10px;
margin-top: -48px;
}
.b5 {
width: 200px;
height: 100%;
margin-left: 390px;
font-size: 10px;
margin-top: -50px;
}
.b6 {
width: 200px;
height: 100%;
float: right;
margin-right: 235px;
margin-top: -13px;
font-size: 10px;
}
.b7 {
width: 50%;
height: 80px;
line-height: 70px;
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="b">
<div class="b1">
<span style="color: red;">账户登陆</span>
</div>
<div class="b7"><span>手机登录</span></div>
<div class="b2"></div>
<div>
<input placeholder="请输入邮箱或者手机号">
<input placeholder="请输入您的密码">
</div>
<div style="float: left">
<input type="checkbox"style="width: 15px;height: 15px;margin-left: 15px">
</div>
<div class="b3">七天内自动登录</div>
<div class="b4">忘记密码</div>
<button type="" value="" style="width: 220px; height: 30px;margin: 0 auto;background-color: red; " />登录</div>
<div class="b5">
<span>登录即代表同意《<span style="color: blue">飞扬会员规则</span>》</span>
</div>
<div class="b6">
<span style="color: blue">免费注册</span>
</div>
</div>
</body>
</html>
登录框
最新推荐文章于 2023-07-13 20:45:00 发布