css怎么做登录界面

CSS可以帮助我们制作一个漂亮的登录界面，下面是一个示例：

/* HTML代码 */div class="login-form">
      h2>
    登录/h2>
      form>
        label for="username">
    用户名:/label>
        input type="text" name="username" id="username">
        label for="password">
    密码:/label>
        input type="password" name="password" id="password">
        input type="submit" value="登录">
      /form>
    /div>
/* CSS代码 */.login-form {
      width: 300px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 0 10px #ccc;
}
h2 {
      text-align: center;
      margin-bottom: 20px;
}
form {
      display: flex;
      flex-direction: column;
}
label {
      margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: 0 0 5px #ccc;
}
input[type="submit"] {
      padding: 10px;
      background-color: #008CBA;
      color: #fff;
      border: none;
      border-radius: 5px;
      box-shadow: 0 0 5px #ccc;
      cursor: pointer;
}
input[type="submit"]:hover {
      background-color: #005F6B;
}
    

以上CSS代码使用了一些常用的样式属性，如宽度、边距、内边距、边框、圆角、背景色、阴影、文本对齐、弹性盒子等。通过这些属性的组合，我们可以制作出一个简单而有效的登录界面。

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