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、相关页面展示
