css怎么制作登陆窗口

CSS是一种用来美化网页的语言，它可以用来制作简单的登陆窗口。下面我们就来学习一下如何使用CSS来制作一个简单的登陆窗口。

!--基本的HTML结构-->
    div class="login">
      h2>
    Login/h2>
      form>
        input type="text" name="username" placeholder="Username">
        input type="password" name="password" placeholder="Password">
        button>
    Login/button>
      /form>
    /div>
    !--基本的CSS样式-->
.login {
      width: 300px;
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 0 auto;
}
h2 {
      text-align: center;
      font-size: 24px;
}
form {
      display: flex;
      flex-direction: column;
}
input[type="text"],input[type="password"] {
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
}
button {
      background-color: #008CBA;
      color: #fff;
      padding: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
}
button:hover {
      background-color: #006D9C;
}
    

在上面的代码中，我们使用了HTML中的、

、、和标签来创建登陆窗口的基本结构。然后在CSS样式中，我们设置了登陆窗口的宽度、背景颜色、边框、边框半径和内边距，并且给它居中显示。我们也设置了标题的居中对齐和字体大小。我们还对输入框和按钮设置了一些样式，如背景颜色、字体颜色、内边距、边框和边框半径。

最后，我们使用了:hover伪类来设置按钮鼠标悬停时的样式。这样就完成了一个简单的登陆窗口。

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