1、注册
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title><link rel="stylesheet" href="rehisterstyle.css"><script type="text/javascript">// 校验用户名function checkUsername() {var username = document.getElementById("username").value;var span = document.getElementById("usernameSpan");var reg = /^[\u4e00-\u9fa5]{2,4}$/;// 2 - 4位汉字if (username === "" || username === null) {span.innerHTML = "用户名不能为空";span.style.color = "red";return false;} else if (reg.test(username)) {span.innerHTML = "用户名OK";span.style.color = "green";return true;} else {span.innerHTML = "用户名必须是2 - 4位汉字";span.style.color = "red";return false;}}// 校验密码function checkPassword() {var password = document.getElementById("password").value;var span = document.getElementById("passwordSpan");var reg = /^[a-zA-Z][a-zA-Z0-9]{5,7}$/;// 字母开头，6 - 8位字符if (password === "" || password === null) {span.innerHTML = "密码不能为空";span.style.color = "red";return false;} else if (reg.test(password)) {span.innerHTML = "密码OK";span.style.color = "green";return true;} else {span.innerHTML = "密码必须字母开头，6 - 8位字符";span.style.color = "red";return false;}}// 校验确认密码function checkConfirmPassword() {var password = document.getElementById("password").value;var confirmPassword = document.getElementById("confirmPassword").value;var span = document.getElementById("confirmPasswordSpan");if (confirmPassword === "" || confirmPassword === null) {span.innerHTML = "确认密码不能为空";span.style.color = "red";return false;} else if (password!== confirmPassword) {span.innerHTML = "两次输入的密码不一致";span.style.color = "red";return false;} else {span.innerHTML = "密码一致";span.style.color = "green";return true;}}// 校验性别选择function checkGender() {var gender = document.querySelector('input[name="gender"]:checked');var span = document.getElementById("genderSpan");if (!gender) {span.innerHTML = "请选择性别";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}// 校验兴趣选择function checkInterests() {var interests = document.querySelectorAll('input[name="interests"]:checked');var span = document.getElementById("interestsSpan");if (interests.length === 0) {span.innerHTML = "请至少选择一个兴趣";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}// 校验职业选择function checkOccupation() {var occupation = document.getElementById("occupation").value;var span = document.getElementById("occupationSpan");if (occupation === "") {span.innerHTML = "请选择职业";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}function checkRegister() {console.log("checkRegister called");var isUsernameValid = checkUsername();var isPasswordValid = checkPassword();var isConfirmPasswordValid = checkConfirmPassword();var isGenderValid = checkGender();var isInterestsValid = checkInterests();var isOccupationValid = checkOccupation();if (isUsernameValid && isPasswordValid && isConfirmPasswordValid && isGenderValid && isInterestsValid && isOccupationValid) {console.log("Validation passed, redirecting to login page");alert("注册成功！");window.location.href = "login.html";// 跳转到登录页面return false;// 阻止表单默认提交行为} else {console.log("Validation failed");alert("请检查表单内容！");return false;}}window.addEventListener('load', function () {var agreeCheckbox = document.getElementById('agreeCheckbox');var registerButton = document.querySelector('button[type="submit"]');agreeCheckbox.addEventListener('change', function () {if (this.checked) {registerButton.disabled = false;} else {registerButton.disabled = true;}});// 初始状态下禁用注册按钮registerButton.disabled = true;});</script>
</head><body><div class="container"><h2 align="center">注册</h2><form action="#" method="get" onsubmit="return checkRegister()"><table><tr><td>用户名:</td><td><input type="text" id="username" name="username" onblur="checkUsername()" /><span id="usernameSpan">*2 - 4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" id="password" name="password" onblur="checkPassword()" /><span id="passwordSpan">*字母开头，6 - 8位字符</span></td></tr><tr><td>确认密码:</td><td><input type="password" id="confirmPassword" name="confirmPassword" onblur="checkConfirmPassword()" /><span id="confirmPasswordSpan">*请再次输入密码</span></td></tr><tr><td>性别:</td><td><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><span id="genderSpan"></span></td></tr><tr><td>兴趣爱好:</td><td><input type="checkbox" id="reading" name="interests" value="reading"><label for="reading">阅读</label><input type="checkbox" id="sports" name="interests" value="sports"><label for="sports">运动</label><input type="checkbox" id="music" name="interests" value="music"><label for="music">音乐</label><span id="interestsSpan"></span></td></tr><tr><td>职业:</td><td><select id="occupation" name="occupation"><option value="">请选择</option><option value="student">学生</option><option value="teacher">教师</option><option value="engineer">工程师</option></select><span id="occupationSpan"></span></td></tr><tr><td colspan="2"><input type="checkbox" id="agreeCheckbox"> 我同意相关信息</td></tr><tr><td colspan="2" align="center"><button type="submit">注册</button></td></tr></table></form><p align="center" style="color: white">已有账号？<a href="login.html" style="color: white">登录</a></p></div>
</body></html>
2、登录
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><link rel="stylesheet" href="loginstyle.css"><script type="text/javascript">// 校验用户名function checkUsername() {var username = document.getElementById("username").value;var span = document.getElementById("usernameSpan");var reg = /^[\u4e00-\u9fa5]{2,4}$/; // 2-4位汉字if (username == "" || username == null) {span.innerHTML = "用户名不能为空";span.style.color = "red";return false;} else if (reg.test(username)) {span.innerHTML = "用户名OK";span.style.color = "green";return true;} else {span.innerHTML = "用户名必须是2-4位汉字";span.style.color = "red";return false;}}// 校验密码function checkPassword() {var password = document.getElementById("password").value;var span = document.getElementById("passwordSpan");var reg = /^[a-zA-Z][a-zA-Z0-9]{5,7}$/; // 字母开头，6-8位字符if (password == "" || password == null) {span.innerHTML = "密码不能为空";span.style.color = "red";return false;} else if (reg.test(password)) {span.innerHTML = "密码OK";span.style.color = "green";return true;} else {span.innerHTML = "密码必须字母开头，6-8位字符";span.style.color = "red";return false;}}function checkLogin() {console.log("checkLogin called");var isUsernameValid = checkUsername();var isPasswordValid = checkPassword();if (isUsernameValid && isPasswordValid) {console.log("Validation passed, submitting the form");alert("登录成功！");document.forms[0].submit(); // 提交表单return true;} else {console.log("Validation failed");alert("请检查表单内容！");return false;}}</script>
</head><body><div class="container"><h2 align="center">登录</h2><form action="index.html" method="get" onsubmit="return checkLogin()"><table><tr><td>用户名:</td><td><input type="text" id="username" name="username" onblur="checkUsername()" /><span id="usernameSpan">*2-4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" id="password" name="password" onblur="checkPassword()" /><span id="passwordSpan">*字母开头，6-8位字符</span></td></tr><tr><td colspan="2" align="center"><button type="submit">登录</button></td></tr></table></form><p align="center" style="color: white">没有账号？<a href="register.html" style="color: white">注册</a></p></div>
</body></html>
3、主界面
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主界面</title><link rel="stylesheet" href="styles.css">
</head><body><!-- 添加标题 --><h1 class="title">个人网站</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片，需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称，可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box"><h2>个人简历</h2><p></p><img src="img/个人简介.jpg" height="170px" width="140px" /><br><br><br><br><br><!-- 修正此处多了一个双引号的问题 --><a href="resume.html">查看详情</a></div><div class="box"><h2>我的理想</h2><p></p><img src="img/picture02.jpg" height="170px" width="140px" /><br><br><br><br><br><!-- 修正此处多了一个双引号的问题 --><a href="dream.html">查看详情</a></div><div class="box"><h2>我的生活</h2><p></p><img src="img/我的生活.jpg" height="170px" width="140px" /><br><br><br><br><br><a href="life.html">查看详情</a></div><div class="box"><h2>学习内容</h2><p></p><img src="img/我的书籍.jpg" height="170px" width="140px" /><br><br><br><br><br><a href="study.html">查看详情</a></div></div><div class="link-container"><a href="login.html">退出登录</a></div>
</body></html>
4、个人简介界面
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">个人简介</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片，需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称，可根据实际情况修改 --><span class="nickname">依依</span></span><div class="container1"><div class="box1"><h2 class="title1">个人信息</h2><ul><p></p><li>姓名：婷婷</li><p></p><li>出生年月：2005.03.06</li><p></p><li>学历：本科</li><p></p><li>民族：汉</li></ul></div><div class="box1"><h2 class="title1">联系方式</h2><ul><p></p><li>qq：2382275991</li><p></p><li>电话：19151822256</li><p></p><li>微信：19151822256</li><p></p><li>地址：中南林业科技大学</li><p></p><li>毕业学校：中南林业科技大学</li></ul></div><div class="box1"><h2 class="title1">兴趣爱好</h2><p></p><p>喜欢听音乐、学习、画画、看小说、追剧、动漫</p></div><div class="box1"><h2 class="title1">特殊技能</h2><p></p><p>会C/C++、java语言、sql</p></div></div><div class="link-container"><a href="index.html">返回主界面</a></div>
</body>
</html>
5、我的梦想界面
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的理想</title><link rel="stylesheet" href="styles.css">
</head>
<body><body><h1 class="title">我的理想</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片，需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称，可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box1"><h2 class="title1">职业理想</h2><ul><li>成为一名优秀的软件工程师。</li><li>创办一家科技公司，推动技术创新。</li><li>参与开源项目，为社区贡献力量。</li><li>成为一名技术导师，帮助更多人学习编程。</li></ul></div><div class="box1"><h2 class="title1">生活理想</h2><ul><li>环游世界，体验不同的文化和风景。</li><li>拥有一个温馨的家庭，享受平凡的生活。</li><li>保持健康的生活方式，坚持锻炼和阅读。</li><li>学习一门乐器，丰富自己的精神世界。</li></ul></div><div class="box1"><h2 class="title1">学习理想</h2><ul><li>掌握多门编程语言，成为全栈开发者。</li><li>学习人工智能和机器学习，探索未来科技。</li><li>提升英语水平，能够流利地与外国人交流。</li><li>阅读100本经典书籍，拓宽知识面。</li></ul></div><div class="box1"><h2 class="title1">社会理想</h2><ul><li>帮助贫困地区的孩子获得教育机会。</li><li>参与环保活动，为保护地球贡献力量。</li><li>推动社会公平，关注弱势群体的权益。</li><li>成为一名志愿者，积极参与公益活动。</li></ul></div></div><div class="link-container"><a href="index.html">返回主界面</a></div></body></html>
6、我的生活界面
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的生活</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">我的生活</h1><p></p><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片，需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称，可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box2"><h2 class="title1">吃饭</h2><img class="img" src="img/吃饭1.jpg" alt=""/></div><div class="box2"><h2 class="title1">运动</h2><img class="img" src="img/运动.jpg" alt=""/></div><div class="box2"><h2 class="title1">志愿</h2><img class="img" src="img/志愿.jpg " alt=""/></div><div class="box2"><h2 class="title1">旅游</h2><img class="img" src="img/旅行.jpg" alt=""/></div></div><div class="link-container"><a href="index.html">返回主界面</a></div>
</body>
</html>
7、我的学习界面
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的学习</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">我的学习</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片，需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称，可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box1"><h2 class="title1">编程学习</h2><ol><li>HTML/CSS：掌握网页开发基础。</li><li>JavaScript：学习前端交互逻辑。</li><li>Python：掌握数据分析与人工智能。</li><li>Java：深入学习后端开发。</li></ol></div><div class="box1"><h2 class="title1">设计学习</h2><ol><li>UI/UX设计：学习用户界面与用户体验设计。</li><li>Photoshop：掌握图像处理技巧。</li><li>Figma：学习原型设计与团队协作。</li><li>Illustrator：掌握矢量图形设计。</li></ol></div><div class="box1"><h2 class="title1">语言学习</h2><ol><li>英语：提升听说读写能力。</li><li>日语：学习基础语法与词汇。</li><li>法语：掌握基础会话与写作。</li><li>西班牙语：了解基础语法与文化。</li></ol></div><div class="box1"><h2 class="title1">其他技能</h2><ol><li>项目管理：学习敏捷开发与团队协作。</li><li>数据分析：掌握Excel与SQL。</li><li>写作：提升技术文档与博客写作能力。</li><li>演讲：学习公开演讲与表达技巧。</li></ol></div></div><div class="link-container"><a href="index.html">返回主界面</a></div></body></html>
8、CSS格式
/* 设置背景图片 */body {background-color: gray;background-image: url(img/d.jpg);background-size: cover; /* 使背景图片覆盖整个背景区域 */background-position: center; /* 将背景图片居中 */background-repeat: no-repeat; /* 防止背景图片重复 */font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;}/* 设置容器样式 */.container {border-radius: 10px;width: 500px;padding: 20px;background-image: url(img/个人网站.jpg);background-size: cover;background-position: center;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}/* 设置表格样式 */table {margin: auto;color: black;}/* 设置输入框样式 */input[type="text"],input[type="password"],select,textarea {width: 100%;padding: 8px;margin: 5px 0;border: 1px solid #ccc;border-radius: 4px;}/* 设置按钮样式 */button {width: 60%;padding: 10px;background-color: deepskyblue;color: white;border: none;border-radius: 4px;cursor: pointer;}button:disabled {background-color: #ccc;cursor: not-allowed;}/* 设置提示信息样式 */span {font-size: 13px;color: red;}/* 设置密码格式提示样式 */#passwordSpan {color: gray;/* 初始提示文字颜色 */}
9、相关页面展示
