博客登录框

body部分

<div class="login">
		<h2 class="title">Login</h2>
		<form class="login-content" action="">
			<input type="text" placeholder="请输入用户名">
			<input type="password" placeholder="请输入密码">
			<input type="submit" value="sign In">
		</form>
	</div>

css部分

  	*{
		margin: 0;
		padding: 0;
	}
	html{
		height: 100%;
	}
	body{
		display: grid;/*网格布局*/
		height: 100%;
		background: url(../images/7.jpg) no-repeat center/cover;
	}
	.login{
		width: 300px; 
		height: 300px;
		background-color: #ebf0f1;
		margin: auto;
		border-radius: 8px;
	}
	.login:before{
		display: block;
		content:'';
		width: 100%;
		height: 10px;
		background-image: -webkit-linear-gradient(left,#27ae60 0%,#27ae60 
		20%,#8e44ad 20%, #8e44ad 40%,#3498db 40%,#3498db 60%, #e74c3c 60%,
		#e74c3c 80%, #f1c40f 80%,#f1c40f 100%);/* css3渐变色*/
		border-radius: 8px 8px 0 0;
	}
	.title{
		font-size: 2em;
		color: #096;
		line-height: 80px;
		text-align: center;
	}
	.login-content{
		display: flex;	/*弹性盒模型*/
		flex-direction: column;	/*改变主轴方向 垂直*/
		justify-content: space-around;/*均分剩余空间*/
		align-items: center;/*副轴居中*/
		height: 200px;
		/*background-color: #096;*/
	}
	.login-content input{
		width: 80%;
		height: 40px;
		outline: none;
		border: 1px solid #bbb;
		border-radius: 8px;
		text-indent: 1em;
	}
	.login-content input[type='submit']{
		background-color: #e74c3c;
		text-indent: 0;
		color: #fff;
	}