css好看的登录界面

CSS可以帮助我们实现非常好看的登录界面。接下来，我们将讲述如何使用CSS来美化登录界面。

html {
    background: #ece9e6;
}
body {
    background: #fff;
    max-width: 500px;
    margin: 200px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
h1 {
    text-align: center;
    font-family: 'Pacifico', cursive;
    color: #ff965a;
    font-size: 50px;
    margin-bottom: 20px;
}
form {
    max-width: 350px;
    margin: 0 auto;
}
label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 16px;
}
input[type="text"],input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
button {
    background-color: #ff965a;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
}
button:hover {
    background-color: #db7c4d;
}
    

在上面的代码中，我们定义了body的背景颜色为浅灰色，form元素的最大宽度为350px, 并把边框设置为圆角。我们使用了box-shadow属性来为整个登录界面添加阴影效果，这是让登录界面看起来更加立体的好办法。

我们使用了Google Fonts上的一个字体，Pacifico。这个字体看起来非常漂亮，所以我们使用它来为标题添加一些美感效果。我们通过更改按钮的背景颜色和添加:hover样式来提高按钮的可点击性，并使按钮看起来更加美观。

总之，通过使用上述CSS代码，您可以轻松地创建一个漂亮而现代的登录界面。

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