网页版登录注册,用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文件的链接,于是换成了绝对路径就行了。
更多推荐
html 网页版登录注册,用html和css实现的登录注册网页
发布评论