學號

課程設計

課程名稱網頁設計

題目	鑫晨之家特效網站設計
專業	軟件工程
班級	1173班
姓名
成績	_____________________________
指導老師

2019年 1 月 6日至 2019 年 1 月 13 日

武漢華夏理工學院信息工程學院

課程設計任務書

課程名稱：網頁設計指導教師：汪汝

班級名稱：軟件1173、1174班開課院、系：計算機與網絡工程系

一、課程設計目的與任務

網頁設計是軟件專業的一門專業必修課。網頁設計課程設計可以充分彌補課堂教學和實驗中知識深度和廣度有限的不足，更好地幫助學生系統地掌握網頁設計課程的主要內容。通過課程設計的綜合訓練，能培養學生實際分析問題、編程和動手的能力，幫助學生系統掌握網頁設計課程的主要內容，更好地完成教學任務。爲後續課程打好基礎。

要求學生根據所學的網頁設計的相關知識，能夠針對一個具體的系統，進行需求分析，總體設計、詳細設計、編碼、測試等，完成題目要求的功能。本課程設計是設計企業網站主頁。

二、課程設計的內容與基本要求

學生根據所學的網頁設計的知識，能夠針對企業網頁，進行系統的需求分析、系統設計、編碼及測試，系統必須實現以下功能：

企業LOGO、網站的主要欄目和概況介紹
產品介紹
圖片
動畫
網頁除用到框架外，還使用CSS樣式
網頁美觀、頁面內容豐富

三、學時分配進度安排

序號	設計內容	所用時間
1	下發任務書，集中講解課程設計原理與方法。系統需求分析、架構及界面設計	1天
2	網頁設計	1天
3	網頁設計	1天
4	調試及撰寫報告	1天
5	答辯	1天
合計		1周

四、課程設計考覈及評分標準

1.設計報告要求

課程設計報告要求邏輯清晰、層次分明、書寫整潔。格式包括標題、提要、正文（包括需求分析，總體設計、詳細設計、調試分析、心得、答辯、成績評定。）附錄(程序清單)。設計報告須每人一份，獨立完成。

2.評分標準

評分依據	評分成績
1、學習態度認真、遵守紀律	10
2、設計分析合理性	10
3、設計方案正確性、可行性	20
4、設計結果正確性	30
5、設計報告的規範性	10
6、實踐環節的獨立性與主動性	10
7、設計驗收	10
總分	100分

注：成績等級：優（90分—100分）、良（80分—89分）、中（70分—79分）、及格（60分—69分）、60分以下爲不及格。

五、指導時間

周次	星期一	星期二	星期三	星期四	星期五
第18周	第1-4節		第3-6節		第3-4節
地點	現教221		現教221		現教221

執筆：日期：2018-12-24

審閱：日期：

1 設計題目

鑫晨之家特效網站設計（正文宋體五號，1.25倍行距）

2 開發環境

硬件環境：微機系列，內存在1G以上，軟件環境：Microsoft Windows 10

3 開發工具

Dreamweaver8

4 完成時間

2019.1.6----2019.1.13

5 設計思想

5.1 網頁設計思想

網頁設計由三大部分組成，分別爲HTML超文本標記語言、CSS層疊樣式表和JavaScript腳本語言。其中HTML主要做整個網頁的基本架構，CSS用於爲網頁文檔中的元素添加各類樣式，給網頁添加色彩，而JavaScript主要是給網頁的頁面添加動態效果和功能，從而實現網頁的各種效果。

而在本次網頁設計也將會用到這三種語言實現整個網頁的效果。在設計時先將整個網頁的框架搭建起來，然後再用具體的圖片和文字以及超鏈接代替結構中的內容，然後給設計的內容框架添加CSS樣式效果，給網頁添加色彩。大致樣式設置後在用JavaScript結合框架和樣式給網頁設置動態效果。最後再整頓整個網頁的框架、樣式以及動態效果，使得網頁美觀，特效更加明顯。

5.2 設計方案

