bootstrapWEB前端框架課程設(shè)計報告模板

1、武漢軟件工程職業(yè)學(xué)院Web前端框架應(yīng)用課程設(shè)計報告2019-2020學(xué)年度第一學(xué)期題目：特效設(shè)計學(xué)習(xí)網(wǎng)站姓名：至查班級：軟件1809日期：2019年12月28日網(wǎng)站策劃本部分主要對網(wǎng)站各頁面的布局進(jìn)行規(guī)劃，并進(jìn)行簡單的文字說明Index.html設(shè)計圖Cocos產(chǎn)品子頁面01.htmlHostpost.html-子頁面02設(shè)計圖footerShopping-子頁面03設(shè)計圖二、效果圖本部分主要是對各頁面進(jìn)行截圖，并對每頁所用技術(shù)進(jìn)行說明，必要時，可以添加簡單的代碼說明。Index.html效果圖L。匕“RlfeHA融幅快蛔相的打吊*Jiri電v-fi；itn-TQVFMQtEi3»-

2、!.-«£WVn*utfS-*tfKITT;t-flF-LH：4m#!"1見產(chǎn)J>«EaX1 .首頁基于bootstrap響應(yīng)式開發(fā)，登錄（表單）與注冊（表單）按鈕運用了模態(tài)框。2 .Banne圖運用了輪播并用JS代碼設(shè)置輪播間隔時間為2s。3 .導(dǎo)航欄采用帶有下拉菜單的響應(yīng)式導(dǎo)航，搜索框運用了字體圖標(biāo)。4 .內(nèi)容部分左側(cè)采用輪播，右側(cè)采用標(biāo)簽頁插件。5 .在線課程部分也采用了柵格系統(tǒng)（大屏是4歹I，小屏2歹I，超小屏1歹I）縮略圖、標(biāo)簽頁插件。6 .社區(qū)版塊采用了徽章、折疊插件。7 .點擊導(dǎo)航欄熱榜跳轉(zhuǎn)至hostpost-子頁面02.html,點

3、擊導(dǎo)航欄Cocos2D跳轉(zhuǎn)至Cocos產(chǎn)品01.html子頁面，點擊在線課程里的推薦課程第一個（學(xué)點模型干動畫）跳轉(zhuǎn)至shopping子頁面，各頁面點擊首頁均可來回跳轉(zhuǎn)Cocos產(chǎn)品子頁面01.html效果圖EnVEEEEDEEWExnvicr1 .本子頁面與航欄米用了響應(yīng)式與航欄2 .中間采用了面板布局組件。3 .主體內(nèi)容部分采用了附加與航、滾動監(jiān)聽插件。4.Footer部分采用了分頁布局組件。Hostpost.html-子頁面02效果圖1 .本子頁面采用了左側(cè)導(dǎo)航采用了提示工具插件，注冊，登錄按鈕采用模態(tài)框，內(nèi)容運用了表單。2 .主體部分右側(cè)采用了多媒體對象布局組件。Shopping-子頁面03效果圖"才交EM孚股產(chǎn)一Mi我1 .本子頁面所采用技術(shù)前面幾個頁面也涵蓋2 .點擊LOGO可跳轉(zhuǎn)至首頁。三、設(shè)計小結(jié)本部分主要是總結(jié)一下課程設(shè)計中碰到的問題和有什么收獲，也可以寫一下對該課程的建議。1 .問題：開發(fā)過程中對于如何調(diào)整個div的位置、導(dǎo)航欄如何均分、輪播如何修改間隔時間、圖片自適應(yīng)大小、以及div總是突出等問題。2 .解決措施：通過詢問老師、同學(xué)以及不斷參考菜鳥教程、百度等途徑獲得解決辦法