史迪奇个人主页 - 网站详细介绍

这是一个以迪士尼角色”史迪奇”为主题的响应式个人网站。项目完全由前端技术实现，包含多个页面，展示了丰富的布局和交互效果。

1. 首页 (index.html)

首页是网站的门户，采用了双栏布局，结合了个人信息、故事摘要和图片集，为访问者提供了全面的第一印象。

特色功能

• 响应式双栏布局: 左侧为个人文字信息，右侧为史迪奇的图片，在不同屏幕尺寸下能优雅地展示。
• 导航栏颜色互换: 导航栏的默认颜色和选中（激活）状态的颜色进行了互换，未选中项为淡紫色，当前页为深紫色，视觉上更清晰。
• 图片画廊: 页面底部使用Flexbox布局创建了一个整齐的四列图片画廊。

高光代码

HTML 双栏布局结构 (index.html)

<div class="personal-info .info-container">
    <div class="info-box">
        <!-- 左侧文字信息 -->
    </div>
    <div class="stitch-image-container">
        <!-- 右侧图片 -->
    </div>
</div>

CSS 导航栏颜色互换 (style.css)

/* 默认状态：淡紫色背景 */
header nav ul li {
    background-color: #cbb5e0;
    flex: 1;
    text-align: center;
}

/* 激活状态：深紫色背景 */
header nav ul li.active {
    background-color: #c784ce;
}

2. 大学生活 (daxue.html)

此页面通过网格布局展示了大学生活的不同方面，如专业介绍、社团活动等。

特色功能

• CSS Grid布局: 使用 display: grid 创建了一个 2x2 的卡片式网格，完美地组织了内容。
• 卡片式设计: 每个主题（如专业、社团）都封装在一个独立的卡片中，包含了图标、标题、描述和图片，结构清晰。

高光代码

CSS Grid 网格布局 (daxue.html & style.css)

/* style.css */
.college-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 创建两列 */
    gap: 20px;
}

.college-card {
    background-color: #f8f0ff;
    border-radius: 8px;
    padding: 20px;
}

3. 兴趣爱好 (aihao.html)

该页面展示了多种兴趣爱好，布局灵活，视觉元素丰富。

特色功能

• Flexbox 布局: 使用 display: flex 和 justify-content: space-between 实现兴趣卡片的均匀分布。
• 自定义字体颜色: 兴趣标签的文字颜色被设置为白色 (#fff)，以便在紫色背景上更突出。
• 引用区块: 页面中间有两个颜色不同的引用区块，增加了页面的视觉趣味性。

高光代码

HTML 兴趣卡片结构 (aihao.html)

<div class="interests-grid">
    <div class="interest-card">
        <img src="..." alt="阅读">
        <div class="interest-label">阅读</div>
    </div>
    <!-- more cards -->
</div>

CSS 兴趣标签样式 (aihao.html 内嵌样式)

.interest-label {
    background-color: #d5b8e0;
    color: #fff; /* 设置为白色字体 */
    text-align: center;
    padding: 15px;
    font-size: 16px;
}

4. 我的家乡 (jiaxiang.html)

介绍了作者的家乡上海，采用了左文右图的经典布局，并内嵌了一个图片墙。

特色功能

• 复合式布局: 外部采用Flexbox实现左右分栏，左侧内部又使用Grid布局创建了一个 2x2 的小图片墙。
• 背景图片技术: 右侧的大图是通过 background-image 设置的，可以更好地控制图片的显示方式（如 background-size: cover）。

高光代码

CSS 左侧图片墙 (jiaxiang.html 内嵌样式)

.hometown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

5. 用户登录 (denglu.html)

提供用户登录和注册功能，特色是其动态切换的表单和简洁的设计。

特色功能

• Tab切换功能: 使用JavaScript实现了登录和注册表单之间的平滑切换，无需刷新页面。
• 简洁的UI: 移除了所有不必要的装饰元素和动画，只保留核心功能，并将表单高度减少了50px，使其更加紧凑。
• 占位符代替标签: 输入框使用 placeholder 属性代替了 <label> 标签，使界面更清爽。
• 图片替换内容: 原本底部的功能介绍区域被替换为一张全宽的史迪奇图片。

高光代码

JavaScript Tab切换逻辑 (denglu.html)

document.addEventListener('DOMContentLoaded', function() {
    const loginTab = document.getElementById('login-tab');
    const registerTab = document.getElementById('register-tab');
    const loginForm = document.querySelector('.login-form');
    const registerForm = document.querySelector('.register-form');
    
    registerTab.addEventListener('click', function() {
        // ...
        loginForm.style.left = '-100%';
        registerForm.style.left = '0';
    });
});

CSS 表单容器高度调整 (denglu.html 内嵌样式)

.login-forms {
    position: relative;
    height: 330px; /* 高度从 380px 减少到 330px */
    overflow: hidden;
}

HTML 图片替换内容 (denglu.html)

<!-- 原来的 <div class="login-benefits"> ... </div> 被替换为 -->
<div class="login-image">
    <img src="images/5/5.jpg" alt="史迪奇" style="width: 100%; border-radius: 10px;">
</div>