首先用HTML寫出網頁的基本框架，其中大致需要用到HTML5新增文檔結構標籤的頁眉標籤<header>、導航標籤<nav>、書標籤<section>、文章標籤<article>、側欄標籤<aside>、頁腳標籤<footer>，這幾個標籤將主要構造出網頁的大致框架結構，另外還要用一些基本標籤來完善框架的內容設計。比如添加添加一些段落標籤、超鏈接標籤、容器標籤、以及圖像標籤和列表標籤。

接下來利用CSS樣式來修飾以上標籤，在修飾是需要用到適合和元素選擇器來進行更好的控制元素的樣式。在設計時，背景用圖片代替，並設置大小屬性爲cover覆蓋整個網頁，網頁的其它部分也設置一些顏色，但爲了既能夠顯示它們的顏色，又能顯示出背景圖片的效果，所以在設置顏色時需要用能夠設置透明的rgba()樣式來設置顏色的效果。

樣式基本設計好之後，然後就是設計網站的一些動態效果，這時需要用到JavaScript腳本語言，其中會運用到jQuery模板來簡化代碼的實現，以便更好更有效的讓網頁多實現幾個動態效果。主要效果將包括背景切換效果、愛心飄落效果、圖片輪播效果和短視頻播放效果。設計時需要結合CSS的樣式元素進行合理的搭配。

最後來補充網頁的具體內容和整理網頁的整個效果，主要是填充各個模塊的標題、網站說明和菜單欄以及其它空餘部分的空間，儘量讓它顯得不那麼的單調。全部內容填充好之後再進行整頓整個網頁的效果，使其位置更加的合適以及顏色更加的搭配。（爲了不破壞代碼，避免自己的邏輯跟不上，每個效果模塊可以單獨設計，最後在合理的整頓合併到一個網頁中。）

6 設計過程及設計步驟

6.1 網頁結構設計

1.打開Dreamweaver8軟件，新建一個HTML文件，修改頭文件裏面的編碼、標題和去掉多餘的內容，並調整好格式。

2.在body裏面設計網頁結構，先寫個大致的框架頭部用一個<header>頁眉標籤，接下來用一個<div>標籤來包裹下面的所有內容。然後在<div>標籤裏面依次放入<nav>導航標籤、<aside>做側欄標籤、<section>節標籤、<aside>右側欄標籤和<footer>頁腳標籤來製作<dev>裏面空間的框架。其中導航標籤將放在最上面當作菜單，接下來一層中間是節標籤將是正文內容，兩邊是用兩個側欄標籤來裝左右兩邊側欄的內容。

3.進一步往中間層深入構造下一級框架。先在導航欄裏面放多個<a>超鏈接標籤來當菜單目錄，接下來在兩個側欄標籤裏面各自都放一個字體標籤和多個段落標籤來當側欄內容。然後在節標籤裏面放兩個文章標籤來分兩段來放中間正文，並在兩個文章標籤裏面都依次頁眉標籤、段落標籤和頁腳標籤，進行再次分層。最後分別在頁眉標籤和頁腳標籤裏面添加字體標籤。

6.2 CSS樣式設計

1.在HTML文本的head頭標籤裏面添加<style>標籤來放置CSS樣式，然後把所有的內邊距和外邊距設置爲0。

2.設置body標籤的背景顏色，最大寬度爲900px，border邊框爲solid和邊框顏色以及內部字體顏色。

3.設置header標籤背景顏色和字體顏色，display設置爲把block塊級元素，文本居中。

4.設置各級標題標籤的字體大小和文本居中。

5.設置導航nav標籤爲塊級元素，寬度相對爲100%，浮動爲左浮動，文本居中，設置顏色，相對外部標籤頂部和底部都爲20px。

6.設置nav a:link和nav a:visited都爲內聯元素，設置它們的顏色，內邊距10px，外邊距5px，下邊框3px，實線。並設置字體爲粗字體。

7.設置nav a：hover的背景顏色和字體顏色。nav h3外邊距15。

