使用 HTML 和 CSS 设计一个透明的登录/注册网页
htmlcssweb developmentfront end technology更新于 2024/11/16 7:40:17
在 HTML 中，登录表单用于收集用户信息，并包含一个按钮用于发送详细信息以供服务器端操作。登录表单包含姓名、出生日期、电子邮件、手机号码、性别、地址等基本信息。如今，几乎每个网站都使用 HTML 表单来收集用户信息。
在本文中，我们将使用 HTML 和 CSS 在网页上设计一个透明的登录表单。
设计一个透明的登录/注册网页
方法如下:
创建一个 <div> 元素，类名为"login-container"。
在其中，创建另外两个 <div>元素，其类名为"textbox"，用于用户名和密码字段。
然后，添加一个 <input> 元素，其类名为"btn"，用于登录按钮。
然后，为了使登录表单透明，我们设置了".textbox"输入类的样式，并将 CSS background 属性设置为 none。
示例
在下面的示例中，我们使用上述方法在网页中使用 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>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
