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

1、任務(wù)任務(wù)9-1 實現(xiàn)頁面換膚網(wǎng)頁特效實現(xiàn)頁面換膚網(wǎng)頁特效任務(wù)任務(wù)9-2 根據(jù)日期特征動態(tài)切換背景根據(jù)日期特征動態(tài)切換背景 瀏覽網(wǎng)頁瀏覽網(wǎng)頁0902.html的外觀效果如圖的外觀效果如圖9-2所所示，該網(wǎng)頁會根據(jù)日期特征動態(tài)切換背景。示，該網(wǎng)頁會根據(jù)日期特征動態(tài)切換背景。圖圖9-2瀏覽網(wǎng)頁瀏覽網(wǎng)頁0902.html的外觀效果的外觀效果【知識必備】【知識必備】【引導(dǎo)訓(xùn)練】【引導(dǎo)訓(xùn)練】任務(wù)任務(wù)9-3 根據(jù)屏幕寬度自動設(shè)置根據(jù)屏幕寬度自動設(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、示。 編寫代碼實現(xiàn)根據(jù)屏幕寬度自動設(shè)編寫代碼實現(xiàn)根據(jù)屏幕寬度自動設(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中，編寫代碼實現(xiàn)以下中，編寫代碼實現(xiàn)以下功能。功能。 （1）當(dāng)滾動條向下滑動到一定的距離時，自動）當(dāng)滾動條向下滑動到一定的距離時，自動顯示如圖顯示如圖9-4所示的快捷導(dǎo)航菜單。反之，當(dāng)所示的快捷導(dǎo)航菜單。反之，當(dāng)滾動條向上滑動到小于一定的距離時自動隱滾動條向上滑動到小于一定的距離時自動隱藏該快捷導(dǎo)航菜單。藏該快捷導(dǎo)航菜單。 （2）單

3、擊）單擊“回到頂部回到頂部”超鏈接時返回頁面超鏈接時返回頁面頂部。頂部。 （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時，其初始狀態(tài)時，其初始狀態(tài)如圖如圖9-6所示，單擊所示，單擊“切換切換”超鏈接時打超鏈接時打開下拉窗口，如圖開下拉窗口，如圖9-7所示，鼠標(biāo)指針離所示，鼠標(biāo)指針離開即

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

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

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