当前位置：首页 > news >正文

基于自由表格布局的个人网站设计

news 2026/4/18 10:31:25

基于自由表格布局的个人网站设计

基于自由表格布局的个人网站设计
- 一、实验目的
- 二、实验内容与设计思想
- 三、实验环境
- 四、站点文件结构
- 五、页面实现要点
  - 1. index.html —— 首页
  - 2. about.html —— 成员列表页
  - 3. about-CRY/LQR/WL/XQ.html —— 个人详情页
  - 4. skills.html —— 专业特长页
  - 5. contact.html —— 联系方式页
- 六、表格布局核心技术总结
- 七、调试过程中遇到的问题
- 八、实验小结
- 九、参考文献

一、实验目的

掌握常见HTML标签的使用，包括文本标签、图像标签、超链接标签、表格标签等；熟悉表格对页面布局的作用，理解自由表格布局的原理与实现方式；能够独立设计并实现一个结构清晰、风格统一的个人网站。

二、实验内容与设计思想

设计个人网站，包括导航栏（首页、个人简介、专业特长、联系方式），首页布局采用表格布局，实现导航栏中各栏目的导航链接，各链接目标页面均制作完成。首页包含个人简介、表彰奖励和励志名言，完全采用自由表格布局，并设计突出个性的LOGO图片作为网站标识。

三、实验环境

操作系统：Microsoft Windows 11专业版
浏览器：IE / FireFox / 360 / Google Chrome
编程工具：记事本 / DreamWeaver CS5

四、站点文件结构

website/
├── index.html          // 首页 - 导航+团队介绍+励志名言
├── about.html          // 个人简介 - 四位成员列表入口
├── about-CRY.html      // 蔡芮妍 - 个人详情页
├── about-LQR.html      // 林沁茹 - 个人详情页
├── about-WL.html       // 王璐 - 个人详情页
├── about-XQ.html       // 许晴 - 个人详情页
├── skills.html         // 专业特长 - 技能进度条展示
├── contact.html        // 联系方式 - 成员标签页切换
└── img/├── logo.jpg        // 网站LOGO├── background.gif  // 首页背景动图├── cry.jpg         // 蔡芮妍头像├── lqr.jpg         // 林沁茹头像├── wl.jpg          // 王璐头像└── xq.jpg          // 许晴头像

五、页面实现要点

1. index.html —— 首页

首页是整个站点的入口，采用表格实现三大区域布局：

