页面布局流程：

1、头部区域：

 包含一个展示三星堆 logo 和标题的 div，以及一个导航菜单（首页, 历史, 工艺, 文化, 更多）。

 使用 flex 布局，使 logo 和导航菜单横向排列。



2、主要内容区域1：

 包含一个介绍黄金面具的文本区域和一个图片区域。

 使用 flex 布局，使文本和图片横向排列。

3、主要内容区域2：

 包含一个展示青铜人头像和戴金面罩的标题区域。

 使用 flex 布局，使两个不同类型的青铜人头像横向排列。

2.3 List3页面设计说明

页面布局流程：

头部区域：

 包含一个展示三星堆 logo 和标题的 div，以及一个导航菜单（首页, 历史, 工艺, 文化, 更多）。

 使用 flex 布局，使 logo 和导航菜单横向排列。

主要内容区域1：

 包含五个介绍不同三星堆青铜器的文本区域。

 使用 flex 布局，使文本和标题横向排列。

主要内容区域2：

 包含四个展示青铜器图片和描述的区域。

 使用 flex 布局，使图片和文本横向排列。

2.4 List4页面设计说明

页面布局流程

头部区域：

 包含一个展示三星堆 logo 和标题的 div，以及一个导航菜单（首页, 历史, 工艺, 文化, 更多）。

 使用 flex 布局，使 logo 和导航菜单横向排列。

顶部分区域：

 包含两个文本元素，展示主要内容的标题和英文翻译。

 主要内容区域（Main Content Section）：

 包含三个展示玉石器图片和描述的区域。

 使用 flex 布局，使图片和文本横向排列。

2.5 List5页面设计说明

页面布局流程

头部区域：

 包含一个展示三星堆 logo 和标题的 div，以及一个导航菜单（首页, 历史, 工艺, 文化, 更多）。

 在导航菜单旁边新增一个显示个人信息的区域。

 使用 flex 布局，使 logo、导航菜单和个人信息横向排列。

主要内容区域：

 包含三个展示个人信息、班级信息和学号信息的区域。

 使用 flex 布局，使这些信息横向排列。

 每个区域包含一张图片和相关信息的描述。

2.6 网站登录、注册页开发及表单的动态验证设计说明

表单验证功能实现详细说明：

HTML 结构：

表单头部与页面结构：

包含网页头部区域、导航栏、以及表单所在的内容区域。

头部区域 (

表单输入字段：

使用

包含每个输入字段，配合

标签显示提示文字。

输入字段包括用户名、密码、确认密码、真实姓名、出生日期、电子邮箱、电话号码、地址和邮编。

JavaScript 实现动态验证

获取表单元素：

使用 document.getElementById 方法获取表单元素和输入字段元素。例：

let username = document.getElementById("username").value.trim();

添加提交事件监听器：

通过 document.getElementById(“form”).addEventListener(“submit”, function (event) { … }) 为表单添加提交事件监听器，阻止默认提交行为：

event.preventDefault();

3.正则表达式定义

定义用于验证的正则表达式：

let usernameRegex = /^[a-zA-Z0-9]{3,15}$/;

let passwordRegex = /^.{6,15}$/;

let chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/;

let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

let phoneNumberRegex = /^\d*$/;

let postalRegex = /^\d{6}$/;

4.输入验证

使用 if 条件语句结合正则表达式对输入字段进行验证。

if (!usernameRegex.test(username)) {

alert("用户名格式不正确，必须是英文字母或数字，长度3-15！");

return;

}

if (!passwordRegex.test(password)) {

alert("密码长度必须在6到15位之间！");

return;

}

if (password !== confirmPassword) {

alert("确认密码与密码不一致！");

return;

}

if (!chineseNameRegex.test(realName)) {

alert("真实姓名必须是中文，2-10个字符！");

return;

}

if (email === "" || !emailRegex.test(email)) {

alert("电子邮箱格式不正确！");

return;

}

if (phoneNumber !== "" && !phoneNumberRegex.test(phoneNumber)) {

alert("电话号码必须是数字！");

return;

}

if (address.length > 100) {

alert("地址长度不能大于100个字符！");

return;

}

if (postal !== "" && !postalRegex.test(postal)) {

alert("邮编必须是6位数字！");

return;

}

出生日期验证：

如果用户输入了出生日期，验证其年龄是否大于等于 10 岁：

if (birthdate) {

let today = new Date();

let birthDate = new Date(birthdate);

let age = today.getFullYear() - birthDate.getFullYear();

if (age < 10) {

alert("年龄必须大于等于10岁！");

return;

}

flag = 1;

tempAge = age;

}

注册成功提示：

根据验证结果，弹出注册成功提示信息：

if (flag == 1) {

alert(`注册成功！当前年龄为${tempAge}`);

} else {

alert(`注册成功！`);

}

3 课程设计总结

在进行本次课程设计期间，我在CSDN、百度、ChatGPT、哔哩哔哩以及GitHub的帮助下完成了课程设计，因此我最大的收获就是掌握了通过网络查询查询来解决问题的能力。

通过这次课程设计，我接触到了许多新知识，深刻意识到了自己能力的薄弱。学海无涯，在未来的学习中，我会认真对待，努力提升个人能力。

最后

需要源码可联系