[分享]css做一个登入界面

CSS是一种用于网页样式设计的语言，能够美化页面，同时也可以用它来设计一个漂亮的登入界面。首先，我们需要HTML来构建登入界面的基本框架，然后使用CSS来美化它。在HTML中，我们可以按如下方式创建一...

CSS是一种用于网页样式设计的语言，能够美化页面，同时也可以用它来设计一个漂亮的登入界面。

首先，我们需要HTML来构建登入界面的基本框架，然后使用CSS来美化它。在HTML中，我们可以按如下方式创建一个简单的登入表单：

<form id="login-form">
  <div>
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码</label>
    <input type="password" id="password" name="password" required>
  </div>
  <div>
    <button type="submit">登入</button>
  </div>
</form> 

这里我们使用了一个form标签和三个div标签，每个div标签包含一个label和一个input标签，分别用来输入用户名和密码。此外，我们还加入了一个button标签用于触发登入事件。

接下来，我们使用CSS来美化登入表单：

/* 登入表单样式 */
#login-form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

/* 输入框样式 */
#login-form input {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 按钮样式 */
#login-form button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #428bca;
  border: none;
  border-radius: 5px;
  color: #fff;
}

/* 按钮悬停样式 */
#login-form button:hover {
  background-color: #3071a9;
} 

上面的CSS样式做了以下几件事情：

• 为表单设置了一个宽度并居中对齐
• 为表单设置了背景色和圆角等样式
• 为输入框设置了边框、圆角和内部填充
• 为按钮设置了背景色、边框、圆角和文字颜色
• 为按钮设置了悬停样式

通过这些样式，我们就可以创建一个美观的登入界面了。