8.設置div的id=container並設置它的背景顏色。

9.設置section爲塊級元素，寬度相對爲60%，左浮動。

10.設置article爲塊級元素，設置他的顏色以及外邊距和內邊框都爲10px。

11.設置article裏面的header和footer的內邊框都爲5px。article的h1大小設置爲18px。

12.aside設置爲塊級元素，寬度相對爲20%，左浮動。

13.aside的h3設置外邊距15px。aside p外邊距15px，字體爲加寬。

14.footer設置爲塊級元素，兩側都不允許浮動，並設置它的背景顏色和字體顏色，文本居中，內邊距爲15px。

15.footer h2 字體大小設置爲14px。並設置它的顏色。設置a的顏色和a link文本下劃線爲無。

HTML和CSS結合後的效果如圖一顯示。

圖1 HTML+CSS網頁設計效果

6.3 愛心飄落效果設計

1.新建一個HTML文本，在body裏面寫兩個div標籤，並設置它們的class分別爲left和right。

2.在head標籤裏添加style標籤在裏面設置body裏面的div樣式。

3.設置left個right都爲絕對定位，設置它們的絕對定位都爲left 0xp top 0px 寬度爲100px，高度爲160px，背景顏色設置爲紅色，圓角屬性border-raduis設置爲（50px 50px 0px 0px），然後設置left的旋轉角度爲逆時針45度。right的旋轉角度爲順時針45。這時兩個div容器合在一起看起來就合成了一個完整的愛心。

4.優化代碼，在上面可以知道，兩個div容器除了旋轉角度的屬性不一樣外，其他的屬性都是一樣的，所以爲了避免這麼多的重複代碼出現，可以吧這些重複的喝到一起寫在一個類選擇器中讓兩個容器共同使用它，所以可以用一個類選擇器去同時引導另外兩個選擇器使用，爲了結合後面需要用到的jQuery模板js代碼，我這裏的引導類選擇器用snowfall-flakes作爲類名，另外兩個被領導的結合領導類的名字分別寫爲snowfall-flakes:before和snowfall-flakes:after。

5.再將snowfall-flakes的屬性設置爲相對定位，高度和寬度都設置爲20px，外邊距設置爲50px和auto。然後將之前left和right中相同代碼部分放在snowfall-flakes:before,.snowfall-flakes:after中不相同的那一行代碼也分別放在snowfall-flakes:before和snowfall-flakes:after中，然後註釋之前的left和right代碼。

6.在body中寫js代碼，先將需要用到的兩個jQuery模板庫文件放到與該HTML文件的同目錄裏面的js文件夾中，然後在body標籤中寫入<script src="js/jquery-1.2.6.min.js"> </script>和<script src="js/snowfall.jquery.js"></script>兩行代碼吧這兩個模板庫引入帶HTML中，然後寫個script標籤，在標籤中寫入$(document).snowfall({flakeCount : 200,maxSpeed : 5});這一行代碼。

7.最後改一下愛心的大小，把整體的一些與愛心相關的大小代碼成倍數的減小，然後可以吧之前寫的兩個div刪除，並在body的CSS樣式裏面添加一張背景圖片，設置圖片爲平鋪，外邊距爲0。

最後愛心飄落的特效就出來了，其效果如圖2，可以通過寫的那行js代碼來改變愛心飄落的數量和飄落的速度。

圖2 愛心飄落特效

6.4 背景切換效果設計

1.找16張圖片，並且將這十六張片都按一定比例變小，大圖片命名爲1到16.jpg，小圖片命名爲1-1到1-16jpg，然後再製作一張圖片做一個按鈕（用來顯示和關閉切換背景時的那些需要切換的圖片），並將這些圖片放在與HTML文件同目錄下的images文件夾中。

