flex弹性布局制作软件后台登录页

flex弹性布局制作软件后台登录页

html:

<div class="container">
<h3>管理员登录</h3>
<form>
<div>
<!-- input:t 单行文本框 -->
<label for="">用户名：</label><input type="text" name="" id="">
</div>
<div>
<!-- input:p 密码框 -->
<label for="">密&emsp;码：</label><input type="password" name="" id="">
</div>
<div>
<button class="btn">登录</button>
</div>
</form>
</div>

css:

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
color: #444;
font-size: 14px;
font-family: '微软雅黑';
font-weight: lighter;
background-image: linear-gradient(to top, lightcyan, white, lightcyan);
/* 弹性布局 */
/* 将body标签，转换为 弹性容器 */
display: flex;
/* 主轴方向设置为 垂直交叉轴 , 并且内容不换行 */
flex-direction: column;
flex-wrap: nowrap;
/* 设置弹性容器中的弹性元素，水平居中显示 */
justify-content: center;
/* 设置弹性容器中弹性元素，垂直居中显示 */
align-items: center;
height: 100vh;
}
h3{
font-weight: normal;
}

.container{
width: 300px;
padding: 20px;
box-sizing: border-box;
/* 相对定位 */
position: relative;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
border-radius: 10px;
}
.container h3{
text-align: center;
margin-bottom: 15px;
font-size: 20px;
}
.container>form{
/* 弹性布局 */
/* 将form标签，转换为 弹性容器 */
display: flex;
/* 主轴方向设置为 垂直交叉轴 , 并且内容不换行 */
flex-flow: column nowrap;

border: 1px solid #b4b4b4;
border-radius: 10px;
padding: 15px;
background-image: linear-gradient(to right bottom, lightblue, white);
}

.container>form>div{
/* 弹性布局 */
/* 将form标签中div标签，转换为 弹性容器 */
display: flex;
/* 主轴方向设置为 水平轴 , 并且内容不换行 (这两个属性，如果是row，nowrap，可以省略不写。因为他们是默认值！) */
flex-direction: row;
flex-wrap: nowrap;

margin: 10px 0;
}
.container label{
flex: 0.5;
width: 20%;
}
.container input{
flex: 1;
margin-left:  10px;
padding-left: 3px;
border: 1px solid #888;
outline: none;
width: 80%;
height: 23px;
line-height: 23px;
}
.container .btn{
flex: 1;
height: 30px;
line-height: 30px;
background-color: #188C86;
color: white;
text-align: center;
border: none;
outline: none;
cursor: pointer;
/* 字间距 */
letter-spacing: 15px;
border-radius: 5px;
}
.container .btn:hover{
background-color: lightseagreen;
}