[分享]css做一个用户登录框

CSS是一门网页设计语言，可以实现丰富的网页效果，其中之一就是用户登录框，我们来看看如何使用CSS来实现。首先，我们需要先写一个HTML结构： 用户登录 用户名: 密码: 上面的代码中，我们使...

CSS是一门网页设计语言，可以实现丰富的网页效果，其中之一就是用户登录框，我们来看看如何使用CSS来实现。

首先，我们需要先写一个HTML结构：

<div class="login">
  <h2>用户登录</h2>
  <form action="" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="提交">
  </form>
</div> 

上面的代码中，我们使用了div标签来包含整个登录框，h2标签来显示登录框的标题，form标签来实现登录表单，并使用了label标签和input标签来实现输入框和按钮。

接下来，我们使用CSS来美化登录框：

.login {
  margin: 50px auto;
  width: 300px;
  padding: 20px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h2 {
  text-align: center;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  width: 100%;
  background-color: #428bca;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #3071a9;
} 

上面的代码中，我们设置了登录框的宽度和边距，给登录框添加了背景色、边框和圆角，使其看起来更美观。我们还对输入框和提交按钮进行了样式设置，让它们更加醒目。

最终的效果如下：

用户登录