單元9設(shè)計(jì)頁面類網(wǎng)頁特效

1、任務(wù)任務(wù)9-1 實(shí)現(xiàn)頁面換膚網(wǎng)頁特效實(shí)現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)任務(wù)9-2 根據(jù)日期特征動(dòng)態(tài)切換背景根據(jù)日期特征動(dòng)態(tài)切換背景 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0902.html的外觀效果如圖的外觀效果如圖9-2所所示，該網(wǎng)頁會(huì)根據(jù)日期特征動(dòng)態(tài)切換背景。示，該網(wǎng)頁會(huì)根據(jù)日期特征動(dòng)態(tài)切換背景。圖圖9-2瀏覽網(wǎng)頁瀏覽網(wǎng)頁0902.html的外觀效果的外觀效果【知識必備】【知識必備】【引導(dǎo)訓(xùn)練】【引導(dǎo)訓(xùn)練】任務(wù)任務(wù)9-3 根據(jù)屏幕寬度自動(dòng)設(shè)置根據(jù)屏幕寬度自動(dòng)設(shè)置網(wǎng)頁背景和導(dǎo)航欄網(wǎng)頁背景和導(dǎo)航欄【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁網(wǎng)頁0903.html中導(dǎo)航欄的部分內(nèi)容中導(dǎo)航欄的部分內(nèi)容和網(wǎng)頁背景如圖和網(wǎng)頁背景如圖9-3所示。所

2、示。 編寫代碼實(shí)現(xiàn)根據(jù)屏幕寬度自動(dòng)設(shè)編寫代碼實(shí)現(xiàn)根據(jù)屏幕寬度自動(dòng)設(shè)置網(wǎng)頁背景和導(dǎo)航欄的功能。置網(wǎng)頁背景和導(dǎo)航欄的功能。圖圖9-3網(wǎng)頁網(wǎng)頁0903.html中導(dǎo)航欄的部分中導(dǎo)航欄的部分內(nèi)容和網(wǎng)頁背景內(nèi)容和網(wǎng)頁背景【任務(wù)描述】【任務(wù)描述】 在網(wǎng)頁在網(wǎng)頁0902.html中，編寫代碼實(shí)現(xiàn)以下中，編寫代碼實(shí)現(xiàn)以下功能。功能。 （1）當(dāng)滾動(dòng)條向下滑動(dòng)到一定的距離時(shí)，自動(dòng)）當(dāng)滾動(dòng)條向下滑動(dòng)到一定的距離時(shí)，自動(dòng)顯示如圖顯示如圖9-4所示的快捷導(dǎo)航菜單。反之，當(dāng)所示的快捷導(dǎo)航菜單。反之，當(dāng)滾動(dòng)條向上滑動(dòng)到小于一定的距離時(shí)自動(dòng)隱滾動(dòng)條向上滑動(dòng)到小于一定的距離時(shí)自動(dòng)隱藏該快捷導(dǎo)航菜單。藏該快捷導(dǎo)航菜單。 （2）單

3、擊）單擊“回到頂部回到頂部”超鏈接時(shí)返回頁面超鏈接時(shí)返回頁面頂部。頂部。 （3）在該快捷導(dǎo)航菜單中單擊超鏈接）在該快捷導(dǎo)航菜單中單擊超鏈接“分分類導(dǎo)航類導(dǎo)航”可折疊其下方的相關(guān)內(nèi)容，如圖可折疊其下方的相關(guān)內(nèi)容，如圖9-5所示。所示。圖圖9-4網(wǎng)頁網(wǎng)頁0902.html中的快捷導(dǎo)航菜單中的快捷導(dǎo)航菜單圖圖9-5網(wǎng)頁網(wǎng)頁0902.html中折疊分類導(dǎo)航內(nèi)容中折疊分類導(dǎo)航內(nèi)容【任務(wù)描述】【任務(wù)描述】 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0905.html時(shí)，其初始狀態(tài)時(shí)，其初始狀態(tài)如圖如圖9-6所示，單擊所示，單擊“切換切換”超鏈接時(shí)打超鏈接時(shí)打開下拉窗口，如圖開下拉窗口，如圖9-7所示，鼠標(biāo)指針離所示，鼠標(biāo)指針離開即

