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

网页版登录注册,用html和css实现的登录注册网页"/>

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

HTML页面：

Search

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文件的链接，于是换成了绝对路径就行了。