HTML代码。
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="register-container">
<h2>注册</h2>
<form id="registerForm">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required minlength="8"> <!-- 设置密码最小长度 -->
</div>
<div class="form-group">
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required minlength="8"> <!-- 设置密码最小长度 -->
</div>
<div class="form-group">
<!-- 用于提交表单的按钮 -->
<button type="submit" id="submitBtn">注册</button> <!-- 使用JavaScript处理表单提交 -->
</div>
</form>
</div> <!-- 注册容器结束 -->
<script src=https://www.271shop.com/static/image/nopic320.png <!-- JavaScript脚本文件位置 -->
</body>
</html>CSS代码（styles.css）：
body {
font-family: Arial, sans-serif;
}
.register-container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 15px; /设置底部边距 */ } 省略了具体的样式细节，可以根据实际需求自行添加，这些样式可以根据你的设计需求进行调整，你可以设置输入框的大小、颜色、边框样式等，按钮的样式也可以自定义，包括背景色、字体颜色等，CSS样式可以根据你的具体需求进行无限定制，请确保你的CSS代码符合你的设计需求，JavaScript代码（script.js）这是一个简单的表单验证示例，在实际应用中，你可能需要使用更复杂的验证逻辑和API调用，这里只是一个基本的示例：document.getElementById(’registerForm’).addEventListener(’submit’, function(event) { //阻止表单自动提交 event.preventDefault(); //获取表单数据 var username = document.getElementById(’username’).value; var email = document.getElementById(’email’).value; var password = document.getElementById(’password’).value; var confirmPassword = document
