网页大作业——生物介绍

web 报告

1.确立自己的网页主题

选择了生物的介绍作为主题

2.网页基本设计

分设了5个基本网页，其中一个主页，两个模块页，两个内容页。

nav说明

nav的前五个，即首页、动物分类、腔肠动物门、界、脊索模块是可以点开的

首页就是主页，动物分类里面的猫是可以点开的，就是内容页1，

腔肠动物门是内容页2，界是模块页1，脊索模块是模块页2

主页

主要布局是 ：

最上面有header，主要是包含标题

往下是导航栏目，有不同的栏目可以跳转。实现方法是在ul里面放了超链接，

导航条会指明现在在哪个页面，现在所在的页面，导航条会比较深

采用display: flex;布局

以下是分享栏，可以把页面分享给别人，这是百度提供的api

主体部分是个flex col的布局,分两个部分,

上面是一个flex row 布局,其中是:

一个动物图鉴，有动物的名字，鼠标放上去可以显示图像,用ul li布局。

点击的话可以打开这个图片.原理是hover之后css更改标签的class

网页中间是一个轮播图，展示动物的图片。外面加了边框。实现方法是js

右边是一个生物分类等级示意图，主要指明科学的生物分类法则。

下面还有个关于我们的说明

界这个栏目可以点进去，可以进入“界”的界面。

下面还有一个珍惜动物图鉴,是用grid布局做的

最下面是版权信息和联络方式

模块页面1

此模块为界分类，分成了动物界，植物界， 真菌界，原生生物界， 原核生物界

最上面有header，主要是包含标题。下面有一个面包屑导航条，指明现在在什么位置

下面是5个界的按钮，按下去可以去具体的界，但是我只做了第一个动物界的东西，因为时间不够做那么多网页。这几个按钮做的比较大，用的是flex布局，平铺在整个页面上

下面是flex布局的平铺整个界面的各个门，因为动物界有很多的门，我只列出了一些，而且只做了脊索动物门的一些内容。这些门都是些链接。使用了不同的颜色，类似于彩虹，比较好看

下面又一个动物的图鉴,使用了grid布局,就好像一个相册一样

右下角是一个返回顶部的固定按钮

模块界面2

最上面有header，主要是包含标题。下面是几个纲,没有做链接.

下面是面包屑导航条，指明现在在什么位置

再下面是多列布局,使用了column-count:, 每一列都是一些文章,

其中一些有做链接

往下是flex row 布局的三个图形,是上课题目的一个花纹,

觉得比较好看就用上了,是一个dashed border.中间一张太极图

以下是五个会动的心跳动画,使用flex row 布局,放入了几张动物图片,

鼠标放上去心跳会加快,原理是animation: 和@keyframes使得div的宽高变化,hover之后animation时间变短

可以给这几个心动动物打分，打分之后他的分数会上涨，js实现

内容页面1

整体是默认的从上到下的布局

最上面有header，主要是包含标题，往右边是返回主页按钮，

按钮使用了float right 布局

下面有一个面包屑导航条，指明现在在什么位置

下面是flex布局的平铺三个列，分别是主要内容，图片界面，右边栏

主要内容上面部分是关于这种动物的一些简要信息，比如说他的名字，门，目之类的

下面是这个动物的主要信息

下面有一个讨论区，采用了ul 和li布局和fieldset的嵌套，使用js拼html字符串，

然后用jquery放到页面里，再加上click事件

最下面是版权信息

内容页面2

是腔肠动物门的一个页面，可以看到整体是黑色的，代表着深海的颜色。

最上面有header，主要是包含标题，往右边是返回主页和动物界按钮，按钮使用了float right 布局

下面有一个面包屑导航条，指明现在在什么位置

下面是她的主要信息，图文并茂，所有的东西都设计成居中了，采用的技术是align-items: center;justify-content: center;。右侧有一张水母的图片，与背景融合起来，有魔幻的感觉。因为背景是根据这张图片做的渐变色，所以比较合适，看起来不是很突兀。把这张图做成png，把边框去掉了，只保留水母 ，和旁边会更加搭配一点。在水母上加了游动的动画，水母会上下游动，还会变大变小，如果鼠标移上去的话，他变化的会更快

下面有一个讨论区，采用了ul 和li布局和fieldset的嵌套，使用js拼html字符串，然后用jquery放到页面里，再加上click事件

关于人机交互

