原创内容，仅供学习交流使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="new_file.css" rel="stylesheet" /> <style type="text/css"> body { background: #cccccc url(img/微信图片_20240601195225.jpg) no-repeat fixed center/100%; position: relative; } .box1 {
width: 150px;
height: 50px;
border: 1px solid transparent;
margin-top: 30px;
margin-left: 40px;
}
.box2 {
width: 250px;
height: 50px;
border: 1px solid transparent;
float: right;
margin-right: 30px;
}
.box3 {
width: 550px;
height: 500px;
background-color: aliceblue;
border: 1px solid transparent;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
border-radius: 20px;
}
.box4 {
width: 60px;
height: 30px;
border-radius: 30px;
border: 1px solid aliceblue;
text-align: center;
color: aliceblue;
margin-top: 10px;
}
.box5 {
width: 100px;
height: 30px;
border-radius: 30px;
border: 1px solid aliceblue;
text-align: center;
color: aliceblue;
margin-top: 10px;
margin-left: 15px
}
.box6 {
width: 500px;
height: 60px;
border: 1px solid transparent;
margin-left: 25px;
}
.box7 {
width: 35px;
height: 1px;
background-color: orange;
border: 1px solid orange;
margin-left: 40px;
margin-top: -20px;
}
.box8 {
width: 500px;
height: 40px;
border: 1px solid darkgray;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
}
.box9 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 10px;
text-align: left;
border-radius: 1px;
}
.box10 {
width: 165px;
height: 40px;
border: 1px solid transparent;
text-align: center;
float: right;
color: #cccccc;
}
.box11 {
width: 500px;
height: 40px;
background-color: orange;
border: 1px solid orange;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
color: aliceblue;
}
.box12 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
}
.box13 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 5px;
text-align: center;
border-radius: 1px;
}
.box14 {
width: 300px;
height: 100px;
border: 1px solid transparent;
float: right;
margin-top: 40%;
text-align: left;
}
.box15 {
width: 500px;
height: 100px;
border: 1px solid transparent;
margin-top: 0px;
margin-right: 25px;
box-sizing: border-box;
}
.box16 {
width: 40px;
height: 40px;
margin-top: 0px;
border-radius: 50%;
margin-left: 20px;
margin-right: 80px;
justify-content: center;
align-items: center;
border: 1px solid darkgray;
float: right;
box-sizing: border-box;
}
.spaced-text {
margin-right: 20px;
}
.text-with-lines {
display: inline-block;
position: relative;
padding: 0 10px;
line-height: 1.5;
}
.text-with-lines::before,
.text-with-lines::after {
content: '';
display: block;
position: absolute;
width: 150px;
height: 1px;
width: 40%;
top: 50%;
background-color: #cccccc;
}
.text-with-lines::before {
left: -40px;
}
.text-with-lines::after {
right: -40px;
}
</style>
</head>
<body>
<div class="box14">
<p class="tight-text">《登顶武功山》</p>
<h3 class="tight-text">拍摄于问卷星团队二月徒步之旅</h3>
</div>
<div class="box1">
<img src="img/[email protected]" width="150px" height="50px" />
</div>
<div class="box2">
<div class="box4">注册</div>
<div class="box5">返回首页</div>
</div>
<div class="box3">
<div class="box6">
<p>
<span class="spaced-text">账号登录</span>
<span>验证码登录</span>
</p>
<div class="box7"></div>
<div class="box8">
<input type="text" class="input-field" placeholder="用户名/Email/手机" />
</div>
<div class="box8">
<input type="text" class="input-field" placeholder="请输入登录密码" />
</div>
<div class="box9">
<input type="checkbox" name="gxh" /><span>下次自动登录</span>
<div class="box10"><a href="https://www.wjx.cn/register/forgetpassword.aspx">忘记用户名/密码？</a></div>
</div>
<div class="box11">
<p>登 录</p>
</div>
<div class="box12"><a href="https://www.wjx.cn/register/register.aspx?type=1">立即注册</a></div>
<div class="box13"><span class="text-with-lines">更多登录方式</span></div>
<div class="box15">
<div class="box16">
<img src="img/th.jpg"/>
<h6>企业微信</h6>
</div>
<div class="box16">
<img src="img/OIP-C.jpg" />
<h6>微信登录</h6>
</div>
<div class="box16">
<img src="img/q.png" />
<h6>QQ登录</h6>
</div>
</div>
</div>
</div>
</body>
本文转载自: https://blog.csdn.net/2401_83334819/article/details/139379006
版权归原作者 枕梦东栏 所有， 如有侵权，请联系我们删除。
版权归原作者 枕梦东栏 所有， 如有侵权，请联系我们删除。