[CSS]極簡(jiǎn)美登入頁(yè)
2023-03-17 15:16 作者:清夢(mèng)ゆめ | 我要投稿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哦，是嗎？</title>
<style>
body{
background-image: linear-gradient(to left,
#9c88ff,#3cadeb);
dispaly: flex;
justify-content: center;
}
.a{
position:relative;
top: 300px;
width: 1100px;
height: 550px;
box-shadow: 30px 5px 15px rgbe(0,0,0,.8);
display: flex;
}
.b{
width: 800px;
height: 550px;
background-image: url("1 (1).jpg");
background-size: cover;
}
.c{
width: 300px;
height: 550px;
backgroung-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.d{
width: 250px;
height: 500px;
}
.d h1{
font: 900 30px '';
}】
.e{
width: 230px;
margin: 20px 0;
outline: none;
border: 0;
padding: 10px;
border-bottom: 3px solid rgb(80,80,170);
font: 900 16px '';
}
.f{
float: right;
margin: 10px 0;
}
.g{
position: absolute;
margin: 20px;
bottom: 40px;
display: block;
width: 200px;
heirht: 60px;
font: 900 30px '';
text-decoration: none;
line-height: 50px;
border-radius: 30px;
background-image: linear-gradient(to left,
#9c88ff,#3cadeb);
text-align: center;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d">
<h1>Login/Register</h1>
<input type="text" class="e" placeholder="USER NAME">
<input type="text" class="e" placeholder="ACCOUNT">
<input type="password" class="e" placeholder="密碼">
<a href="#" class="f">幫助</a>
<a href="#" class="g">登錄</a>
</div>
</div>
</div>
</body>
</html>
標(biāo)簽：
