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