HTML+CSS大作业：熊猫介绍/保护熊猫/保护生态环境网页（7页/12页）

html作业中等水平制作，适用于有一点基础的同学，页面排版干净，固定导航栏加上轮播图，包含了表单，视频音频超链接轮播图等基础知识，采用了html+css来实现布局，网站深度为两层。在登录界面用了一小段js来作为输入框的判断，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

难度系数：★★★☆☆

一、网站题目

保护熊猫，动物介绍，熊猫介绍，保护生态环境等网站的设计与制作

二、网站描述

一个致力于介绍熊猫的专业网站！在这里，我们热衷于探索、分享并深入了解丰富多彩的熊猫世界，引领你进入令人惊叹的熊猫王国。网站分为七个模块，分别是主页，熊猫介绍，详细介绍（详细介绍模块包含了六页，所以这个网站可以说有12页也可以说是7页，因为这六页布局都一样，只是内容不一样），熊猫书籍，登录、注册、个人信息。页面布局分模块，主页是一种布局，介绍是一种布局，书籍是一种布局，详细介绍是一种布局，登录注册个人信息是一种布局。网站较为基础，属于中等难度，适合有一点基础的同学作为练习使用

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站页面进行了截图展示，包含了视频链接。

HTML+CSS网站分享：熊猫介绍

五、部分代码制作

每个页面的css文件是分开的，文件太多了，所以就展示一个页面，在测试时需要替换掉里面的图片位置为本地位置，需要在swiper3官网引入swiper文件，如果本地有下载可以直接在本地引用路径。

index.html