每个页面大多数的部件在鼠标移上去之后都会有一些动作，人机交互比较好，比较美观

评论区的按钮是可以按的，添加和删除都可以，但是只能给评论添加评论，还不能给主评论区添加评论

色彩设计

所有页面的body都加上了selection-blue ，使得选中的字体背景色是蓝色的，比较好看

5张页面都采用纯色设计，单纯但是美观，大多采取蓝紫色系，契合度高

js技术

vote.js

可以在页面创建投票栏目，点击投票按钮会让动物得票数上涨。

原理是把onRow字符串更改几个字，使得他表示的图片不同，

然后拼成字符串，把这个html字符串放到#vote里面。

然后再给按钮加上点击就寻找他旁边的p里面的字符，

然后把这个字符转成数字，

数字++，然后放回到p里面

putComments.js

在内容页面创建评论板，可以在已经有的评论里面追加评论。但是暂时还不能在整个评论板里增加评论。使用的技术是jquery，主要是用评论的一个模板html commentLi，用字符串的替换，替换掉其中的#floorCnt# #username# 等字段，替换的字样都是存在一个列表里面的，都是写死的，所以说是静态网页。不过要多添加几列的话，只要在列表里多加几个项目就行了，还是比较方便的。

然后用jquery在网页原来定义的#commentList 这个ul里面插入刚才拼出来的html字符串。

比较困难的地方是给里面的按钮增加点击事件，使用jquery的on和bind函数，让删除按钮被点击，就使这块的display:none;添加评论按钮的话，点击就在这个fieldset里面添加新的html块，评论按钮就是使得一开始被设置为display:none的评论模块的display=block。首先这个布局比较复杂，是一个列表，列表里面还有列表，因为是评论的评论。经过修改，总算是可以绑定了。但是在添加评论的时候，那些新的按钮都是没绑定上的，于是想到在添加之后绑定这些按钮，但是这样会形成添加新的，然后调用绑定代码，绑定代码里又调用了添加新的的这样无止尽循环。

之后想到用async 在添加完评论之后再绑定按钮，但是写不出来。

最后想到直接setInterval 每1秒绑定一次好了。但是按钮一按就会出来很多的评论，后来发现是绑定太多东西了，在绑定新的之前要先把之前的解绑。

pushList.js

用于首页左侧的动物们展示框放入图片和名字,因为这个展示框可以放很多的东西,如果全都用html的话,会有很多重复代码,写得又累,又没效率,要改的话,也很麻烦,所以用js批量的生成代码插入ul

主要思想是在animals , animalImgs , animalLinks , 三个列表里面定义好动物的名字和她的图像url和她要链接去的地方, 然后使用string 的replace 替换掉准备好的一个li模板里的关键词,再插入到html就行

button.js

用于在各个页面的按钮里面实现她的功能,主要思想是,在 btnNames列表 里面放好按钮的名字, btnReacts放好点击按钮要去的网页,然后遍历这个列表,在网页操作dom,根据id找到这个按钮,给他设置onclick 事件

btn.onclick = function (ev) {

location.href = btnReacts[i];

};

首页的轮播图

rotationNoCircle.js

主要思想是给下面每个链接设置一个onclick相应，把图片名字改变，按钮的颜色改变，

主要是设置全局变量iCount要设置哪个就把哪个改成这个，然后遍历所有的按钮，

把是这个下标的改成不一样的颜色，不是的就保持原来的颜色，图片也改掉，

因为图片的名字都是b-ad1之类的，所以改掉比较简单。然后还要设置一个定时器，

每次过了一段时间就要改变一下图片，因为iCount是个全局变量，就是取得她来得到那个图片的名字，

顺便要把按钮也变色，而且她前面一个按钮要变回原来的颜色，然后他++，等到时间到了，再去做下一个

time.js

显示当前的时间,主要用的是date这个类 然后把他的信息转换成了字符串,然后插入到网页里面.

设置定时器,每过0.5s去显示一下

css技术

腔肠动物门.html 在这个页面做了一个水母的动态图,可以上下游动.主要使用的是css的@keyframes ,让他 translateY y方向移动,并设置她的animation。

还给他加了放大缩小的动作，使用的是animation调整width和height

外部引用的插件功能和说明

js/jquery.min.js

jquery 需要的js代码

js/share.js

百度分享的api需要的js

css/font-awesome.min.css

font-awesome的字体的css文件

fonts文件夹有font-awesome的字体文件