使用 HTML 和 CSS 设计一个透明的登录/注册网页

在 HTML 中，登录表单用于收集用户信息，并包含一个按钮用于发送详细信息以进行服务器端操作。登录表单包含基本信息，例如姓名、出生日期、电子邮件、手机号码、性别、地址等。如今，HTML 表单几乎用于互联网上的每个网站来收集用户信息。

在本文中，我们将使用 HTML 和 CSS 在网页上设计一个透明的登录表单。

设计一个透明的登录/注册网页

以下是如何操作：

  • 创建一个 <div> 元素，并将其类命名为 "login-container"。

  • 在其中，再创建两个 <div> 元素，并将其类命名为 "textbox"，用于用户名和密码字段。

  • 然后，添加一个 <input> 元素，并将其类命名为 "btn"，用于登录按钮。

  • 然后，为了使登录表单透明，我们使用 CSS 的 background 属性将其设置为 none 来设置 ".textbox" 输入类的样式。

示例

在下面的示例中，我们使用上述方法使用 HTML 和 CSS 在网页上设计一个透明的登录表单：

<!DOCTYPE html>
<html>
<head>
   <title>Transparent Login Form</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">
   <style>
      body {
         margin: 0;
         padding: 0;
         font-family: sans-serif;
         background-color: lightslategray;
         background-size: cover;
      }
      .login-container{
         width: 280px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         color: white;
      }
      .login-box h1{
         border-bottom: 6px solid whitesmoke;
      }
      .textbox{
         width: 100%;
         overflow: hidden;
         font-size: 20px;
         padding: 8px 0;
         margin: 8px 0;
         border-bottom: 1px solid whitesmoke;
      }
      .textbox i {
         width: 26px;
         float: left;
         text-align: center;
      }
      .textbox input{
         border: none;
         outline: none;
         background: none;
         color: white;
         font-size: 18px;
         width: 80%;
         float: left;
         margin: 0 10px;
      }
      .btn{
         width: 100%;
         background: none;
         border: 2px solid whitesmoke;
         color: white;
         padding: 5px;
         font-size: 18px;
         cursor: pointer;
         margin: 12px 0;
      }
      h1{
         text-align: center;
         font-size:x-large;
         padding-bottom: 50px;
         color: purple;
      }
   </style>
</head>
<body>
   <div class="login-container">
      <h1>Tutorialspoint - Login</h1>
      <div class="textbox">
         <i class="fas fa-user"></i>
         <input type="text" placeholder="Username">
      </div>
      <div class="textbox">
         <i class="fas fa-lock"></i>
         <input type="password" placeholder="password">
      </div>
      <input type="button" class="btn" value="Login">
   </div>
</body>
</html>


更新于： 2023年8月4日

2K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告