导航栏：使用单行四列表格 <table> 横向排列"首页、个人简介、专业特长、联系方式"四个导航项，通过 <td> 的 hover 效果和 active 类实现当前页高亮，JS脚本根据当前页面路径自动设置高亮状态。
团队介绍区：使用多行两列表格，左列为头像（<img> 嵌套在圆形 <div> 中），右列为姓名、所在地、个人宣言及"查看简介"链接。表格设置 border-collapse: separate 和 border-spacing 实现卡片间距效果。
LOGO设计：在标题区左侧放置 logo.jpg，设置 border-radius: 50% 圆形裁剪，配合 box-shadow 增加层次感，作为网站个性标识。
励志名言区：底部引用区块展示小组宣言，配合CTA按钮链接到技能页面。
背景处理：使用 GIF 动图作为 body 背景图，设置 background-attachment: fixed 实现固定背景效果。

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><title>首页 | 网安小组 · 个人站点</title><link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background: #f5f7fb;font-family: 'Inter', sans-serif;padding: 2rem 1.5rem;min-height: 100vh;display: flex;align-items: center;justify-content: center;font-family: "微软雅黑", "Segoe UI", Arial, sans-serif;/* ========== GIF 动图背景 ========== */background-image: url('./img/background.gif');background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed;color: #333;line-height: 1.6;padding: 20px;min-height: 100vh;/* 加一层深色遮罩，让 GIF 不那么刺眼，文字更清晰 */position: relative;}.home-container {max-width: 1200px;width: 100%;margin: 0 auto;}/* ========= 表格导航栏 ========= */.nav-table-wrapper {background: #ffffff;border-radius: 2rem;box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.08);margin-bottom: 2rem;overflow: hidden;border: 1px solid #eef2f8;}.nav-table {width: 100%;border-collapse: collapse;background: #ffffff;}.nav-table td {text-align: center;padding: 1rem 0.8rem;font-weight: 600;font-size: 1rem;letter-spacing: 0.3px;transition: all 0.2s ease;}.nav-table a {text-decoration: none;color: #2c3f4f;display: inline-flex;align-items: center;gap: 8px;padding: 0.4rem 1.2rem;border-radius: 40px;transition: all 0.2s;font-weight: 500;}.nav-table a i {font-size: 1rem;color: #6a8aa0;transition: color 0.2s;}.nav-table td:hover a {background: #eef3fc;color: #1f5a7e;transform: translateY(-2px);}.nav-table td:hover a i {color: #1f5a7e;}.nav-table td.active a {background: #eef3fc;color: #1f5a7e;font-weight: 600;}.nav-table td.active a i {color: #1f5a7e;}@media (max-width: 680px) {.nav-table, .nav-table tbody, .nav-table tr, .nav-table td {display: block;width: 100%;}.nav-table tr {display: flex;flex-wrap: wrap;justify-content: center;border-bottom: 1px solid #eef2f8;}.nav-table td {width: auto;padding: 0.6rem 0.2rem;}.nav-table a {padding: 0.3rem 0.8rem;font-size: 0.85rem;}}/* ========= 首页主内容卡片 ========= */.hero-card {background: #ffffff;border-radius: 2rem;box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.05);overflow: hidden;margin-bottom: 2rem;}.hero-inner {padding: 2.5rem 2.8rem;}/* Logo 和标题左右并排 */.hero-header {display: flex;align-items: center;gap: 1.5rem;margin-bottom: 1rem;flex-wrap: nowrap;}.hero-logo {flex-shrink: 0;}.hero-logo-img {width: 80px;height: 80px;border-radius: 50%;object-fit: cover;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);border: 3px solid white;transition: transform 0.2s;}.hero-logo-img:hover {transform: scale(1.02);}.hero-title-area {flex: 1;}.welcome-badge {font-size: 0.75rem;letter-spacing: 3px;font-weight: 600;color: #8b9eb0;text-transform: uppercase;background: #f0f4f9;display: inline-block;padding: 0.2rem 1rem;border-radius: 40px;margin-bottom: 0.5rem;}.hero-title {font-size: 2.6rem;font-weight: 800;color: #1f2a3e;letter-spacing: -0.5px;background: linear-gradient(135deg, #1e2b3c 0%, #2c3e4e 100%);background-clip: text;-webkit-background-clip: text;color: transparent;margin-bottom: 0.5rem;line-height: 1.2;}.hero-sub {font-size: 1rem;color: #4a6a7f;border-left: 3px solid #bdd3e8;padding-left: 1.2rem;font-weight: 400;}/* 团队介绍区域 */.team-section {margin: 2rem 0 1rem;}.team-title {font-size: 1.6rem;font-weight: 700;color: #1f2e3c;display: flex;align-items: center;gap: 12px;margin-bottom: 1.5rem;}.team-title i {background: #eef2f8;padding: 0.5rem;border-radius: 50%;color: #2c5a74;}.team-table {width: 100%;border-collapse: separate;border-spacing: 0 1rem;}.team-table td {background: #fefeff;border-radius: 1.2rem;border: 1px solid #eef2f8;padding: 1rem 1.2rem;vertical-align: middle;transition: all 0.2s;}.team-table td:hover {transform: translateY(-2px);border-color: #d0e0ee;box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.08);}.member-avatar {width: 70px;text-align: center;}.avatar-circle {width: 55px;height: 55px;background: linear-gradient(145deg, #e0e9f2, #d1dee9);border-radius: 50%;display: flex;align-items: center;justify-content: center;overflow: hidden;margin: 0 auto;}.member-name {font-weight: 700;font-size: 1rem;color: #1f2e3c;}.member-bio {font-size: 0.75rem;color: #6a8aa0;margin-top: 3px;}.view-profile {font-size: 0.7rem;font-weight: 500;color: #2c5a74;margin-top: 6px;display: inline-block;text-decoration: none;}.view-profile:hover {text-decoration: underline;}.quote-block {background: #f9fbfd;border-radius: 1.5rem;padding: 1.2rem 1.8rem;margin: 1.5rem 0 0.5rem;border: 1px solid #eef2f8;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}.quote-text {font-weight: 500;color: #2c3f4f;font-size: 0.9rem;}.quote-text i {color: #b4c8da;margin-right: 8px;}.cta-btn {background: #1f2e3c;padding: 0.5rem 1.2rem;border-radius: 2rem;color: white;text-decoration: none;font-size: 0.8rem;font-weight: 500;transition: 0.2s;}.cta-btn:hover {background: #2c5a74;transform: translateY(-2px);}.school-info {margin-top: 1rem;display: flex;gap: 1rem;flex-wrap: wrap;justify-content: space-between;align-items: center;font-size: 0.75rem;color: #6a8aa0;}.friend-section {background: #ffffff;border-radius: 1.2rem;padding: 0.8rem;text-align: center;border: 1px solid #eef2f8;margin-top: 0;}.footer-note {text-align: center;margin-top: 1.5rem;font-size: 0.7rem;color: #9aaebf;border-top: 1px solid #eef2f8;padding-top: 1.2rem;}@media (max-width: 720px) {.hero-inner { padding: 1.5rem; }.hero-title { font-size: 1.8rem; }.hero-sub { font-size: 0.85rem; }.team-table, .team-table tbody, .team-table tr, .team-table td {display: block;width: 100%;}.team-table tr { margin-bottom: 0.8rem; display: block; }.team-table td { display: flex; align-items: center; gap: 0.8rem; }.member-avatar { width: auto; }.quote-block { flex-direction: column; gap: 0.8rem; text-align: center; }}@media (max-width: 550px) {.hero-header {flex-wrap: wrap !important;justify-content: center;text-align: center;}.hero-title-area {text-align: center;}.hero-logo-img {width: 70px;height: 70px;}.hero-sub {text-align: left;}}</style>
</head>
<body>
<div class="home-container"><!-- 导航栏 --><div class="nav-table-wrapper"><table class="nav-table"><tr><td class="active"><a href="index.html"><i class="fas fa-home"></i> 首页</a></td><td><a href="about.html"><i class="fas fa-user-circle"></i> 个人简介</a></td><td><a href="skills.html"><i class="fas fa-code"></i> 专业特长</a></td><td><a href="contact.html"><i class="fas fa-envelope"></i> 联系方式</a></td></tr></table></div><!-- 主内容卡片 --><div class="hero-card"><div class="hero-inner"><!-- Logo 和标题左右并排 --><div class="hero-header"><div class="hero-logo"><img src=".\img\logo.jpg" alt="JMU Logo" class="hero-logo-img" onerror="this.src='https://placehold.co/80x80/2c5a74/white?text=JMU'"></div><div class="hero-title-area"><div class="welcome-badge"><i class="fas fa-shield-alt"></i> 网安小组 · 青春力量</div><div class="hero-title">网络空间安全 · 2024级</div><div class="hero-sub">代码为盾，热爱为矛 | 集美大学网络空间安全专业 · 大二学生</div></div></div><!-- 核心成员 --><div class="team-section"><div class="team-title"><i class="fas fa-users"></i> 核心成员</div><table class="team-table"><!-- 蔡芮妍 --><tr><td class="member-avatar"><div class="avatar-circle"><img src="./img/cry.jpg" alt="蔡芮妍" style="width:100%; height:100%; border-radius:50%; object-fit:cover;"></div></td><td class="member-info"><div class="member-name">蔡芮妍 · Ruiyan Cai</div><div class="member-bio"><i class="fas fa-map-pin"></i> 福建厦门 · 网络空间安全 · 2024级</div><div class="member-bio">✨ 宣言：「命运的洪流不可阻挡，我的回答是向前」</div><a href="about-CRY.html" class="view-profile">查看简介 →</a></td></tr><!-- 林沁茹 --><tr><td class="member-avatar"><div class="avatar-circle"><img src="./img/lqr.jpg" alt="林沁茹" style="width:100%; height:100%; border-radius:50%; object-fit:cover;"></div></td><td class="member-info"><div class="member-name">林沁茹 · Qingru Lin</div><div class="member-bio"><i class="fas fa-map-pin"></i> 福建厦门 · 网络空间安全 · 2024级</div><div class="member-bio">✨ 宣言：「我身上有个不可战胜的夏天」</div><a href="about-LQR.html" class="view-profile">查看简介 →</a></td></tr><!-- 王璐 --><tr><td class="member-avatar"><div class="avatar-circle"><img src="./img/wl.jpg" alt="王璐" style="width:100%; height:100%; border-radius:50%; object-fit:cover;"></div></td><td class="member-info"><div class="member-name">王璐 · Lu Wang</div><div class="member-bio"><i class="fas fa-map-pin"></i> 福建厦门 · 网络空间安全 · 2024级</div><div class="member-bio">✨ 宣言：「海压竹枝低复举，风吹山角晦还明」</div><a href="about-WL.html" class="view-profile">查看简介 →</a></td></tr><!-- 许晴 --><tr><td class="member-avatar"><div class="avatar-circle"><img src="./img/xq.jpg" alt="许晴" style="width:100%; height:100%; border-radius:50%; object-fit:cover;"></div></td><td class="member-info"><div class="member-name">许晴 · Qing Xu</div><div class="member-bio"><i class="fas fa-map-pin"></i> 福建厦门 · 网络空间安全 · 2024级</div><div class="member-bio">✨ 宣言：「知不足而奋进，望远山而前行」</div><a href="about-XQ.html" class="view-profile">查看简介 →</a></td></tr></table></div><!-- 激励语句 --><div class="quote-block"><div class="quote-text"><i class="fas fa-terminal"></i> 目前主攻Web安全、Java开发与密码学 · 持续打怪升级</div><a href="skills.html" class="cta-btn">✨ 探索技能树 →</a></div><!-- 学校信息 --><div class="school-info"><span><i class="fas fa-graduation-cap"></i> 集美大学 · 网络空间安全实验班</span><span><i class="fas fa-laptop-code"></i> 2024 - 2028 · 奋发向前</span></div></div></div><!-- 交朋友提示 --><div class="friend-section"><p style="font-size: 0.8rem; color: #2c5a74;"><i class="fas fa-hand-peace"></i> 欢迎交流技术、共同进步 · 点击导航栏「联系方式」或 <a href="contact.html" style="color: #1f5a7e; font-weight: 600;">直接交个朋友</a> ✨</p></div><!-- 页脚 --><div class="footer-note"><i class="far fa-copyright"></i> 2025 网安小组 · 厦门集美 | 保持热爱，奔赴山海</div>
</div><script>(function setActiveNav() {const currentPath = window.location.pathname.split('/').pop();const navCells = document.querySelectorAll('.nav-table td');navCells.forEach(cell => cell.classList.remove('active'));if (currentPath === '' || currentPath === 'index.html' || currentPath === 'index.jsp' || currentPath === 'home.html' || currentPath === 'index') {if (navCells[0]) navCells[0].classList.add('active');} else if (currentPath.includes('about')) {if (navCells[1]) navCells[1].classList.add('active');} else if (currentPath.includes('skills')) {if (navCells[2]) navCells[2].classList.add('active');} else if (currentPath.includes('contact')) {if (navCells[3]) navCells[3].classList.add('active');} else {if (navCells[0]) navCells[0].classList.add('active');}})();
</script>
</body>
</html>

