web 報告

1.確立自己的網(wǎng)頁主題

選擇了生物的介紹作為主題 2.網(wǎng)頁基本設計

分設了5個基本網(wǎng)頁，其中一個主頁，兩個模塊頁，兩個內(nèi)容頁。 nav說明

nav的前五個，即首頁、動物分類、腔腸動物門、界、脊索模塊是可以點開的 首頁就是主頁，動物分類里面的貓是可以點開的，就是內(nèi)容頁1， 腔腸動物門是內(nèi)容頁2，界是模塊頁1，脊索模塊是模塊頁2 主頁

主要布局是 ： 最上面有header，主要是包含標題 往下是導航欄目，有不同的欄目可以跳轉。實現(xiàn)方法是在ul里面放了超鏈接， 導航條會指明現(xiàn)在在哪個頁面，現(xiàn)在所在的頁面，導航條會比較深 采用display: flex;布局 以下是分享欄，可以把頁面分享給別人，這是百度提供的api 主體部分是個flex col的布局,分兩個部分, 上面是一個flex row 布局,其中是: 一個動物圖鑒，有動物的名字，鼠標放上去可以顯示圖像,用ul li布局。 點擊的話可以打開這個圖片.原理是hover之后css更改標簽的class 網(wǎng)頁中間是一個輪播圖，展示動物的圖片。外面加了邊框。實現(xiàn)方法是js 右邊是一個生物分類等級示意圖，主要指明科學的生物分類法則。 下面還有個關于我們的說明 界這個欄目可以點進去，可以進入“界”的界面。 下面還有一個珍惜動物圖鑒,是用grid布局做的 最下面是版權信息和聯(lián)絡方式 模塊頁面1?

此模塊為界分類，分成了動物界，植物界， 真菌界，原生生物界， 原核生物界 最上面有header，主要是包含標題。下面有一個面包屑導航條，指明現(xiàn)在在什么位置 下面是5個界的按鈕，按下去可以去具體的界，但是我只做了第一個動物界的東西，因為時間不夠做那么多網(wǎng)頁。這幾個按鈕做的比較大，用的是flex布局，平鋪在整個頁面上 下面是flex布局的平鋪整個界面的各個門，因為動物界有很多的門，我只列出了一些，而且只做了脊索動物門的一些內(nèi)容。這些門都是些鏈接。使用了不同的顏色，類似于彩虹，比較好看 下面又一個動物的圖鑒,使用了grid布局,就好像一個相冊一樣 右下角是一個返回頂部的固定按鈕

模塊界面2

最上面有header，主要是包含標題。下面是幾個綱,沒有做鏈接. 下面是面包屑導航條，指明現(xiàn)在在什么位置 再下面是多列布局,使用了column-count:, 每一列都是一些文章, 其中一些有做鏈接 往下是flex row 布局的三個圖形,是上課題目的一個花紋, 覺得比較好看就用上了,是一個dashed border.中間一張?zhí)珮O圖 以下是五個會動的心跳動畫,使用flex row 布局,放入了幾張動物圖片, 鼠標放上去心跳會加快,原理是animation: 和@keyframes使得div的寬高變化,hover之后animation時間變短 可以給這幾個心動動物打分，打分之后他的分數(shù)會上漲，js實現(xiàn)

內(nèi)容頁面1

整體是默認的從上到下的布局 最上面有header，主要是包含標題，往右邊是返回主頁按鈕， 按鈕使用了float right 布局 下面有一個面包屑導航條，指明現(xiàn)在在什么位置 下面是flex布局的平鋪三個列，分別是主要內(nèi)容，圖片界面，右邊欄 主要內(nèi)容上面部分是關于這種動物的一些簡要信息，比如說他的名字，門，目之類的 下面是這個動物的主要信息 下面有一個討論區(qū)，采用了ul 和li布局和fieldset的嵌套，使用js拼html字符串， 然后用jquery放到頁面里，再加上click事件 最下面是版權信息

內(nèi)容頁面2

是腔腸動物門的一個頁面，可以看到整體是黑色的，代表著深海的顏色。 最上面有header，主要是包含標題，往右邊是返回主頁和動物界按鈕，按鈕使用了float right 布局 下面有一個面包屑導航條，指明現(xiàn)在在什么位置 下面是她的主要信息，圖文并茂，所有的東西都設計成居中了，采用的技術是align-items: center;justify-content: center;。右側有一張水母的圖片，與背景融合起來，有魔幻的感覺。因為背景是根據(jù)這張圖片做的漸變色，所以比較合適，看起來不是很突兀。把這張圖做成png，把邊框去掉了，只保留水母 ，和旁邊會更加搭配一點。在水母上加了游動的動畫，水母會上下游動，還會變大變小，如果鼠標移上去的話，他變化的會更快 下面有一個討論區(qū)，采用了ul 和li布局和fieldset的嵌套，使用js拼html字符串，然后用jquery放到頁面里，再加上click事件

關于人機交互

