两周实训成果：哪吒主题网页项目实战

目录

一、项目背景

二、项目概述

三、项目详细结构与实现

（一）HTML 结构搭建

1. 头部（Header）

2. 横幅（Banner）

3. 人物介绍（Renwu）

4. 票房海报（Piaofang）

5. 底部（Footer）

（二）CSS 样式设计

1. 全局样式

2. 头部样式

3. 横幅样式

4. 票房海报样式

四、项目挑战与解决方案

（一）布局挑战

（二）响应式设计

五、项目总结

---

一、项目背景

在前端开发的学习过程中，实训是检验我们知识掌握程度和实践能力的重要环节。这次，我和团队花费了两个星期的时间，打造了一个哪吒主题的网页项目。通过这个项目，我们不仅加深了对 HTML 和 CSS 的理解，还锻炼了自己解决实际问题的能力。

二、项目概述

这个网页项目主要围绕哪吒相关元素展开，包含头部导航、横幅、人物介绍、票房海报展示以及底部信息等模块。整体页面布局清晰，色彩搭配协调，为用户提供了良好的视觉体验。

展示：

三、项目详细结构与实现

（一）HTML 结构搭建

HTML 文件（index.html）负责整个页面的结构搭建，以下是各部分的详细介绍：

1. 头部（Header）

html

<div class="header wrapper">
    <h1>
        <img src="./img/logo.png" alt="" />
    </h1>
    <div class="nav">
        <ul>
            <li>
                <a href="">首页</a>
            </li>
            <li>
                <a href="">海报</a>
            </li>
            <li>
                <a href="">热门影评</a>
            </li>
        </ul>
    </div>
    <div class="search">
        <input type="text" placeholder="输入关键词" />
        <button></button>
    </div>
    <div class="user">
        <img src="./img/user.png" alt="" />
        <span>xiaoming</span>
    </div>
</div>

头部包含了网站 logo、导航栏、搜索框和用户信息。通过无序列表 ul 和列表项 li 实现导航栏的菜单，使用 input 和 button 元素创建搜索框。