資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次瀏覽
廣告