css3注册登录页面
导读:CSS3技术在网页设计中发挥着重要作用,为用户带来更好的浏览体验和互动效果。在注册登录页面的设计中,CSS3也有很大的应用空间。/*登录框样式*/.login{position:absolute;top:50%;left:50%;trans...
CSS3技术在网页设计中发挥着重要作用,为用户带来更好的浏览体验和互动效果。在注册登录页面的设计中,CSS3也有很大的应用空间。
/*登录框样式*/.login{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:400px;
background-color: #fff;
padding:20px;
box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
.login h2{
text-align:center;
font-size:24px;
margin-bottom:20px;
}
.login input[type="text"],.login input[type="password"]{
display:block;
margin:10px auto;
border:none;
border-bottom:1px solid #666;
width:100%;
padding:6px 10px;
}
.login button{
display:block;
margin:0 auto;
background-color: #1abc9c;
color:#fff;
padding:10px 20px;
border:none;
border-radius:20px;
cursor:pointer;
}
.login button:hover{
background-color: #16a085;
}
上述代码是一个基本的登录框样式,采用绝对定位与transform对其进行居中处理。input输入框使用了border-bottom来设置底部边框,button按钮使用了背景颜色和hover效果来提升用户界面体验。
/*注册框样式*/.register{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:400px;
background-color: #fff;
padding:20px;
box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
.register h2{
text-align:center;
font-size:24px;
margin-bottom:20px;
}
.register input[type="text"],.register input[type="password"]{
display:block;
margin:10px auto;
border:none;
border-bottom:1px solid #666;
width:100%;
padding:6px 10px;
}
.register button{
display:block;
margin:0 auto;
background-color: #e74c3c;
color:#fff;
padding:10px 20px;
border:none;
border-radius:20px;
cursor:pointer;
}
.register button:hover{
background-color: #c0392b;
}
上述代码是一个基本的注册框样式,与登录框样式相似。两个弹窗的样式可以进行不同的配色处理,使用户能够更清晰的分别其功能。
CSS3还可以运用在更多的互动效果设计中,例如鼠标hover效果、渐变色、动画效果、弹出提示框等等,使用户可以更自然地与页面进行互动。在网页设计中,CSS3是一个不可或缺的因素。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css3注册登录页面
本文地址: https://pptw.com/jishu/449944.html
