css用户登陆界面源码 |step css3

/* CSS代码 */
/* 设置页面背景色以及字体颜色 */
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
color: #888;
}
/* 设置页面中心的div */
.login-box {
width: 300px;
height: 380px;
background-color: #fff;
border-radius: 10px;
margin: 50px auto;
box-shadow: 0px 0px 20px #888;
padding: 30px;
position: relative;
}
/* 设置logo的样式 */
.logo {
text-align: center;
margin-bottom: 20px;
}
.logo img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 10px;
}
/* 输入框的样式 */
.input-box {
width: 100%;
margin-bottom: 20px;
}
.input-box:last-child {
margin-bottom: 40px;
}
.input-box input {
width: 100%;
height: 40px;
border: none;
border-bottom: 1px solid #aaa;
outline: none;
font-size: 16px;
padding-left: 5px;
}
.input-box input:focus {
border-bottom: 2px solid #6dabe4; 
}
/* 设置登录按钮的样式 */
.login-btn {
width: 100%;
height: 40px;
background-color: #6dabe4;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
outline: none;
cursor: pointer;
position: absolute;
bottom: 20px;
}
/* 设置其他选项及说明的样式 */
.other-box {
text-align: center;
}
.other-box a {
color: #6dabe4;
padding-left: 10px;
}

以上的代码使用了CSS选择器和属性，设置了页面背景色以及字体颜色，给登录框添加圆角边框和阴影，设置logo、输入框、登录按钮的样式，并在页面底部添加了其他选项及说明。其中，特别要注意：输入框获取焦点时的边框线条的宽度需要手动设置，可以使页面更加美观。

通过使用CSS实现用户登录界面的样式，可以更好地提升网站的用户体验，建立起用户和网站的连接。它不仅美观简洁，而且还可以帮助网站建立品牌形象和用户信任感，是前端开发中不可或缺的一部分。