登录界面
2020-12-18 本文已影响0人
Bloo_2e05
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login2</title>
<link rel="stylesheet" href=".�ćs/index.css">
</head>
<body>
<div class="container">
<div class="Login-wrapper">
<div class="header">Login2</div>
<div class="form-wrapper">
<input type="text" name="esername" placeholder="esername" class="input-item">
<input type="password" name="password" placeholder="password" class="input-item">
<div class="btn">Login</div>
</div>
<div class="msq">
Dont't have account? <a href="#">Sign up</a>
</div>
</div>
</div>
</body>
<�cml>
css部分
*{
margin: 0;
padding: 0;
font-family: 'Open Sans Light';
letter-spacing: .05em; /*字母之间的距离*/
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);/*向右背景渐变颜色*/
}
.Login-wrapper {
background-color: #fff;
width: 250px;
height: 600px;
border-radius: 15px; /*圆角属性*/
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*移到背景中央，跟定位有关*/
}
.Login-wrapper .header {
font-size: 30px;
font-weight: bold;
text-align: center;/*文字居中*/
line-height: 200px;
}
.Login-wrapper .form-wrapper .input-item {
display: block;
width: 100%;
margin-bottom: 20px;/*两个框的底边距*/
border: 0;/*边框无*/
padding: 10px;
border-bottom: 1px solid rgb(128, 125, 125);
font-size: 15px;
outline: none;/*无轮廓*/
}
.Login-wrapper .form-wrapper .input-item::placeholder {
text-transform: uppercase;/*字母大写*/
}
.Login-wrapper .form-wrapper .btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
color: #fff;
}
.Login-wrapper .msq {
text-align: center;
line-height: 80px;
}
.Login-wrapper .msq a{
text-decoration: none;
color: #a6c1ee;
}
然后是显示的界面
下面来说一下这次用到的css部分
letter-spacing: .05em; /*字母之间的距离*/
这个如注释所说，是设置字符间距的属性然后.05em是相对于font-size的长度
然后是
background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);/*向右背景渐变颜色*/
表示控制颜色的渐变方向
接下来是
transform: translate(-50%,-50%);/*移到背景中央，跟定位有关*/
实现水平垂直居中模式，是以左上角为原点定位，而后面的数字表示向上向左移动自身长度的50%，使元素位于中心。
然后剩下的就是最基本的css属性了，大部分都比较基础，不会的话百度查查
也很方便。