2.新建一個HTML文件，在body標籤中寫一個div標籤設置它的id=img-wrap，然後在div標籤包含一個ul無序列表標籤，設置它的class=list，然後再ul標籤裏面包含16個li標籤，設置它們的class=item，data-src的值分別等於images/(1到16).jpg（用來在js代碼中方便切換背景圖片尋找到對應的圖片），然後再這些li標籤裏面分別包含img標籤，並分別設置它們的src屬性的值爲images/（1-1到16-16）.jpg圖片路徑。然後再第一個div標籤的下面再寫一個div標籤設置id=tab-btn。

3.在head標籤裏添加style標籤用來添加CSS樣式，各標籤樣式設置如下：

.設置所有標籤的內邊距和外邊距都爲0。

.設置body標籤的背景圖片爲images/1.jpg，並且大小設置爲覆蓋整個網頁頁面。

.設置img-wrap的寬度爲相對100%，高度爲150px，背景顏色爲黑色，透明度爲0.46。這個div容器是用來放置選擇可選切換背景的圖片的。

.設置list的列表值類型爲無，寬度爲1000px，高度爲100px，外邊距爲0 auto。

.設置item爲左浮動（使可選圖片橫排排列），外邊距爲0px 15px。

.設置itm img的寬度爲95px，高度爲60px。

.設置tab-btn爲絕對定位，位置定位到網頁的右上角，高度爲50px背景圖片爲images/upseek.png，光標設置爲pointer。（這個是一個用來顯示和隱藏可選圖片區域的按鈕）。

tab-btn：hover 當鼠標放在按鈕上時，按鈕向上移動64px，鼠標離開時回到原位置。

4.寫js代碼，同樣將上一個愛心飄落效果中的jQuery模板引入到該HTML代碼中。然後寫script標籤，在裏面寫下面幾行js代碼

$("#tab-btn").click(function(){

$("#img-wrap").slideToggle();

});

//代碼表示鼠標點擊對應圖片後尋找到對應圖片的地址，然後將背景圖片的地址換成點擊圖片得到的對應地址達到切換背景的效果。

