登录页面---css小项目

这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

28天啦，对自己也是突破，虽然写的很菜-_-

效果展示

写作思路

想做一个登录页面，那么首先就要将登录页面的核心写出。登录页面需要登录的账号和密码。
那么简单的html标签就可以把简单的登录页面写出来。lable,input就可以啦。

html部分代码

			<div class="box-left">
				<p>五一快乐</p>
				<span>听说，注册之后就可以过一个快乐的五一【狗头】</span>
			</div>
			<div class="box-right">
				<div class="form">
					<label for="email">Id/Phone/Email</label>
					<input type="email" id="email">
					<label for="password">Password</label>
					<input type="password" id="password">
					<input type="submit" id="submit" value="Submit">
				</div>
			</div>
		

但是这样子出来的效果又过为单调，那么就选择用css把这些文字进行装扮。文字分为两个部分，一个是左边的提醒大家注册的好处，右边是登录的页面。这两部分都用圆框起来，然后在小圆圈里写登录的内容。小圆圈用到border-radius。小圆圈画好了，下面要在小圆圈里填颜色，渐变色的效果更好linear-gradient。选取自己喜欢的颜色即可。因为是左右两个部分，所以两个圈里都画出对应的颜色。

* {
	padding: 0;
	margin: 0;
}
/* 将整个登录页面居于页面的中心 */
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(to bottom right, #FFF6FF, #FEFEDF);
}
/* 两个部分的格式设计 */
.box {
	width: 640px;
	height: 320px;
	/* flex布局 */
	display: flex;
}

左右内容都画好了以后，就加一点点小装饰就可以了，比如说display,position,高高度宽度等等。
最后是登录的标签，可以做出点到标签的时候，标签也跟着变化的效果，比如说字间距扩大。整体效果就ok啦。