用html和css实现的登录注册网页

HTML页面：

	
	
	
	

	


	

		
		

			

				

					Login/Sign up
				
				

					

					

					

					

					Forget?
					LOGIN
				
			
		
	

CSS页面代码：

/*配色方案：
	背景：rgb(224,207,254),rgb(255,239,255)
	按钮：rgb(181,154,254),rgb(245,289,253)
*/

*{
	margin: 0;
	padding: 0;
}

body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(45deg,rgb(224,207,254),rgb(255,239,255)) fixed;
}

.container{
	position: relative;
	width: 70rem;
}

.container img{
	width: 70rem;
	height: 37rem;
}

.switch span{
	color: #ccc;
	font-size: 1.4rem;
	cursor: pointer;
}

.switch span.active{
	color: rgb(181,154,254);
}

.panel{
	width: 30%;
	margin: 10rem 0 0;
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	justify-content: center;
}

form{
	width: 12rem;
	margin: 3rem 0 0;
}

form .input{
	position: relative;
	opacity: 1;
	height: 2rem;
	width: 100%;
	margin: 2rem 0;
	transition: .4s;
}

.input input{
	outline: none;
	width: 100%;
	border: none;
	border-bottom: .1rem solid rgb(181,154,254);
}

.input::after{
	content: attr(placeholder);
	position: absolute;
	left: 0;
	top: -20%;
	font-size: 1.3rem;
	color: rgb(129,101,207);
	transition: .3s;
}

.input.focus::after{
	top: -70%;
	font-size: 1rem;
}

.login .input#email,
.login .input#repeat{
	margin: 0;
	height: 0;
	opacity:0 ;
}

form span{
	display: block;
	color: rgb(110,89,167);
	font-size: .8rem;
	cursor: pointer;
}

form button{
	border:none;
	outline: none;
	margin: 2rem 0 0;
	width: 100%;
	height: 3.5rem;
	border-radius: 3rem;
	background: linear-gradient(90deg,rgb(181,154,254),rgb(245,289,253));
	box-shadow: 0 0 8px reb(181,154,254);
	cursor: pointer;
	color: white;
}

最后的页面成果：

心得：
这次的登录注册页面里面除了html和css,还用到了js的部分；
当用户输入文字的时候，页面的提示会缩小并且向上移动，不会挡住用户输入的信息，导致页面看起来很乱；
同一个当用户的鼠标点击Sign up和Login时，页面会分别出现各自的版面；

一开始写的所有的js都无法正常运行，后来发现第32行代码出错，网页找不到js文件的链接，于是换成了绝对路径就行了。