$(".item").click(function(){

var uri = $(this).attr("data-src");

$("body").css({

"background-image":"url("+uri+")"

});

設計效果如圖3和圖4所示：

圖3 背景切換效果1

圖4 背景切換效果2

6.5 輪播圖效果設計

1.新建一個HTML文件，將它保存帶到與背景切換的HTML同一個目錄下，在body標籤中寫一個div標籤設置它的id=lunbo，然後在div標籤包含一個ul無序列表標籤，設置它的id=shidian_img，然後再ul標籤裏面包含16個li標籤，設置它們的class=img_lunbo，然後再這些li標籤裏面分別包含img標籤，設置class=img_lunbo，並分別設置它們的src屬性的值爲images/（1到16）.jpg圖片路徑。

2.在head標籤裏添加style標籤用來添加CSS樣式，各標籤樣式設置如下：

.設置全部背景顏色爲綠色。

.設置lunbo的高度和寬度都爲500px，位置爲left 100px，top 50px，關係型定位。

.設置ul寬度和高度都相對爲100%，位置爲左上角，關係型定位。

.設置li_lunbo寬度和高度都相對爲100%，位置爲左上角，絕對型定位。

.設置img_lunbo寬度相對100%，高度爲10px。

3.寫js代碼，寫script標籤，在body裏面寫如下面js代碼

imgs=document.getElementById("shidian_img").children; //獲取所以圖片並且存儲到數組imgs數組裏

for(i =0; i<imgs.length;i++){

imgs[i].style.display="none";

} //循環獲取到imgs裏面的元素，並且把它們隱藏設置爲none

imgs[index].style.display ="block"; //當所有元素都隱藏了，在顯示當前index所指的圖片。

index ++;

if(index >= imgs.length){

index=0;

} //判斷index是否大於imgs的長度，等於imgs的長度後在重新賦予它初始值0；

}

timer=setInterval(show_img,1000); //建立週期定時器。

設計完成後的效果如圖5和圖6所示。

圖5 輪播圖效果1

圖6 輪播圖效果2

6.6 網頁整合、填充以及整頓

1.將以上三個特效整合到原網頁的框架中：

.愛心飄落特效的代碼可將CSS代碼放到框架的HTML中head裏面的style標籤裏面，js代碼可放在其body裏面的代碼的最後面的script標籤中。

.背景切換效果中body裏面的所有代碼都可以放在框架body標籤裏面的最上面。將CSS樣式也加入框架head裏的style中，注意的是把原來框架裏面的body樣式和愛心飄落特效裏面的body樣式都去掉換成背景切換中的body樣式，然後js代碼也直接放入script標籤中。

.輪播圖效果中body裏面的所由代碼放在框架裏section標籤裏面的都一個article標籤裏面，但爲了使得這部分的網頁內容更融洽和不顯得那麼的單調所以在這個article標籤裏面在加一層aside、section，article和aside標籤，而把輪播圖效果中body裏面的所由代碼放在所添加的這一層中的section裏面的article中，左右兩邊的aside中分別放入由ps出來的兩隻小象圖片。然後接着把除了body樣式的所有樣式代碼和js代碼分別放入框架的style標籤和script標籤中。

2.將框架裏面的nav標籤和左aside標籤中加入一些超鏈接，分別進入一些常用網站以及與自己相關網站的效果。然後在右aside標籤中寫上一些網站的說明。最後在header標籤中再加一張由ps出來的網站logo圖片。

3.網站最終效果如圖7圖8所示。

圖7 網站最終效果1

圖8 網站最終效果2

7 測試運行

網站的主要功能是能夠快速的進入一些常用網站和自己的一些常用網站的登陸頁面。其頁面的所有動態效果說明如下。

運行網頁後自動運行愛心飄落特效和圖片輪播特效以及短視頻播放。
點擊右上角的按鈕可顯示和隱藏背景切換的可選圖片區域，點擊可選圖片區域裏面的圖片可以網頁背景切換成對應的圖片。
點擊由下劃線的文字可進入對應的網頁頁面。

8 評價與修訂

整個網頁頁面清晰，效果明顯，去其愛心飄落特效是頁面比較顯眼的效果，可以吸引瀏覽者的眼光，它是網頁頁面最具有創造性和獨特性的地方。還有輪播圖雖然在很多網頁中都能看到這種效果，但是在該網頁中也比較顯眼的地方，然後就是網頁的頂部有一個可以切換背景的圖片選擇區，可以通過它切換背景，右上角有一個按鈕可以將這個選擇區域顯示和隱藏，這使得網頁顯得更加的高大上，更有獨特性。網頁正文區域的下方有一些三個短視頻，是完成的項目小遊戲錄屏，這讓網頁顯得更加的新穎，內容豐滿。另外網頁有說明，也有一些常用網站的入口，這可以更加方便客戶進入這些網站。頁面中每個區域都有不同的顏色，

不足的是網頁內容不夠豐滿，有大片的空白區域顯得有些浪費空間，還有就是網頁單配顏色也不夠美觀，字體也不是很顯眼和美觀。這些都是美中不足的地方。

網頁的整個效果還是比較可以的，但需要使它更加美觀和頁面豐滿，還需繼續學習和努力。

9設計體會

參考文獻

[1] 1] HTML5網頁前端設計，周文潔編著，北京：清華大學出版社，2018

[2] HTML5網頁前端設計實戰，周文潔編著，北京：清華大學出版社，2018

附錄

<!DOCTYPE>

<html>

<head>

<title>鑫晨之家特效總站</title>

<style>

margin: 0;

padding: 0;

}

body{

background: url("images/1.jpg");

background-size: cover;

}

#img-wrap{

width: 100%;

height: 150px;

background-color: rgba(0,0,0,0.46);

padding-top: 13px;

}

.list{

list-style-type: none;

width: 1000px;

height: 100px;

margin: 0 auto;

}

.item {

float: left;

margin: 5 15px;

}

.item img{

width: 95px;

height: 60px;

}

.item img:hover{

color: #FF0099;

}

#tab-btn{

position: absolute;

