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%);/*移到背景中央丁溅，跟定位有關(guān)*/
}
.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; /*字母之間的距離*/
這個如注釋所說价卤，是設(shè)置字符間距的屬性然后.05em是相對于font-size的長度
然后是
background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);/*向右背景漸變顏色*/
表示控制顏色的漸變方向
接下來是
transform: translate(-50%,-50%);/*移到背景中央瞧挤，跟定位有關(guān)*/
實現(xiàn)水平垂直居中模式胚膊，是以左上角為原點定位，而后面的數(shù)字表示向上向左移動自身長度的50%蚁袭，使元素位于中心竖瘾。
然后剩下的就是最基本的css屬性了，大部分都比較基礎(chǔ)组底，不會的話百度查查
也很方便热押。
