【實例探析】

任務1-1 探析攜程旅行網的首頁

效果展示

攜程旅行網首頁0101.html的瀏覽效果如圖1-1所示。

攜程旅行網首頁0101.html的主體結構包括4個組成部分，分別為頂部、中部、底部和側邊欄，頂部內容為廣告圖片，中部內容為多個圖片超鏈接，底部內容包括多個導航鏈接，側邊欄為長方形按鈕。

網頁探析

1. 網頁0101.html的HTML代碼探析

攜程旅行網首頁0101.html的HTML代碼如表1-1所示。

網頁0101.html主體結構的HTML代碼如表1-2所示。該網頁主體結構包括4個組成部分，分別為頂部、中部、底部和側邊欄，其中頂部結構使用<header>標簽實現，中部結構使用<nav>標簽實現，底部結構使用<footer>標簽實現，側邊欄使用<aside>標簽實現。

2. 網頁0101.html的CSS代碼探析

網頁0101.html通用的CSS代碼如表1-3所示。

網頁0101.html主體結構的CSS代碼如表1-4所示。

網頁0101.html頂部內容的CSS代碼如表1-5所示。

網頁0101.html中部內容的CSS代碼如表1-6所示。

網頁0101.html底部內容的CSS代碼如表1-7所示。

網頁0101.html側邊欄的CSS代碼如表1-8所示。