top: 0;

right: 0;

width: 50px;

height: 50px;

background-image: url("images/upseek.png");

cursor: pointer;

}

#tab-btn:hover{

background-position-y: -64px;

}

.snowfall-flakes1{

position: relative;/* 相對定位監管絕對定位 */

width: 20px;

height: 20px;

margin: 50px auto;

/*background-color: #096;*/

}

.snowfall-flakes:before,.snowfall-flakes:after{/* ,並列和把相同的內容併到一起 */

content: "";/* 激活僞元素的必要因素 */

position: absolute;/* css重點和難點絕對定位 */

left: 0;

top: 0; /* 定位一般寫到上面 */

width: 5px;

height: 8px;

background: rgba(255,0,0,0.66);

border-radius: 2.5px 2.5px 0px 0px;/* 圓角屬性 */

}

.snowfall-flakes:before{

transform: rotate(-45deg);/* css3變換屬性旋轉 deg角度 */

}

.snowfall-flakes:after{

transform: translateX(4.3px) rotate(45deg);/* css3位移 css3變換屬性旋轉 deg角度 */

}

header {

background-color: rgba(210,50,50,0.46);

display: block;

color: #2178D8;

text-align: center;

}

h1{

font-size: 72px;

margin: 0px;

}

h2{

font-size: 24px;

margin: 0px;

text-align: center;

}

h3{

font-size: 18px;

margin: 0px;

text-align: center;

}

nav{

display: block;

width: 100%;

float: left;

text-align: center;

background-color: rgba(204,204,204,0.46);

padding-top: 20px;

padding-bottom: 20px;

}

nav a:link, nav a:visited {

display: inline;

border-bottom: 3px solid #00FFCC;

padding: 10px;

text-decoration: none;

font-weight: bold;

margin: 5px;

}

nav a:hover {

color: #CC3333;

background-color: rgba(255,255,0,0.46);

}

nav h3{

margin: 15px;

}

#container{

background-color: rgba(185,74,,221,0.46);

}

section{

display: block;

width: 70%;

float: left;

}

article{

background-color: rgba(0,255,204,0.16);

display: block;

margin: 0px;

padding: 0px;

}

article header{

padding: 5px;

}

article footer{

padding: 5px;

}

article h1{

font-size: 18px;

}

aside{

display: block;

width: 15%;

float: left;

}

aside h3{

margin: 15px;

}

aside p{

margin: 15px;

font-weight: bold;

}

footer{

clear: both;

display: block;

background-color: rgba(51,0,204,0.16);

color: #CC99CC;

text-align: center;

padding: 15px;

}

footer h2{

font-size: 14px;

color: #FF66FF;

}

a {

color: #FF6633;

}

a:hover{

text-decoration: underline;

}

.x{

width:100%; height:166px;

}

#lunbo{ width:340px; height:160px;position:relative;left:0px;top:0px;}/* 定義輪播圖片所顯示的位置*/

.ul_lunbo{width:100%; height:100%; position:relative;left:0px;top:0px}/*//爲ul標籤設置所在區域有*/

.li_lunbo{width:100%; height:100%; position:absolute; left:140px;top:0px;}/*//爲li標籤設置所在區域有*/

.img_lunbo{ width:100%; height:166px;}/*//爲圖片定義大小，並且是圖片重合。*/

