- Div+CSS3.0网页布局案例精粹(升级版)
- 张晓景
- 304字
- 2020-08-27 19:30:38
3.7 举一反三——制作健康网站页面
根据上一节的案例制作,读者应该了解和相对掌握了使用Div+CSS布局页面的方法,通过完成本节的案例制作,可以进一步学习和掌握使用Div+CSS布局页面的方法,页面的最终效果如图3-61所示。
![](https://epubservercos.yuewen.com/47F5DE/16264452405767906/epubprivate/OEBPS/Images/txt003_111.jpg?sign=1738945634-UzKd5NGxnhiwe02iBJumt7gqBlqtJps3-0-17bd6ccc6d892b06eaa6ead873fbfd04)
图3-61 页面的最终效果
3.7.1 案例分析
本案例是设计制作保健品介绍网站页面,这类页面的布局通常比较简单,主要以介绍产品为主,制作这个案例采用了三行布局方式,即分为顶部、中部和底部三部分。其中,中部又分为左侧和右侧两部分,布局方式如图3-62所示。
![](https://epubservercos.yuewen.com/47F5DE/16264452405767906/epubprivate/OEBPS/Images/txt003_112.jpg?sign=1738945634-Bu3O9aSvA1ttFQCTYxtDbiluAYvA5TSr-0-980ef7011c40669f4e90a6a436db4f6a)
图3-62 布局方式
3.7.2 视频操作
在本案例的制作过程中,首先制作出页面的背景,然后制作出头部内容、主体内容及版底内容,页面效果如图3-63所示。
![](https://epubservercos.yuewen.com/47F5DE/16264452405767906/epubprivate/OEBPS/Images/txt003_113.jpg?sign=1738945634-prEXLhdxjJ9Ah2h0oBXwNsHO2pLpfp4B-0-cd29765686a6156027389f9fb7c70563)
图3-63 页面效果
源文件位置:源文件\第3章\3-7.html
视频位置:视频\第3章\3-7.mp4