2.9 舉一反三——制作產品介紹網站頁面

根據上一節的案例制作，讀者應該了解和相對掌握了為頁面添加CSS樣式的方法，那么就趁熱打鐵，來完成本節的案例制作，進一步地學習掌握CSS樣式的使用方法，頁面的最終效果如圖2-59所示。

圖2-59 頁面的最終效果

2.9.1 案例分析

本案例是設計制作一個茶品介紹網站頁面，這類頁面通常布局比較簡單，主要以介紹產品為主，制作這個案例采用了時下最流行的三行布局方式，即分為頂部、中部和底部三部分。其中，中部又分為左側、中間和右側三部分。制作時，要留意不同部分的層級關系，如圖2-60所示。

圖2-60 不同部分的層級關系

2.9.2 視頻操作

在制作過程中，首先制作出頁面的背景，然后制作出頭部內容、主體內容及版底內容，頁面效果如圖2-61所示。

圖2-61 頁面效果

源文件位置：源文件\第2章\2-9.html

視頻位置：視頻\第2章\2-9.mp4