一、页面展示
二、思路
1.设置背景图片
2.设置登录框框并使其处于靠右位置
3.设置登录框框内容
三、代码展示
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<link rel="stylesheet" href="./login.css">
</head>
<body>
<div class="form">
<h2>
<span>登录</span>
</h2>
<div class="item">
<input type="text" placeholder="账号">
</div>
<div class="item">
<input type="password" placeholder="密码">
</div>
<div class="button">
<button>登录</button>
</div>
<div class="last">
<last>———————其他方式登录———————</last>
</div>
</div>
</body>
</html>
2.css
在css里面设置背景图片
body{
background: url("img/6.jpg");
}
.form{
width: 420px;
height: 550px;
border: 1px solid rgb(126,117,117);
margin-left: 850px;
margin-top: 130px;
/*background-color: rgb(94,93,91,.11);*/
border-radius: 6mm;
background-color: seashell;
}
.form h2{
font-family: "Agency FB";
text-align: center;
font-size: 30px;
color: black;
border-bottom: 1px solid rgb(105,105,105);
height: 50px;
margin-bottom: 40px;
}
input[type="text"],input[type="password"]{
border: 1px solid #dcdfe6;
width: 75%;
box-sizing: border-box;
border-radius: 3px;
height: 50px;
text-indent: 1em;
font-size: 14px;
color: black;
margin: 16px 48px;
background-color: rgb(126,117,117,.20);
/*background-image: linear-gradient(95deg,rgba(111,399,99,0.61),rgba(111,4557,180,0.5));*/
background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
input[type="text"]::placeholder,input[type="password"]::placeholder{
color: black;
}
input[type="text"]:hover,input[type="password"]:hover{
border-color: #33476e;
}
.form .button{
}
button{
width: 85px;
height: 30px;
margin: 45px 170px;
background-color: #dcdfe6;
background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
.last{
margin:30px 50px ;
font-size: 15px;
color: grey;
}