每個頁面大多數(shù)的部件在鼠標移上去之后都會有一些動作，人機交互比較好，比較美觀 評論區(qū)的按鈕是可以按的，添加和刪除都可以，但是只能給評論添加評論，還不能給主評論區(qū)添加評論 色彩設計

所有頁面的body都加上了selection-blue ，使得選中的字體背景色是藍色的，比較好看 5張頁面都采用純色設計，單純但是美觀，大多采取藍紫色系，契合度高 js技術

vote.js

可以在頁面創(chuàng)建投票欄目，點擊投票按鈕會讓動物得票數(shù)上漲。 原理是把onRow字符串更改幾個字，使得他表示的圖片不同， 然后拼成字符串，把這個html字符串放到#vote里面。 然后再給按鈕加上點擊就尋找他旁邊的p里面的字符， 然后把這個字符轉成數(shù)字， 數(shù)字++，然后放回到p里面 putComments.js

在內(nèi)容頁面創(chuàng)建評論板，可以在已經(jīng)有的評論里面追加評論。但是暫時還不能在整個評論板里增加評論。使用的技術是jquery，主要是用評論的一個模板html commentLi，用字符串的替換，替換掉其中的#floorCnt# #username# 等字段，替換的字樣都是存在一個列表里面的，都是寫死的，所以說是靜態(tài)網(wǎng)頁。不過要多添加幾列的話，只要在列表里多加幾個項目就行了，還是比較方便的。 然后用jquery在網(wǎng)頁原來定義的#commentList 這個ul里面插入剛才拼出來的html字符串。 比較困難的地方是給里面的按鈕增加點擊事件，使用jquery的on和bind函數(shù)，讓刪除按鈕被點擊，就使這塊的display:none;添加評論按鈕的話，點擊就在這個fieldset里面添加新的html塊，評論按鈕就是使得一開始被設置為display:none的評論模塊的display=block。首先這個布局比較復雜，是一個列表，列表里面還有列表，因為是評論的評論。經(jīng)過修改，總算是可以綁定了。但是在添加評論的時候，那些新的按鈕都是沒綁定上的，于是想到在添加之后綁定這些按鈕，但是這樣會形成添加新的，然后調(diào)用綁定代碼，綁定代碼里又調(diào)用了添加新的的這樣無止盡循環(huán)。 之后想到用async 在添加完評論之后再綁定按鈕，但是寫不出來。 最后想到直接setInterval 每1秒綁定一次好了。但是按鈕一按就會出來很多的評論，后來發(fā)現(xiàn)是綁定太多東西了，在綁定新的之前要先把之前的解綁。 pushList.js?

用于首頁左側的動物們展示框放入圖片和名字,因為這個展示框可以放很多的東西,如果全都用html的話,會有很多重復代碼,寫得又累,又沒效率,要改的話,也很麻煩,所以用js批量的生成代碼插入ul 主要思想是在animals , animalImgs , animalLinks , 三個列表里面定義好動物的名字和她的圖像url和她要鏈接去的地方, 然后使用string 的replace 替換掉準備好的一個li模板里的關鍵詞,再插入到html就行 button.js

用于在各個頁面的按鈕里面實現(xiàn)她的功能,主要思想是,在 btnNames列表 里面放好按鈕的名字, btnReacts放好點擊按鈕要去的網(wǎng)頁,然后遍歷這個列表,在網(wǎng)頁操作dom,根據(jù)id找到這個按鈕,給他設置onclick 事件 btn.onclick = function (ev) { location.href = btnReacts[i]; }; 首頁的輪播圖

rotationNoCircle.js

主要思想是給下面每個鏈接設置一個onclick相應，把圖片名字改變，按鈕的顏色改變， 主要是設置全局變量iCount要設置哪個就把哪個改成這個，然后遍歷所有的按鈕， 把是這個下標的改成不一樣的顏色，不是的就保持原來的顏色，圖片也改掉， 因為圖片的名字都是b-ad1之類的，所以改掉比較簡單。然后還要設置一個定時器， 每次過了一段時間就要改變一下圖片，因為iCount是個全局變量，就是取得她來得到那個圖片的名字， 順便要把按鈕也變色，而且她前面一個按鈕要變回原來的顏色，然后他++，等到時間到了，再去做下一個 time.js

顯示當前的時間,主要用的是date這個類 然后把他的信息轉換成了字符串,然后插入到網(wǎng)頁里面. 設置定時器,每過0.5s去顯示一下 css技術

腔腸動物門.html 在這個頁面做了一個水母的動態(tài)圖,可以上下游動.主要使用的是css的@keyframes ,讓他 translateY y方向移動,并設置她的animation。 還給他加了放大縮小的動作，使用的是animation調(diào)整width和height 外部引用的插件功能和說明

js/jquery.min.js jquery 需要的js代碼 js/share.js 百度分享的api需要的js css/font-awesome.min.css font-awesome的字體的css文件 fonts文件夾有font-awesome的字體文件