3.7 舉一反三——制作健康網站頁面

根據上一節的案例制作，讀者應該了解和相對掌握了使用Div+CSS布局頁面的方法，通過完成本節的案例制作，可以進一步學習和掌握使用Div+CSS布局頁面的方法，頁面的最終效果如圖3-61所示。

圖3-61 頁面的最終效果

3.7.1 案例分析

本案例是設計制作保健品介紹網站頁面，這類頁面的布局通常比較簡單，主要以介紹產品為主，制作這個案例采用了三行布局方式，即分為頂部、中部和底部三部分。其中，中部又分為左側和右側兩部分，布局方式如圖3-62所示。

圖3-62 布局方式

3.7.2 視頻操作

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

圖3-63 頁面效果

源文件位置：源文件\第3章\3-7.html

視頻位置：視頻\第3章\3-7.mp4