4、可自動(dòng)隱藏該下拉窗口。開即可自動(dòng)隱藏該下拉窗口。圖圖9-6瀏覽網(wǎng)頁瀏覽網(wǎng)頁0905.html的初始狀態(tài)的初始狀態(tài)圖圖9-7在網(wǎng)頁在網(wǎng)頁0905.html中單擊中單擊“切換切換”超鏈接時(shí)打開下拉窗口超鏈接時(shí)打開下拉窗口【任務(wù)描述】【任務(wù)描述】 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0906.html時(shí)，當(dāng)向下滾動(dòng)滾動(dòng)時(shí)，當(dāng)向下滾動(dòng)滾動(dòng)條到一定距離時(shí)，自動(dòng)顯示條到一定距離時(shí)，自動(dòng)顯示“返回頂部返回頂部”導(dǎo)導(dǎo)航欄，如圖航欄，如圖9-8所示。所示。 單擊該導(dǎo)航欄則自動(dòng)返回頂部。單擊該導(dǎo)航欄則自動(dòng)返回頂部。 當(dāng)向上滾動(dòng)滾動(dòng)條小于一定距離時(shí)，自當(dāng)向上滾動(dòng)滾動(dòng)條小于一定距離時(shí)，自動(dòng)隱藏該導(dǎo)航欄。動(dòng)隱藏該導(dǎo)航欄。圖圖9-8網(wǎng)頁網(wǎng)頁

5、0906.html中的中的“返回頂部返回頂部”導(dǎo)航欄導(dǎo)航欄【同步訓(xùn)練】【同步訓(xùn)練】任務(wù)任務(wù)9-7 選購商品時(shí)打開購物車頁面選購商品時(shí)打開購物車頁面【任務(wù)描述】【任務(wù)描述】 在購物網(wǎng)站中選購商品后，單擊超鏈接在購物網(wǎng)站中選購商品后，單擊超鏈接 “加入購物車加入購物車”即可打開購物車頁面，并將所即可打開購物車頁面，并將所 選商品的信息添加到購物車頁面。選商品的信息添加到購物車頁面?！救蝿?wù)描述】【任務(wù)描述】 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0908.html時(shí)，其初始狀態(tài)時(shí)，其初始狀態(tài)如圖如圖9-9所示。所示。 初始狀態(tài)的圖片是隨機(jī)選擇的，當(dāng)初始狀態(tài)的圖片是隨機(jī)選擇的，當(dāng)鼠標(biāo)指針指向數(shù)字按鈕時(shí)，動(dòng)態(tài)切換頁鼠標(biāo)指針指

6、向數(shù)字按鈕時(shí)，動(dòng)態(tài)切換頁面背景，如圖面背景，如圖9-10所示。所示。圖圖9-9瀏覽網(wǎng)頁瀏覽網(wǎng)頁0908.html時(shí)的初始狀態(tài)時(shí)的初始狀態(tài)圖圖9-10動(dòng)態(tài)切換網(wǎng)頁動(dòng)態(tài)切換網(wǎng)頁0908.html的頁面背景的頁面背景【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁網(wǎng)頁0909.html對應(yīng)對應(yīng)HTML代碼如下所代碼如下所示，即在該網(wǎng)頁的示，即在該網(wǎng)頁的“fullCell”區(qū)域中以浮區(qū)域中以浮動(dòng)框架的方式顯示子網(wǎng)頁動(dòng)框架的方式顯示子網(wǎng)頁0909sub.html中的中的內(nèi)容。內(nèi)容。 要求浮動(dòng)框架的高度自適應(yīng)頁面內(nèi)要求浮動(dòng)框架的高度自適應(yīng)頁面內(nèi)容的高度。容的高度?！救蝿?wù)描述】【任務(wù)描述】 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0910.html時(shí)，當(dāng)向下滾動(dòng)滾動(dòng)時(shí)，當(dāng)向下滾動(dòng)滾動(dòng)條到一定距離時(shí)，自動(dòng)顯示條到一定距離時(shí)，自動(dòng)顯示“返回頂部返回頂部”導(dǎo)導(dǎo)航欄，如圖航欄，如圖9-11所示。所示。 單擊該導(dǎo)航欄則自動(dòng)返回頂部。單擊該導(dǎo)航欄則自動(dòng)返回頂部。 當(dāng)向上滾動(dòng)滾動(dòng)條小于一定距離時(shí)，自當(dāng)向上滾動(dòng)滾動(dòng)條小于一定距離時(shí)，自動(dòng)隱藏該導(dǎo)航欄。動(dòng)隱藏該導(dǎo)航欄。圖圖9-11網(wǎng)頁網(wǎng)頁0910.html中的中的“返回頂部返回頂部”導(dǎo)航欄導(dǎo)航欄【任務(wù)描述】【任務(wù)描述】 網(wǎng)頁網(wǎng)頁0911.html中的促銷預(yù)報(bào)月歷如圖中的促銷預(yù)報(bào)月歷如圖9-12所示，當(dāng)鼠標(biāo)指針指向特別標(biāo)記處時(shí)所示，當(dāng)鼠標(biāo)指針指向特別標(biāo)記處時(shí)自動(dòng)顯示促銷信息，如圖自動(dòng)顯示促銷信