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