2. about.html —— 成员列表页

采用 CSS Grid 网格布局展示四位成员卡片（实验要求表格布局，此处为导航中间页，核心布局在子页面实现）。每个成员卡片包含大尺寸头像、中英文姓名，点击后跳转到对应的 about-XXX.html 详情页。

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><title>团队成员 | 个人简介</title><link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>* { margin: 0; padding: 0; box-sizing: border-box; }body {background: #f5f7fb;font-family: 'Inter', sans-serif;display: flex;align-items: center;justify-content: center;min-height: 100vh;padding: 2rem 1.5rem;}.team-card {max-width: 1000px;width: 100%;background-color: #ffffff;border-radius: 2rem;box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.1);overflow: hidden;}.team-inner { padding: 2rem 2rem 2.5rem; }/* 导航栏 */.nav-table-wrapper {background: #ffffff;border-radius: 2rem;box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.08);margin-bottom: 2rem;overflow: hidden;border: 1px solid #eef2f8;}.nav-table { width: 100%; border-collapse: collapse; background: #ffffff; }.nav-table td { text-align: center; padding: 1rem 0.8rem; transition: all 0.2s; }.nav-table a {text-decoration: none;color: #2c3f4f;display: inline-flex;align-items: center;gap: 8px;padding: 0.4rem 1.2rem;border-radius: 40px;transition: all 0.2s;font-weight: 500;}.nav-table a i { font-size: 1rem; color: #6a8aa0; }.nav-table td:hover a { background: #eef3fc; color: #1f5a7e; transform: translateY(-2px); }.nav-table td.active a { background: #eef3fc; color: #1f5a7e; font-weight: 600; }/* 成员列表网格 */.member-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1.5rem;margin-top: 1.5rem;}.member-item {background: #f9fbfd;border-radius: 1.5rem;padding: 1.5rem;text-align: center;border: 1px solid #eef2f8;transition: all 0.2s;cursor: pointer;text-decoration: none;display: block;}.member-item:hover {transform: translateY(-5px);box-shadow: 0 12px 25px -12px rgba(0, 0, 0, 0.15);border-color: #c0d4e8;}.member-avatar-large {width: 100px;height: 100px;background: linear-gradient(145deg, #e0e9f2, #d1dee9);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1rem;overflow: hidden;}.member-avatar-large img {width: 100%;height: 100%;object-fit: cover;}.member-avatar-large i {font-size: 3rem;color: #2c5a74;}.member-item h3 {font-size: 1.2rem;font-weight: 700;color: #1f2e3c;margin-bottom: 0.3rem;}.member-item p {font-size: 0.8rem;color: #8a9bb0;}.back-home {margin-top: 2rem;text-align: center;padding-top: 1rem;border-top: 1px solid #eef2f8;}.back-home a { color: #8a9bb0; text-decoration: none; font-size: 0.8rem; }.back-home a:hover { color: #2c5a74; }@media (max-width: 680px) {.nav-table, .nav-table tbody, .nav-table tr, .nav-table td { display: block; width: 100%; }.nav-table tr { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid #eef2f8; }.nav-table td { width: auto; padding: 0.6rem 0.2rem; }.nav-table a { padding: 0.3rem 0.8rem; font-size: 0.85rem; }.team-inner { padding: 1.5rem; }}</style>
</head>
<body>
<div class="team-card"><div class="team-inner"><!-- 导航栏 --><div class="nav-table-wrapper"><table class="nav-table"><tr><td><a href="index.html"><i class="fas fa-home"></i> 首页</a></td><td class="active"><a href="about.html"><i class="fas fa-user-circle"></i> 个人简介</a></td><td><a href="skills.html"><i class="fas fa-code"></i> 专业特长</a></td><td><a href="contact.html"><i class="fas fa-envelope"></i> 联系方式</a></td></tr></table></div><!-- 页面标题 --><div style="text-align: center; margin-bottom: 1.5rem;"><h1 style="font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #1e2b3c, #2c3e4e); background-clip: text; -webkit-background-clip: text; color: transparent;">核心成员</h1><p style="color: #8a9bb0; margin-top: 0.3rem;">点击头像查看详细简介</p></div><!-- 成员网格：点击跳转到各自的 about-XXX.html --><div class="member-grid"><!-- 蔡芮妍 → about-CRY.html --><a href="about-CRY.html" class="member-item"><div class="member-avatar-large"><img src="./img/cry.jpg" alt="蔡芮妍" onerror="this.src='https://placehold.co/100x100/eef2f8/8a9bb0?text=CRY'"></div><h3>蔡芮妍</h3><p>Ruiyan Cai</p></a><!-- 林沁茹 → about-LQR.html --><a href="about-LQR.html" class="member-item"><div class="member-avatar-large"><img src="./img/lqr.jpg" alt="林沁茹" onerror="this.src='https://placehold.co/100x100/eef2f8/8a9bb0?text=LQR'"></div><h3>林沁茹</h3><p>Qingru Lin</p></a><!-- 王璐 → about-WL.html --><a href="about-WL.html" class="member-item"><div class="member-avatar-large"><img src="./img/wl.jpg" alt="王璐" onerror="this.src='https://placehold.co/100x100/eef2f8/8a9bb0?text=WL'"></div><h3>王璐</h3><p>Lu Wang</p></a><!-- 许晴 → about-XQ.html --><a href="about-XQ.html" class="member-item"><div class="member-avatar-large"><img src="./img/xq.jpg" alt="许晴" onerror="this.src='https://placehold.co/100x100/eef2f8/8a9bb0?text=XQ'"></div><h3>许晴</h3><p>Qing Xu</p></a></div><div class="back-home"><a href="index.html"><i class="fas fa-arrow-left"></i> 返回首页</a></div></div>
</div>
</body>
</html>

3. about-CRY/LQR/WL/XQ.html —— 个人详情页

四个页面结构一致，核心采用两列表格实现左图右文布局：

<table class="profile-table"><tr><td class="avatar-cell"><!-- 左侧：头像照片 --></td><td class="info-cell"><!-- 右侧：学习经历、荣誉成就、个人宣言 --></td></tr>
</table>

左侧 <td> 固定宽度280px，放置头像图片，外层包裹圆角卡片容器
右侧 <td> 使用 border-left 分隔线划分内容板块：学习经历、荣誉&成就、个人宣言
响应式处理：当屏幕宽度小于700px时，通过 display: block 将表格转为块级布局，头像在上、文字在下

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><title>个人简介 | 关于我</title><!-- 沿用 Inter 字体与 Font Awesome 6，保持风格一致 --><link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background: #f5f7fb;font-family: 'Inter', sans-serif;display: flex;align-items: center;justify-content: center;min-height: 100vh;padding: 2rem 1.5rem;}/* 主卡片容器 — 和联系页同款风格 */.profile-card {max-width: 1000px;width: 100%;background-color: #ffffff;border-radius: 2rem;box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.02);overflow: hidden;transition: all 0.2s ease;}.profile-inner {padding: 2.5rem 2.5rem 3rem;}/* 表格布局 — 核心：左图右文 */.profile-table {width: 100%;border-collapse: collapse;background: #ffffff;border-radius: 1.5rem;}.profile-table td {vertical-align: top;padding: 0.5rem;}/* 左侧头像单元格：图片区域 */.avatar-cell {width: 280px;padding-right: 2rem !important;}.avatar-wrapper {background: #f9fbfd;border-radius: 1.5rem;padding: 1rem;text-align: center;border: 1px solid #eef2f8;transition: all 0.2s;}.avatar-img {width: 100%;max-width: 240px;border-radius: 1.5rem;object-fit: cover;aspect-ratio: 1 / 1;background: #eef2f8;display: block;margin: 0 auto;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);border: 2px solid white;}.avatar-caption {margin-top: 1rem;font-size: 0.8rem;font-weight: 500;color: #8a9bb0;letter-spacing: 0.5px;}/* 右侧详细介绍区域 */.info-cell {padding-left: 1rem !important;}.info-header {margin-bottom: 1.5rem;border-bottom: 2px solid #eaeef3;padding-bottom: 0.8rem;}.info-header h2 {font-size: 1.8rem;font-weight: 700;color: #1f2a3e;letter-spacing: -0.3px;background: linear-gradient(135deg, #1e2b3c 0%, #2c3e4e 100%);background-clip: text;-webkit-background-clip: text;color: transparent;}.info-header .title-tag {font-size: 0.85rem;font-weight: 500;color: #8b9eb0;letter-spacing: 1px;margin-top: 0.25rem;}/* 学历/经历 表格风格（内部使用整洁列表，但整体保持表格视觉）*/.bio-section {margin-bottom: 1.8rem;}.bio-section h3 {font-size: 1.1rem;font-weight: 600;color: #2c3f4f;margin-bottom: 0.7rem;display: flex;align-items: center;gap: 10px;border-left: 3px solid #bdd3e8;padding-left: 12px;}.bio-section h3 i {color: #4a6a7f;font-size: 1rem;}.timeline-item {margin-bottom: 1rem;padding-left: 1rem;}.timeline-title {font-weight: 700;color: #1f2e3c;font-size: 0.95rem;}.timeline-date {font-size: 0.7rem;font-weight: 500;color: #9aaebf;letter-spacing: 0.3px;margin-left: 0.75rem;}.timeline-desc {font-size: 0.85rem;color: #4a6172;margin-top: 4px;line-height: 1.4;}.divider-light {height: 1px;background: #eef2f8;margin: 1rem 0;}/* 社交链接区 (可选) */.social-links {margin-top: 1.2rem;display: flex;gap: 1rem;flex-wrap: wrap;}.social-links a {background: #f8fafd;padding: 0.4rem 1rem;border-radius: 40px;font-size: 0.8rem;font-weight: 500;color: #2c3f4f;text-decoration: none;border: 1px solid #e2e9f2;transition: all 0.2s;}.social-links a i {margin-right: 6px;}.social-links a:hover {background: #eef2f8;border-color: #cbdbe0;transform: translateY(-1px);}/* 响应式：当屏幕宽度小于700px，表格改为块状布局 (左侧头像在上方) */@media (max-width: 700px) {.profile-table, .profile-table tbody, .profile-table tr, .profile-table td {display: block;width: 100%;}.avatar-cell {width: 100%;padding-right: 0 !important;margin-bottom: 1.5rem;}.info-cell {padding-left: 0 !important;}.avatar-wrapper {max-width: 280px;margin: 0 auto;}.profile-inner {padding: 1.8rem;}}@media (max-width: 480px) {.profile-inner {padding: 1.2rem;}.info-header h2 {font-size: 1.5rem;}}/* 微交互动画 */.avatar-img {transition: transform 0.2s ease;}.avatar-img:hover {transform: scale(1.01);}</style>
</head>
<body>
<div class="profile-card"><div class="profile-inner"><!-- 使用表格实现左图右文布局 --><table class="profile-table"><tr><!-- 左侧：大头照区域 --><td class="avatar-cell"><div class="avatar-wrapper"><!-- 模拟个人大头照：使用 Font Awesome 占位或优雅的渐变头像，实际可替换为真实图片url --><div style="background: linear-gradient(145deg, #dce5f0, #cbdae6); border-radius: 1.5rem; padding: 0.2rem;"><img class="avatar-img" src="./img/wl.jpg?text=PHOTO" alt="个人头像" style="background: #ffffff;"></div><div class="avatar-caption"><i class="fas fa-camera"></i>WL</div></div></td><!-- 右侧：详细的文字介绍（学历、经历等） --><td class="info-cell"><div class="info-header"><h2>王璐 · LU Wang</h2><div class="title-tag"><i class="fas fa-map-pin"></i> 福建 / 厦门 ·JMU's Student</div></div><div class="bio-section"><h3><i class="fas fa-graduation-cap"></i>学习经历</h3><div class="timeline-item"><div class="timeline-title">长乐华侨中学 <span class="timeline-date">2022– 2024</span></div><div class="timeline-desc">选考科目：物理、化学、政治</div></div><div class="timeline-item"><div class="timeline-title">集美大学 · 网络空间安全  <span class="timeline-date">2024 – 2028</span></div><div class="timeline-desc">主修课程：数据结构、Web开发等等</div></div></div><div class="bio-section"><h3><i class="fas fa-briefcase"></i>荣誉 & 成就</h3><div class="timeline-item"><div class="timeline-title"><span class="timeline-desc" style="margin-left: 1rem;">🏆</span> 奖学金 <span class="timeline-date">2024 – 2026</span></div><div class="timeline-desc">2024-2025学年第一学期专业三等奖学金</div><div class="timeline-desc">2024-2025学年第二学期专业三等奖学金</div><div class="timeline-desc">2025-2026学年第一学期专业三等奖学金</div></div><div class="bio-section"><h3><i class="fa-solid fa-pen-nib"></i>个人宣言</h3><div class="timeline-desc">海压竹枝低复举，风吹山角晦还明</div></div></td></tr></table></div>
</div>
</body>
</html>

4. skills.html —— 专业特长页

采用三列表格展示每项技能：

技能名称列：图标使用 Font Awesome，配合技能描述文字
进度条列：使用 div 嵌套实现，外层背景条 + 内层填充条，通过 IntersectionObserver 监听元素进入视口后触发宽度动画
标签列：右对齐显示"初步学习""熟练开发"等等级标签
表格设置 border-spacing: 0 1rem 实现行间距，配合 border-radius 让每行呈现独立卡片效果
底部附加"综合素养"区域，使用独立表格展示软技能

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><title>专业特长 | 网安学子 · 技能图谱</title><!-- 使用与首页一致的现代字体 Inter --><link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"><!-- Font Awesome 6 图标库 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background: #f5f7fb;font-family: 'Inter', sans-serif;display: flex;align-items: center;justify-content: center;min-height: 100vh;padding: 2rem 1.5rem;}/* 主卡片容器 — 延续干净、留白、极简风格 */.skills-card {max-width: 1100px;width: 100%;background-color: #ffffff;border-radius: 2rem;box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.02);overflow: hidden;transition: all 0.2s ease;}.skills-inner {padding: 2.5rem 2.5rem 3rem;}/* 头部区域 — 与联系方式页面风格统一 */.page-badge {font-size: 0.75rem;letter-spacing: 3px;font-weight: 600;color: #8b9eb0;text-transform: uppercase;margin-bottom: 0.5rem;display: inline-block;background: #f0f4f9;padding: 0.2rem 0.9rem;border-radius: 30px;}.main-title {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: baseline;gap: 0.5rem;margin-bottom: 1rem;}.main-title h1 {font-size: 2rem;font-weight: 700;color: #1f2a3e;letter-spacing: -0.3px;background: linear-gradient(135deg, #1e2b3c 0%, #2c3e4e 100%);background-clip: text;-webkit-background-clip: text;color: transparent;}.skills-sub {font-size: 0.85rem;color: #8a9bb0;border-left: 2px solid #dce5ef;padding-left: 1rem;font-weight: 500;}/* 简介区域 / 热情宣言 - 突出网安大二学生身份 */.profile-note {background: #f9fbfd;border-radius: 1.2rem;padding: 1rem 1.5rem;margin: 1.2rem 0 2rem 0;border: 1px solid #eef2f8;display: flex;align-items: center;gap: 12px;flex-wrap: wrap;}.profile-note i {font-size: 1.5rem;color: #2c3f4f;background: #eef2f8;padding: 0.5rem;border-radius: 50%;}.profile-note p {font-size: 0.95rem;font-weight: 500;color: #2c3f4f;margin: 0;}/* ========= 技能表格布局 — 多行多列卡片风格（表格结构+现代卡片质感） ========= */.skills-table-container {margin: 1.8rem 0 1rem;border-radius: 1.5rem;overflow-x: auto;background: #ffffff;}/* 采用表格布局，但完全去除传统表格的枯燥感，融入圆润卡片风格 */.skills-grid-table {width: 100%;border-collapse: separate;border-spacing: 0 1rem;margin: -0.5rem 0;}/* 每个技能行都像独立卡片 */.skills-grid-table tr {transition: all 0.2s ease;background: #ffffff;border-radius: 1.2rem;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);}.skills-grid-table td {background: #fefeff;padding: 1rem 1.2rem;vertical-align: middle;border: 1px solid #eef2f8;border-right: none;border-left: none;}/* 圆角技巧: 第一个td左圆角，最后一个td右圆角 */.skills-grid-table td:first-child {border-top-left-radius: 1rem;border-bottom-left-radius: 1rem;border-left: 1px solid #eef2f8;}.skills-grid-table td:last-child {border-top-right-radius: 1rem;border-bottom-right-radius: 1rem;border-right: 1px solid #eef2f8;}/* 技能图标+名称区域 */.skill-icon-name {display: flex;align-items: center;gap: 14px;}.skill-icon {width: 44px;height: 44px;background: #f0f5fa;border-radius: 18px;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;color: #2c5a74;transition: 0.2s;}.skill-name {font-weight: 700;font-size: 1.05rem;color: #1f2e3c;letter-spacing: -0.2px;}/* 熟练度描述（辅助文字） */.skill-desc {font-size: 0.75rem;color: #8a9bb0;margin-top: 4px;font-weight: 400;}/* 进度条风格 — 现代半透明圆润条 */.progress-area {min-width: 180px;}.progress-stats {display: flex;justify-content: space-between;align-items: baseline;margin-bottom: 6px;font-size: 0.7rem;font-weight: 600;color: #4a6a7f;letter-spacing: 0.3px;}.progress-percent {font-weight: 700;color: #1f2e3c;}.progress-bar-bg {background: #e4ecf3;border-radius: 40px;height: 8px;overflow: hidden;width: 100%;}.progress-fill {background: linear-gradient(90deg, #2c5a74, #3e7b9b);width: 0%;height: 100%;border-radius: 40px;transition: width 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);}/* 熟练度标签 */.level-badge {font-size: 0.75rem;font-weight: 600;background: #eef3fa;padding: 0.25rem 0.9rem;border-radius: 60px;color: #2c5a74;display: inline-block;white-space: nowrap;}/* 附加工具/软技能部分（第二张表风格独立区域） */.extra-section {margin-top: 2.5rem;background: #f9fbfd;border-radius: 1.5rem;padding: 1.5rem 1.8rem;border: 1px solid #eef2f8;}.extra-title {display: flex;align-items: center;gap: 12px;margin-bottom: 1.5rem;}.extra-title i {font-size: 1.3rem;color: #2c3f4f;background: #eef2f8;padding: 0.45rem;border-radius: 50%;}.extra-title h3 {font-size: 1.25rem;font-weight: 600;color: #1f2a3e;}/* 软技能 / 语言 表格布局 (紧凑卡片表格) */.soft-skills-table {width: 100%;border-collapse: separate;border-spacing: 0 0.8rem;}.soft-skills-table td {background: white;padding: 0.8rem 1.2rem;border: 1px solid #eef2f8;border-radius: 1rem;vertical-align: middle;}.soft-skill-name {font-weight: 600;display: flex;align-items: center;gap: 12px;}.soft-skill-name i {width: 28px;color: #2c5a74;}.rating-stars {color: #f4b942;letter-spacing: 2px;font-size: 0.85rem;}/* 响应式优化：在小屏幕上让表格变为块级，灵活适配 */@media (max-width: 780px) {.skills-inner {padding: 1.8rem 1.5rem 2rem;}.skills-grid-table, .skills-grid-table tbody, .skills-grid-table tr, .skills-grid-table td {display: block;width: 100%;}.skills-grid-table tr {margin-bottom: 1rem;display: block;border-radius: 1.2rem;background: #ffffff;box-shadow: 0 2px 8px rgba(0,0,0,0.03);}.skills-grid-table td {display: flex;align-items: center;justify-content: space-between;border: none;border-bottom: 1px solid #f0f4f9;padding: 0.9rem 1rem;border-radius: 0 !important;}.skills-grid-table td:first-child {border-top-left-radius: 1rem;border-top-right-radius: 1rem;border-left: 1px solid #eef2f8;border-top: 1px solid #eef2f8;border-right: 1px solid #eef2f8;}.skills-grid-table td:last-child {border-bottom-left-radius: 1rem;border-bottom-right-radius: 1rem;border-bottom: 1px solid #eef2f8;border-left: 1px solid #eef2f8;border-right: 1px solid #eef2f8;}.skill-icon-name {width: 100%;justify-content: flex-start;}.progress-area {width: 100%;margin-top: 0.5rem;}.level-badge {text-align: right;}.soft-skills-table, .soft-skills-table tbody, .soft-skills-table tr, .soft-skills-table td {display: block;width: 100%;}.soft-skills-table tr {margin-bottom: 0.7rem;display: block;}.soft-skills-table td {display: flex;justify-content: space-between;align-items: center;}}@media (max-width: 540px) {.main-title h1 {font-size: 1.6rem;}.skills-sub {font-size: 0.7rem;padding-left: 0.7rem;}.skill-name {font-size: 0.95rem;}}/* 简单hover动画增强 */.skills-grid-table tr:hover td {background-color: #fdfdfd;border-color: #e2e9f2;}.skills-grid-table tr:hover .skill-icon {background: #e6f0f7;transform: scale(0.98);}.progress-fill {transition: width 0.55s ease-out;}.view-more {text-align: center;margin-top: 2rem;font-size: 0.8rem;color: #8a9bb0;border-top: 1px solid #edf2f7;padding-top: 1.5rem;display: flex;justify-content: center;gap: 1rem;}.view-more a {text-decoration: none;font-weight: 500;color: #2c5a74;transition: 0.2s;}.view-more a:hover {color: #1f2e3c;text-decoration: underline;}i.fa, i.fab, i.far {pointer-events: none;}</style>
</head>
<body>
<div class="skills-card"><div class="skills-inner"><div class="page-badge"><i class="fas fa-shield-haltered"></i> CYBER SECURITY · 大二</div><div class="main-title"><h1>专业特长 · 网安技能树</h1></div><div class="profile-note"><i class="fas fa-user-graduate"></i><p>集美大学 · 网络空间安全专业 大二在读 | 学习We编程技术中，不断打怪升级中。</p></div><!-- 技能表格区域：多行多列卡片式布局，核心网安技能+编程基础 --><div class="skills-table-container"><table class="skills-grid-table"><tbody><!-- Web安全基础 (SQL注入/XSS/CSRF等) --><tr><td style="width: 35%;"><div class="skill-icon-name"><div class="skill-icon"><i class="fas fa-globe"></i></div><div><div class="skill-name">Web编程技术</div><div class="skill-desc">HTML网页编写</div></div></div></td><td style="width: 45%;"><div class="progress-area"><div class="progress-stats"><span>熟练度</span><span class="progress-percent">30%</span></div><div class="progress-bar-bg"><div class="progress-fill" data-width="30" style="width: 0%;"></div></div></div></td><td style="width: 20%; text-align: right;"><span class="level-badge"><i class="fas fa-bug"></i> 初步学习</span></td></tr><!--  java学习 --><tr><td><div class="skill-icon-name"><div class="skill-icon"><i class="fab fa-java"></i></div><div><div class="skill-name">Java基础</div><div class="skill-desc"><pre>集合框架 · 代码编写</pre></div></div></div></td><td><div class="progress-area"><div class="progress-stats"><span>熟练度</span><span class="progress-percent">80%</span></div><div class="progress-bar-bg"><div class="progress-fill" data-width="80" style="width: 0%;"></div></div></div></td><td style="text-align: right;"><span class="level-badge"><i class="fas fa-code"></i> 熟练开发</span></td></tr><!-- 密码学基础 / 古典+现代 --><tr><td><div class="skill-icon-name"><div class="skill-icon"><i class="fas fa-lock"></i></div><div><div class="skill-name">密码学基础</div><div class="skill-desc">AES · 哈希函数 · 古典密码</div></div></div></td><td><div class="progress-area"><div class="progress-stats"><span>熟练度</span><span class="progress-percent">30%</span></div><div class="progress-bar-bg"><div class="progress-fill" data-width="30" style="width: 0%;"></div></div></div></td><td style="text-align: right;"><span class="level-badge"><i class="fas fa-key"></i> 理论+实践</span></td></tr></tbody></table></div><!-- 额外区域：安全工具掌握 + 软技能 & 语言 / 竞赛经历 --><div class="extra-section"><div class="extra-title"><i class="fas fa-tools"></i><h3>🛠️ 综合素养</h3></div><table class="soft-skills-table"><tbody><tr><td><div class="soft-skill-name"><i class="fas fa-users"></i> 团队协作 & 报告撰写</div></td><td style="text-align: right;"><span class="level-badge">撰写实验报告</span></td></tr><tr><td><div class="soft-skill-name"><i class="fas fa-language"></i> 英语能力 (CET备考中)</div></td><td style="text-align: right;"><span class="level-badge" style="background:#eef3fa;">阅读技术文档</span></td></tr><tr><td><div class="soft-skill-name"><i class="fas fa-graduation-cap"></i> 主修课程成绩</div></td><td style="text-align: right;"><span class="level-badge"><i class="fas fa-chart-line"></i> 计算机网络· 密码学</span></td></tr></tbody></table><!-- 额外附加小提示，如同之前联系页面的点缀，体现学习热情 --><div style="font-size:0.7rem; color:#9aaebf; margin-top: 20px; border-top: 1px dashed #e2e8f0; padding-top: 12px;"><i class="fas fa-graduation-cap"></i> 目前主攻Web编程的学习。</div></div><!-- 底部导航/返回链接，保持友好交互（仿原设计呼应交个朋友） --><div class="view-more"><a href="#" onclick="alert('✨ 欢迎交流网安技术！一起挖洞打CTF～'); return false;"><i class="fas fa-envelope"></i> 交个朋友</a><span>|</span><a href="#" onclick="history.back(); return false;"><i class="fas fa-arrow-left"></i> 返回上一页</a></div></div>
</div><!-- 页面加载时进度条动态效果（使用Intersection Observer 或 直接页面滚动触发，优雅展示） -->
<script>(function() {// 用于技能进度条动态填充动画：当页面加载或滚动到技能区域时触发const progressFills = document.querySelectorAll('.progress-fill');function animateProgressBars() {progressFills.forEach(fill => {const targetWidth = fill.getAttribute('data-width');if (targetWidth && fill.style.width !== targetWidth + '%') {fill.style.width = targetWidth + '%';}});}// 使用 Intersection Observer 监听技能区域，一出现则触发进度条，并增加微妙延迟const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {animateProgressBars();// 一旦触发动画后可以断开观察，避免重复observer.disconnect();}});}, { threshold: 0.3 });const container = document.querySelector('.skills-table-container');if (container) {observer.observe(container);} else {// 降级直接调用animateProgressBars();}// 后备: 如果浏览器不支持IntersectionObserver 或 未触发，页面load后直接调用window.addEventListener('load', function() {setTimeout(() => {if (!observer || !container) {animateProgressBars();} else {// 保险: 2s后若还未触发动画且进度条为0, 则强制动画setTimeout(() => {const anyFill = document.querySelector('.progress-fill');if (anyFill && anyFill.style.width === '0%') {animateProgressBars();}}, 800);}}, 200);});// 平滑微交互动效，鼠标移入进度条区域无额外动作仅保留风格const rows = document.querySelectorAll('.skills-grid-table tr');rows.forEach(row => {row.addEventListener('mouseenter', () => {// 让当前行进度条稍微增强光晕 (可选)const fill = row.querySelector('.progress-fill');if (fill) fill.style.filter = 'brightness(1.02)';});row.addEventListener('mouseleave', () => {const fill = row.querySelector('.progress-fill');if (fill) fill.style.filter = 'brightness(1)';});});console.log('✅ 网安学子技能页面加载完成 · 大二专用技能树');})();
</script>
</body>
</html>

5. contact.html —— 联系方式页

导航栏：与其他页面保持一致的表格导航
成员切换：使用四个 button 标签作为切换按钮，点击后通过 JS 控制 display: none/block 切换对应成员的联系信息
联系信息展示：每个成员区块使用横向排列的信息条，包含邮箱、微信、电话，每条信息用圆角胶囊样式呈现
Hash路由：支持通过 URL hash（如 contact.html#lqr）直接定位到指定成员

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><title>联系方式 | 网安小组</title><link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>* { margin: 0; padding: 0; box-sizing: border-box; }body {background: #f5f7fb;font-family: 'Inter', sans-serif;display: flex;align-items: center;justify-content: center;min-height: 100vh;padding: 2rem 1.5rem;}.contact-card {max-width: 900px;width: 100%;background-color: #ffffff;border-radius: 2rem;box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.1);overflow: hidden;}.contact-inner { padding: 2rem 2rem 2.5rem; }/* 导航栏 */.nav-table-wrapper {background: #ffffff;border-radius: 2rem;box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.08);margin-bottom: 2rem;overflow: hidden;border: 1px solid #eef2f8;}.nav-table { width: 100%; border-collapse: collapse; background: #ffffff; }.nav-table td { text-align: center; padding: 1rem 0.8rem; transition: all 0.2s; }.nav-table a {text-decoration: none;color: #2c3f4f;display: inline-flex;align-items: center;gap: 8px;padding: 0.4rem 1.2rem;border-radius: 40px;transition: all 0.2s;font-weight: 500;}.nav-table a i { font-size: 1rem; color: #6a8aa0; }.nav-table td:hover a { background: #eef3fc; color: #1f5a7e; transform: translateY(-2px); }.nav-table td.active a { background: #eef3fc; color: #1f5a7e; font-weight: 600; }@media (max-width: 680px) {.nav-table, .nav-table tbody, .nav-table tr, .nav-table td { display: block; width: 100%; }.nav-table tr { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid #eef2f8; }.nav-table td { width: auto; padding: 0.6rem 0.2rem; }.nav-table a { padding: 0.3rem 0.8rem; font-size: 0.85rem; }}/* 成员标签页 */.member-tabs {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1.5rem;border-bottom: 2px solid #eaeef3;padding-bottom: 0.8rem;}.tab-btn {background: transparent;border: none;padding: 0.6rem 1.2rem;font-size: 0.9rem;font-weight: 600;color: #8a9bb0;cursor: pointer;border-radius: 40px;transition: all 0.2s;font-family: 'Inter', sans-serif;display: inline-flex;align-items: center;gap: 8px;}.tab-btn:hover { background: #f0f4f9; color: #2c5a74; }.tab-btn.active { background: #eef3fc; color: #1f5a7e; }.member-content { display: none; animation: fadeIn 0.3s ease; }.member-content.active { display: block; }@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }.my-contact-section {background: #f9fbfd;border-radius: 1.5rem;padding: 1.2rem 1.5rem;border: 1px solid #eef2f8;}.my-contact-title {display: flex;align-items: center;gap: 10px;margin-bottom: 1rem;}.my-contact-title i {font-size: 1.3rem;color: #2c3f4f;background: #eef2f8;padding: 0.4rem;border-radius: 50%;}.my-contact-title h3 { font-size: 1.2rem; font-weight: 600; color: #1f2a3e; }.contact-info-grid { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }.contact-item {display: flex;align-items: center;gap: 14px;background: white;padding: 0.6rem 1rem;border-radius: 60px;border: 1px solid #e6edf4;transition: all 0.2s;}.contact-item i { width: 28px; font-size: 1rem; color: #4a6a7f; text-align: center; }.contact-item .info-label { font-weight: 600; font-size: 0.7rem; color: #8a9bb0; min-width: 55px; }.contact-item .info-value { font-weight: 500; color: #1f2e3c; font-size: 0.85rem; word-break: break-all; flex: 1; }.contact-item a { text-decoration: none; color: #1f2e3c; }.contact-item a:hover { color: #2c6280; text-decoration: underline; }.back-home { margin-top: 1.5rem; text-align: center; padding-top: 1rem; border-top: 1px solid #eef2f8; }.back-home a { color: #8a9bb0; text-decoration: none; font-size: 0.8rem; }.back-home a:hover { color: #2c5a74; }</style>
</head>
<body>
<div class="contact-card"><div class="contact-inner"><!-- 导航栏 --><div class="nav-table-wrapper"><table class="nav-table"><tr><td><a href="index.html"><i class="fas fa-home"></i> 首页</a></td><td><a href="about.html"><i class="fas fa-user-circle"></i> 个人简介</a></td><td><a href="skills.html"><i class="fas fa-code"></i> 专业特长</a></td><td class="active"><a href="contact.html"><i class="fas fa-envelope"></i> 联系方式</a></td></tr></table></div><div class="contact-badge" style="font-size:0.7rem; letter-spacing:3px; color:#8b9eb0; margin-bottom:0.5rem;">CONTACT</div><h1 style="font-size:1.8rem; font-weight:700; margin-bottom:1.5rem; background: linear-gradient(135deg,#1e2b3c,#2c3e4e); background-clip:text; -webkit-background-clip:text; color:transparent;">GET IN TOUCH</h1><!-- 成员切换标签 --><div class="member-tabs"><button class="tab-btn active" data-member="cry"><i class="fas fa-female"></i> 蔡芮妍</button><button class="tab-btn" data-member="lqr"><i class="fas fa-leaf"></i> 林沁茹</button><button class="tab-btn" data-member="wl"><i class="fas fa-dove"></i> 王璐</button><button class="tab-btn" data-member="xq"><i class="fas fa-sun"></i> 许晴</button></div><!-- 蔡芮妍 --><div id="member-cry" class="member-content active"><div class="my-contact-section"><div class="my-contact-title"><i class="fas fa-address-card"></i><h3>📌 蔡芮妍 · 联系方式</h3></div><div class="contact-info-grid"><div class="contact-item"><i class="fas fa-envelope"></i><span class="info-label">EMAIL</span><span class="info-value"><a href="mailto:cry@jmu.edu">2055113469@qq.com</a></span></div><div class="contact-item"><i class="fab fa-weixin"></i><span class="info-label">WECHAT</span><span class="info-value">cry18059615523</span></div><div class="contact-item"><i class="fas fa-phone-alt"></i><span class="info-label">TEL</span><span class="info-value">+86 180 5961 5523</span></div></div></div></div><!-- 林沁茹 --><div id="member-lqr" class="member-content"><div class="my-contact-section"><div class="my-contact-title"><i class="fas fa-address-card"></i><h3>📌 林沁茹 · 联系方式</h3></div><div class="contact-info-grid"><div class="contact-item"><i class="fas fa-envelope"></i><span class="info-label">EMAIL</span><span class="info-value"><a href="mailto:lqr@jmu.edu">lqr@jmu.edu</a></span></div><div class="contact-item"><i class="fab fa-weixin"></i><span class="info-label">WECHAT</span><span class="info-value">lqr_summer</span></div><div class="contact-item"><i class="fas fa-phone-alt"></i><span class="info-label">TEL</span><span class="info-value">+86 138 0000 0002</span></div></div></div></div><!-- 王璐 --><div id="member-wl" class="member-content"><div class="my-contact-section"><div class="my-contact-title"><i class="fas fa-address-card"></i><h3>📌 王璐 · 联系方式</h3></div><div class="contact-info-grid"><div class="contact-item"><i class="fas fa-envelope"></i><span class="info-label">EMAIL</span><span class="info-value"><a href="mailto:wl@jmu.edu">wl@jmu.edu</a></span></div><div class="contact-item"><i class="fab fa-weixin"></i><span class="info-label">WECHAT</span><span class="info-value">wanglu_cyber</span></div><div class="contact-item"><i class="fas fa-phone-alt"></i><span class="info-label">TEL</span><span class="info-value">+86 138 0000 0003</span></div></div></div></div><!-- 许晴 --><div id="member-xq" class="member-content"><div class="my-contact-section"><div class="my-contact-title"><i class="fas fa-address-card"></i><h3>📌 许晴 · 联系方式</h3></div><div class="contact-info-grid"><div class="contact-item"><i class="fas fa-envelope"></i><span class="info-label">EMAIL</span><span class="info-value"><a href="mailto:xq@jmu.edu">xq@jmu.edu</a></span></div><div class="contact-item"><i class="fab fa-weixin"></i><span class="info-label">WECHAT</span><span class="info-value">xq_forward</span></div><div class="contact-item"><i class="fas fa-phone-alt"></i><span class="info-label">TEL</span><span class="info-value">+86 138 0000 0004</span></div></div></div></div><div class="back-home"><a href="index.html"><i class="fas fa-arrow-left"></i> 返回首页</a></div></div>
</div><script>(function() {const hash = window.location.hash.substring(1);const validMembers = ['cry', 'lqr', 'wl', 'xq'];let defaultMember = 'cry';if (hash && validMembers.includes(hash)) defaultMember = hash;const tabBtns = document.querySelectorAll('.tab-btn');const contents = {cry: document.getElementById('member-cry'),lqr: document.getElementById('member-lqr'),wl: document.getElementById('member-wl'),xq: document.getElementById('member-xq')};function switchMember(memberId) {Object.values(contents).forEach(c => { if(c) c.classList.remove('active'); });if (contents[memberId]) contents[memberId].classList.add('active');tabBtns.forEach(btn => {btn.classList.remove('active');if (btn.getAttribute('data-member') === memberId) btn.classList.add('active');});}tabBtns.forEach(btn => {btn.addEventListener('click', function() {switchMember(this.getAttribute('data-member'));});});switchMember(defaultMember);// 导航栏高亮const navCells = document.querySelectorAll('.nav-table td');navCells.forEach(cell => cell.classList.remove('active'));if (navCells[3]) navCells[3].classList.add('active');})();
</script>
</body>
</html>

六、表格布局核心技术总结

导航表格：单行多列，border-collapse: collapse 去除单元格间距，通过 text-align: center 居中链接
内容表格：多行多列，border-collapse: separate + border-spacing 制造卡片间距
左图右文表格：两列布局，左列固定宽度放图，右列自适应放文字，通过 vertical-align: top 顶部对齐
圆角处理：首列设 border-top-left-radius 和 border-bottom-left-radius，末列设右侧圆角，实现整行圆角卡片效果
响应式降级：小屏幕下将 table/tr/td 全部设为 display: block，从表格布局退化为垂直堆叠布局

七、调试过程中遇到的问题

GIF背景与文字可读性冲突：初始直接设置背景图后发现文字难以辨认，解决方案是在内容卡片上使用白色背景 + 较大 box-shadow 遮挡背景，同时卡片本身设置足够内边距
表格圆角在部分浏览器失效：border-collapse: collapse 状态下 border-radius 不生效，改为 border-collapse: separate 并手动处理每个单元格的边框和圆角
进度条初始宽度为0不显示：使用 IntersectionObserver 替代直接的 window.onload，确保进度条在滚动到可视区域时才触发动画，同时设置 800ms 后备计时器作为降级方案
导航高亮在不同文件路径下失效：通过 window.location.pathname.split('/').pop() 提取当前文件名进行匹配，兼容直接打开文件和通过服务器访问两种场景

八、实验小结

这次实验我们基于自由表格布局完成了包含首页、成员简介、专业特长和联系方式的个人网站。总结下来有几点深刻体会：

表格布局不等于过时。 导航栏天然适合行列结构，用 <table> 实现反而比 flex 更语义化。但踩了个大坑：border-collapse: collapse 会直接吞掉border-radius，必须改成 separate 模式并手动给首尾单元格补圆角。这让我们
意识到 CSS 属性之间存在隐式互斥，不能想当然地组合。

让表格"不像表格"： 详情页的两列左图右文、技能页的三列进度条，我们统一去掉了纵向边框，用 border-spacing 拉开行间距，配合独立背景和圆角边框，最终呈现出卡片效果——底层是 <tr> 和 <td>，视觉上却看不出表格痕迹。

一套 HTML 搞定响应式： 没有为移动端另写结构，而是通过媒体查询把 table、tr、td 全部设为 display: block，两列并排自动退化为上下堆叠。同一份代码，仅靠切换 display 就完成适配。

交互细节提升体验： 进度条动画从 setTimeout 改为 IntersectionObserver 视口触发，用户滚到才播放；联系方式页用原生 JS 做标签切换，同时支持 URL hash 定位，分享链接时能直接指向特定成员。

风格一致性： 全站保持统一的导航栏结构、字号层级和配色，页面间跳转没有割裂感。

这次实验最大的收获不是学会了写表格，而是理解了一个道理：技术选型没有绝对的好坏，关键在于是否搞懂了它的底层机制，然后用对地方。