` video{float:left; margin: 100px 500px;}

</style>

<body>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

<h1>鑫晨之家特效總站</h1>

</header>

<nav>

</nav>

<aside>

<h3>My Style</h3>

<a style=" padding-left:40px;" href="https://user.qzone.qq.com/1476027184/main" target="_blank"/>我的QQ空間</a>

<br />

<br />

<br />

<br />

<a style=" padding-left:40px;" https://www.cnblogs.com/star147/" target="_blank"/>我的博客園</a>

<br />

<a style=" padding-left:40px;" href="http://acm.hdu.edu.cn/listproblem.php?vol=1" target="_blank"/>算法練習系統</a>

<br />

</aside>

</header>

<aside>

</aside>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</article>

</section>

<aside>

</aside>

<h2>網頁背景相冊輪播圖</h2>

</footer>

</article>

</header>

</video>

</video>

</video>

<h2>遊戲項目短視頻</h2>

</footer>

</article>

</section>

<aside>

<p>該網站爲鑫晨公司打造的獨立個人網站，網站由各種效果搭建而成，其主要功能爲更加快速的進入一些常用網站，其特色爲愛心飄落特效，背景圖片切換以及背景相冊輪播特效，其中還有自己寫過的其中三個小遊戲作品運行的錄屏短視頻。本人第一次通過獨立學習查找資料嘗試寫出一個比較完整的網頁作品，雖然美觀不足，相信自己以後會更加努力的其打造出更多更加完美的網站。希望進本網站的朋友大力支持，謝謝。</p>

</aside>

</footer>

</div>

$("#tab-btn").click(function(){

$("#img-wrap").slideToggle();

});

$(".item").click(function(){

var uri = $(this).attr("data-src");

$("body").css({

"background-image":"url("+uri+")"

});

$(document).snowfall({flakeCount : 40,maxSpeed : 3});

index=0;

function show_img(){

imgs=document.getElementById("shidian_img").children; //獲取所以圖片並且存儲到數組imgs數組裏

for(i =0; i<imgs.length;i++){

imgs[i].style.display="none";

} //循環獲取到imgs裏面的元素，並且把它們隱藏設置爲“”none“”

imgs[index].style.display ="block"; //當所有元素都隱藏了，在顯示當前index所指的圖片。

index ++;

if(index >= imgs.length){

index=0;

} //判斷index是否大於imgs的長度，等於imgs的長度後在重新賦予它初始值0

}

timer=setInterval(show_img,1000); //建立週期定時器。

</script>

</body>

</html>

致謝

課程設計成績評定表

課程設計題目
課程設計學生答辯或質疑記錄：問題1：HTML、CSS和JavaScript的作用分別是什麼？答：HTML主要做網頁中的框架，CSS主要是渲染HTML中的標籤樣式，JavaScript主要是實現網頁中的動態效果。問題2：display這個屬性是做什麼用的？答：display屬性是規定元素應該生成的框的類型，此元素默認爲inline，表示此元素被顯示爲內聯元素。問題3：愛心飄落特效大致是如何實現的？答：用兩個div容器通過CSS樣式的設置製作成一個愛心，然後運用jQuery的JavaScript模板通過調用模板中的snowfall函數，具體的一句代碼爲：$(document).snowfall({flakeCount : 40,maxSpeed : 3});其中 flakeCount 參數是設置愛心飄落的數量，maxSpeed 參數是設置愛心飄落的最大速度。
評分依據	分值	評分成績
1、學習態度認真、遵守紀律	10
2、設計分析合理性	10
3、設計方案正確性、可行性	20
4、設計結果正確性	30
5、設計報告的規範性	10
6、實踐環節的獨立性與主動性	10
7、設計驗收	10
總分	100分
最終評定等級爲：指導老師簽字：年月日

網頁設計課程設計報告

1 設計題目

2 開發環境

3 開發工具

4 完成時間

5 設計思想

5.1 網頁設計思想

5.2 設計方案

6 設計過程及設計步驟

6.1 網頁結構設計

6.2 CSS樣式設計

6.3 愛心飄落效果設計

6.4 背景切換效果設計

6.5 輪播圖效果設計

6.6 網頁整合、填充以及整頓

7 測試運行

8 評價與修訂

9設計體會

985 碩士程序員，空窗 4 個月沒有 Offer！

營銷系統黑名單優化：位圖的應用解析

一文搞懂 Spring 循環依賴

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

python內置函數——sorted

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

抖音面試：說說延遲任務的調度算法？

Oracle之視圖

Oracle之表的約束

Oracle用戶和表的操作

Oracle之索引，視圖，序列綜合

oracle之事務和truncate刪除

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結