- Div+CSS3.0网页布局案例精粹(升级版)
- 张晓景
- 304字
- 2020-08-27 19:30:38
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