css 绚丽登陆界面样式

CSS绚丽登陆界面样式

    /* 登录界面容器样式 */    .login-container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #ffffff;
            width: 700px;
            height: 500px;
            border-radius: 5px;
            box-shadow: 0px 3px 10px rgba(0,0,0,0.3);
            overflow: hidden;
    }
        /* 登录界面标题样式 */    .login-header{
            background-color: #222222;
            color: #ffffff;
            padding: 30px;
            text-align: center;
            font-size: 30px;
            letter-spacing: 1px;
            font-weight: bold;
    }
        /* 登录界面输入框样式 */    .login-input{
            width: 80%;
            margin: 30px auto;
            padding: 20px;
            font-size: 20px;
            border: none;
            border-radius: 5px;
            background-color: #f2f2f2;
            outline: none;
    }
        /* 登录按钮样式 */    .login-button{
            width: 50%;
            background-color: #222222;
            color: #ffffff;
            margin: 30px auto;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            letter-spacing: 1px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
    }
    .login-button:hover{
            background-color: #ffffff;
            color: #222222;
    }
    

以上就是一些常用的CSS样式，你可以根据自己的需要进行调整，让你的登陆界面更加绚丽！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！