單元9設計頁面類網頁特效

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

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

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

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

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

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