web 前端大作业说明书
题目——熊猫中心
班级：
姓名：
学号：
一、网站简介
①选题依据：
大熊猫是我们的国宝，很多人很喜欢大熊猫，此网站可以让我们进一步走进
熊猫的世界，了解熊猫文化，熊猫近况以及熊猫分布等，还可以让我们有机会报
名注册去观看熊猫。
②选用开发技术简介
1. HTML：
HTML 是网页设计中最基本的技术。通常，网页的结构是使用 HTML 语言建
立的。它包括标题、段落、图片、表格、链接等元素。HTML 的语法非常简单，
易于学习和使用。此外，它也非常灵活，可以被许多不同种类的浏览器和设备所
支持。
2. CSS
CSS 意为层叠样式表。它可以为 HTML 页面添加样式和排版。实际上，CSS
可以使网页的样式更加美观、统一和易于操作。通过 CSS，可以通过一次编写，
就可以为多个网页添加共同的样式。与 HTML 相比，CSS 的语法更加复杂。它包
括选择器、属性和值等。但是，一旦掌握了这种语法，CSS 可以极大地提高网页
的质量和效率。
3. JavaScript
JavaScript 被广泛认为是网页开发中最重要的技术。它是一种编程语言，可
以为网页添加交互和动态效果。通过 JavaScript，可以为网页添加用户输入校验、
动画、响应式设计等特性。与 HTML 和 CSS 不同，JavaScript 是一种更加复杂和
有深度的技术。它需要深入理解对象、函数、事件和 DOM 等机制。但是，一旦
掌握了这种技术，可以大大提高网页的功能和用户体验。
二、页面介绍
1. 主页面
①这是主页面的整体设计，主要分为三个部分，总体为上中下结构，用 class=content
的 div 包含这三个结构，且这三个主 div 用 css 设置宽度一致
②最上面的 head 包含三个子 div，分别放置信息，导航和图片，其中 top 又包含 3 个子
div，分别是用来放置 logo，zixun，tel 的，通过 float 来控制 logo、zixun、tel 的位置，通过
float：left 来使导航横向展示，导航中的每个部分都可以点击跳转到 blog-list、zhuce、dongtai
等页面
③然后来到中心部分，中心部分的功能为展示信息动态、信息功能、大熊猫文化、熊猫
简介、明星熊猫，合作交流、关于我们，当鼠标移动到图片上时，会显示明星熊猫的简介，
又分为两个 div，一个是左 div，class 为 box，一个是右 div，class 为 box2。box：box 中又分
为三个子 div，分别介绍信息动态、信息功能、大熊猫文化，通过给每个 li 的设置背景，来
实现每一个内容前的小图标。box2：box2 中又分为三个部分分别为上中下，上面放置熊猫
简介，中间放置明星熊猫，当鼠标悬停到图片上时，会展示明星熊猫的简介，此功能是通过
悬停时改变 display 来实现的。然后第三个部分同 box 的部分一样，不同的只是改为了横向
展示。
④最下面部分展示版权和联系方式。
核心代码
