[分享]css做好登陆界面

发布于 2024-11-11 15:56:20

CSS是用来增强HTML元素样式和布局的一种技术。在设计登陆界面时，CSS可以给用户提供一个视觉上吸引人的界面，同时也可以增加用户的使用便利性。下面我们来看看如何使用CSS来制作一个好看的登陆界面。....

CSS是用来增强HTML元素样式和布局的一种技术。在设计登陆界面时，CSS可以给用户提供一个视觉上吸引人的界面，同时也可以增加用户的使用便利性。下面我们来看看如何使用CSS来制作一个好看的登陆界面。

.login-form {
   width: 300px;
   margin: 0 auto;
   background-color: #FFFFFF;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.login-form input[type="text"],
.login-form input[type="password"] {
   width: 100%;
   padding: 10px 5px;
   margin: 8px 0;
   box-sizing: border-box;
   border: none;
   border-bottom: 2px solid #CCCCCC;
}

.login-form button[type="submit"] {
   background-color: #4CAF50;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   float: right;
}

.login-form button[type="submit"]:hover {
   background-color: #45a049;
}

.login-form a {
   color: #008CBA;
   text-decoration: none;
}

.login-form a:hover {
   color: #005580;
}

以上代码为简单的登陆表单，其中我们针对每个表单元素进行设置，包括宽度、内边距、外边距等，并且为提交按钮设置了样式，让界面更加美观。

接下来，我们可以使用HTML和CSS来实现整个登陆界面。

<!DOCTYPE html>
<html>
   <head>
      <title>登陆页面</title>
      <link rel="stylesheet" href="login.css">
   </head>
   <body>
      <div class="login-form">
         <h2>用户登录</h2>
         <form action="#" method="post">
            <label for="username">用户名</label>
            <input type="text" name="username" required>
            <label for="password">密码</label>
            <input type="password" name="password" required>
            <button type="submit">登录</button>
         </form>
         <div class="link">
            <a href="#">忘记密码</a><br>
            <a href="#">新用户注册</a>
         </div>
      </div>
   </body>
</html>

通过以上代码，我们可以实现一个简单的登陆界面，同时也可以通过CSS对表单进行美化，让用户在登陆界面的时候能够有更好的使用体验。

css 教程