<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style>
body {
background-image: url("./屏幕截图 2024-07-14 093343.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.b {
color: #ff5100e2;
font-size: 25px;
font-weight: 550;
position: absolute;
left:35px
}
.c {
font-size: 25px;
font-weight: 550;
position: absolute;
left:165px
}
.f{
color: gainsboro;
font-size: 25px;
position: absolute;
left:145px
}
input[type="text"] {
width: 65%;
height: 50px;
border-radius: 4px;
border: none;
background-color:rgb(250, 246, 246);
position: absolute;
top: 80px;
}
input[type="password"] {
width: 65%;
height: 50px;
border-radius: 4px;
border: none;
background-color:rgb(250, 246, 246);
position: absolute;
top: 150px;
}
input[type="submit"], button[type="submit"] {
background-color: #ff5100e2;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
width: 300px;
height: 40px;
position: absolute;
top: 250px;
}
.e{
color:#f1f0f0;
}
.a1{
position: absolute;
top: 200px;
left: 350px;
width: 450px;
height: 500px;
border: 1px solid #ccc;
border: 1px solid #ccc;
border-left: 0;
border-top: 0;
border-bottom: 0;
}
.a{
}
.a3{
position: absolute;
top: 350px;
font-size: 13px;
position: absolute;
left:45px;
text-align: center;
}
.a4{
position: absolute;
top: 200px;
left: 850px;
}
.a5{
text-align: center;
}
</style>
</head>
<body>
<div class="a1">
<div class="a">
<a class="b">密码登录</a>
<a class="f">|</a>
<a class="c">短信登录</a>
</div>
<form>
<p><input type="text" name="username" id="username" placeholder="账号名/邮箱/手机号"></p>
<p><input type="password" name="password" id="password" placeholder="请先输入登陆密码"></p>
<p></p><button type="submit">登录</button></p>
</form>
<div class="a3">
<a class="d">支付宝登陆</a>
<a class="e">|</a>
<a class="d">钉钉登陆</a><br>
<a class="d">免费注册</a>
<a class="e">|</a>
<a class="d">忘记账号名</a>
<a class="e">|</a>
<a class="d">忘记密码</a>
</div>
</div>
<div class="a4">
<p style="text-align: center;">手机扫码安全登录</p>
<img src="C:\Users\eren\Pictures\Camera Roll\Screenshots\屏幕截图 2024-07-14 114018.png"><br>
<div class="a5">
<a>打开</a>
<a>淘宝</a>
<a>|</a>
<a>天猫</a>
<a>app扫码</a>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
