《疯狂动物城2》主题网页设计之旅

不得不说，很少有一部主流商业动画，尤其是美国的商业动画，敢用轻松甚至搞笑的方式，将这两个问题摆上台面。

它虽然没有展开深挖，把这些历史和现实的话题带进大众视野，本身就是一次难得的突破。

《疯狂动物城2》大火，实至名归。

于是，我写了一个网页。

1.技术应用： HbuilderX，分为三个文件夹：HTML、CSS、JS

2.设计理念与定位： "历史与现代的对话"------通过迪士尼IP《疯狂动物城2》的趣味性，通过巧妙的隐喻，用动物世界拉高了抽象层级，既让人一眼看出与现实的相似，又避免对号入座。

3.导航设计：本网站设置了"首页"、"角色介绍"、"预告片"、"剧照"、"剧情介绍"和"联系我们"六个主要导航标签。

首先，打开HbuilderX、DW或者VS Code，新建一个index.html文件。就像建造动物城需要先规划街道一样，先构建HTML骨架：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疯狂动物城2 | 官方主题网站</title>
    <!-- 这里会引入CSS和字体 -->
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav>
            <!-- 导航内容 -->
        </nav>
    </header>

    <!-- 页面内容 -->
    <main>
        <!-- 各页面内容将在这里切换 -->
    </main>

    <!-- 页脚 -->
    <footer>
        <!-- 版权和链接信息 -->
    </footer>

    <!-- JavaScript代码 -->
    <script>
        // 交互逻辑将在这里实现
    </script>
</body>
</html>

对于动物城的每个区域都有明确的标识，网站也需要清晰的导航。我设计了一个包含6个页面的导航：

复制代码

<nav class="nav-menu">
    <ul>
        <li class="nav-item"><a href="#" class="nav-link active" data-page="home">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-page="characters">角色介绍</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-page="trailer">预告片</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-page="gallery">剧照</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-page="story">剧情简介</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-page="contact">联系我们</a></li>
    </ul>
</nav>

就像动物城的每个区域都有独特的建筑风格，需要先建立CSS设计系统：

复制代码

/* 定义主题色变量，方便统一修改 */
:root {
    --primary-color: #1a6b8a;   /* 动物城蓝 */
    --secondary-color: #ff9e00; /* 尼克橙 */
    --accent-color: #7d3c98;    /* 朱迪紫 */
    --light-color: #f5f5f5;     /* 浅色背景 */
    --dark-color: #2c3e50;      /* 深色文字 */
    --text-color: #333;         /* 正文颜色 */
    --white: #ffffff;           /* 白色 */
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    --transition: all 0.3s ease; /* 过渡动画 */
}

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-color);
}

在设计导航栏样式时，我遇到了一个技术难题：PC端导航的下划线效果位置不对。经过调试，我找到了解决方案：

复制代码

/* PC端导航样式 - 修复下划线位置 */
.nav-link {
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;  /* 关键修复：让下划线在文字下方一点 */
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.nav-link:hover::after, 
.nav-link.active::after {
    width: 100%;  /* 悬停或激活时显示完整下划线 */
}

创建英雄区域：

复制代码

.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), 
                url('背景图地址.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white);
    margin-top: 70px; /* 为固定导航栏留出空间 */
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--white);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease; /* 添加动画效果 */
}

设计响应式布局，适配各种设备：

复制代码

/* 移动设备优先的媒体查询 */
@media screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;  /* 默认隐藏在屏幕外 */
        flex-direction: column;
        width: 100%;
        transition: 0.3s;
    }

    .nav-menu.active {
        left: 0;  /* 显示时滑入屏幕 */
    }

    .hero-title {
        font-size: 2.3rem;  /* 移动端减小字体 */
    }
}

/* PC端增强效果 */
@media screen and (min-width: 769px) {
    .nav-link:hover {
        transform: translateY(-2px);  /* 悬停时轻微上浮 */
    }
}

为了让用户在页面间切换时有流畅体验，我决定采用单页应用(SPA)架构：

复制代码

// 页面切换功能
function showPage(pageId) {
    // 隐藏所有页面
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
    });

    // 显示目标页面
    const targetPage = document.getElementById(`${pageId}-page`);
    if (targetPage) {
        targetPage.classList.add('active');

        // 平滑滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }
}

// 为所有导航链接添加点击事件
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const pageId = this.getAttribute('data-page');
        showPage(pageId);

        // 更新导航激活状态
        document.querySelectorAll('.nav-link').forEach(item => {
            item.classList.remove('active');
        });
        this.classList.add('active');
    });
});

移动端汉堡菜单：

复制代码

const navToggle = document.getElementById('navToggle');
const navMenu = document.getElementById('navMenu');

navToggle.addEventListener('click', () => {
    navMenu.classList.toggle('active');
    // 切换汉堡菜单图标
    navToggle.innerHTML = navMenu.classList.contains('active') 
        ? '<i class="fas fa-times"></i>'  // 显示关闭图标
        : '<i class="fas fa-bars"></i>';  // 显示菜单图标
});

这个项目，麻雀虽小五脏俱全。

如果你也想开始网页设计之旅，这是我的建议：

先做单个页面，再做多页面。不要死记代码，要理解为什么这样写。

每天写代码，哪怕只有半小时。**做感兴趣的项目，**像我一样选择喜欢的主题。