数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 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" 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+ 次浏览
广告