html做一個登錄註冊頁面，用 HTML 和 CSS 實現
html做一個登錄註冊頁面，下面是一個簡單的登錄註冊頁面示例代碼，使用 HTML 和 CSS 實現頁面樣式和布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄/註冊</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
form {
background-color: #fff;
padding: 20px;
margin: 10px;
width: 400px;
border-radius: 10px;
}
h1 {
margin-top: 0;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="password"] {
padding: 5px;
border-radius: 2px;
border: none;
width: 100%;
margin-top: 5px;
}
button[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
border-radius: 2px;
width: 100%;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h1>登錄</h1>
<label>用戶名:</label>
<input type="text" placeholder="請輸入用戶名">
<label>密碼:</label>
<input type="password" placeholder="請輸入密碼">
<button type="submit">登錄</button>
</form>
<form>
<h1>註冊</h1>
<label>用戶名:</label>
<input type="text" placeholder="請輸入用戶名">
<label>密碼:</label>
<input type="password" placeholder="請輸入密碼">
<label>確認密碼:</label>
<input type="password" placeholder="請再次輸入密碼">
<button type="submit">註冊</button>
</form>
</body>
</html>代碼元素解釋：
- `<!DOCTYPE html>`：文檔類型聲明，告訴瀏覽器當前文檔使用的是 HTML5 規範。
- `<html>`：HTML 頁面的根元素，包含整個頁面的內容。
- `<head>`：頁面頭部，包含元數據和其他引用信息。
- `<meta>`：用於設置頁面的元數據，如字符集、關鍵詞等。
- `<title>`：頁面標題，顯示在瀏覽器的標簽欄上。
- `<style>`：用於設置頁面的樣式和布局。
- `<body>`：頁面的主要內容部分。
- `<form>`：頁面表單元素，用於收集用戶信息。
- `<h1>`：標頭元素，用於顯示標題文本。
- `<label>`：表單標註元素，用於標註表單項。
- `<input>`：表單輸入元素，提供給用戶輸入。
- `type="text"`、`type="password"`：輸入元素的類型，text 用於輸入用戶名等文本，password 用於輸入密碼等敏感信息。
- `placeholder`：輸入框中預先填充的文本。
- `<button>`：表單按鈕元素，用於提交表單信息。
- `type="submit"`：按鈕的類型，表示提交表單信息。
效果截圖
