css怎么做登入的灰色背景

时间2023-11-12 00:02:02发布访客分类CSS浏览1078

导读：今天我们来学习CSS如何实现一个登入页面的灰色背景。首先，在HTML中我们需要一个登入框的容器，一般可以使用一个div标签。如下所示： <div class="login-box"> <form>...

今天我们来学习CSS如何实现一个登入页面的灰色背景。首先，在HTML中我们需要一个登入框的容器，一般可以使用一个div标签。如下所示：

    div class="login-box">
            form>
                input type="text" placeholder="用户名">
                input type="password" placeholder="密码">
                button type="submit">
    登入/button>
            /form>
        /div>

我们使用一个class为"login-box"的div标签来包裹输入框和一个登入按钮的form。在form中我们放置了两个input标签，一个是type为text的用户名输入框，一个是type为password的密码框，并且还有一个button标签用于提交表单。接下来，我们来编写CSS样式来实现灰色背景。首先，我们需要将整个文档的body背景设置成灰色。可以使用以下代码：

    body {
            background-color: #ccc;
    }

然后，我们需要设置登入框的样式。可以使用以下代码：

    .login-box {
            background-color: #fff;
            padding: 20px;
            box-sizing: border-box;
            width: 400px;
            margin: 100px auto;
    }

这里我们设置了背景颜色为白色，padding为20px，box-sizing为border-box，以便处理元素的边框和内边距。我们还设置了宽度为400px，并且使用margin: 100px auto来让元素垂直和水平居中于页面。最后，我们需要为form中的元素添加样式，以便它们更加美观。可以使用以下代码：

    .login-box input[type="text"],    .login-box input[type="password"] {
            display: block;
            border: none;
            padding: 10px;
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
    }
    .login-box button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
    }
    .login-box button:hover {
            background-color: #0069d9;
    }

这里我们为input标签设置了一些常见样式，如去除边框、设置padding等。button标签的样式我设置了背景颜色为蓝色、颜色为白色、边框为none等。并且设置了hover时的样式。现在，我们就完成了一个灰色背景的登入页面。希望这篇文章能够让大家更深入地了解CSS在实际应用中的使用，也希望大家在实际应用中能够更加熟练地掌握CSS。

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

若转载请注明出处： css怎么做登入的灰色背景
本文地址： https://pptw.com/jishu/535210.html