Html+CSS实现登录界⾯的设计1.实现效果
2.HTML代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SignUp</title>
<link rel="stylesheet" href="SignUpStyle.css">
<link href="leapis/css?familymPermanent+Marker" >
</head>
<body>
<div class="sign-div">
<form class="" action="SignUp.html" method="post">
<h1>SIGN UP</h1>
<input class="sign-text" type="text" placeholder="Full Name" >
<input class="sign-text" type="email" placeholder="@email">
<input class="sign-text" type="password" placeholder="password">
<input class="sign-btn" type="submit" value="Create Account">
<a href="#">Already Have One?</a>
</form>
</div>
</body>
</html>
3.CSS样式实现
body{
margin: 0;
padding: 0;
background: #487eb0;html网页设计css
}
.sign-div{
width: 300px;
padding: 20px;
text-align: center;
background: url(bg02.jpg);
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);    overflow: hidden;
}
.sign-div h1{
margin-top: 100px;
color: #fff;
font-size: 40px;
}
.sign-div input{
display: block;
width: 100%;
padding: 0 16px;
height: 44px;
text-align: center;
box-sizing: border-box;
outline: none;
border: none;
font-family: "montserrat",sans-serif; }
.sign-text{
margin:4px;
background: rgba(255,255,255,5);    border-radius: 6px;
}
.sign-btn{
margin-top: 50px;
margin-bottom: 20px;
background: #487eb0;
color: #fff;
border-radius: 44px;
cursor: pointer;
transition: 0.8s;
}
.sign-btn:hover{
transform:scale(0.96);
}
.
sign-div a{
text-decoration: none;
color: #fff;
font-family: "montserrat", sans-serif;    font-size: 14px;
padding: 10px;
transition: 0.8s;
display: block;
}
.sign-div a:hover{
background: rgba(0,0,0,.3);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。