页脚和悬浮框模块分析与设计.pptx

《物联网Web前端开发基础》课程 页脚和悬浮框模块分析与设计 【任务3-11】制作页脚模块和悬浮框模块效果分析——结构分析“页脚”模块和“悬浮框”模块的页面结构相对较为简单，均由外层的div标签整体控制。“悬浮框”模块内部需嵌套img标签来定义二维码图片。 【任务3-11】制作页脚模块和悬浮框模块效果分析——样式分析“页脚”模块背景的锯齿样式需通过背景图像来实现，因此需要为页脚模块添加背景图像。“悬浮框”模块需设置为固定定位，使其始终显示在页面的右下角。 【任务3-11】制作页脚模块和悬浮框模块模块制作——搭建结构!--footer begin--div id=footer青春树教育版权所有2020-2030京ICP备8888888号nbsp;nbsp;京公网安备00000000000000/div!--footer end--!--tree begin--div class=treeimg src=images/erweima.png//div!--tree end-- 【任务3-11】制作页脚模块和悬浮框模块模块制作——控制样式#footer{ width:100%; height:80px; background:url(../images/footer_bg.jpg) repeat-x; color:#fff; text-align:center; line-height:80px;} 【任务3-11】制作页脚模块和悬浮框模块模块制作——控制样式.tree{ position:fixed; right:5%; bottom:5%;} 【任务3-11】制作页脚模块和悬浮框模块模块制作——最终效果 项目总结1. 盒子模型是CSS网页布局的基础，建议读者认真体会运用盒子模型进行网页布局的技巧。好的布局可以提高网页的兼容性。2. 块元素与行内元素也是本项目的重点。通过本项目的学习，读者要思考是不是能够根据页面需求，灵活的实现块元素与行内元素之间的转换。3. 浮动和定位是网页布局中常用的技巧。建议读者勤加练习，理解浮动和定位的原理。此外提醒读者孰能生巧，多多练习才能提高代码编写效率。 谢谢