bootstrapWEB前端框架课程设计报告模板.docVIP

武汉软件工程职业学院 《Web前端框架应用》 课程设计报告 2019-2020学年度第一学期 题 目： 特效设计学习网站 姓 名： 李告 班 级： 软件1809 日期：2019 年 12 月 28 日 网站策划 本部分主要对网站各页面的布局进行规划，并进行简单的文字说明。 Index.html设计图 Cocos 产品子页面01.html Host post.html-子页面02设计图 Shopping-子页面03设计图 效果图 本部分主要是对各页面进行截图，并对每页所用技术进行说明，必要时，可以添加简单的代码说明。 Index.html效果图 首页基于bootstrap响应式开发，登录(表单)与注册(表单)按钮运用了模态框。 Banne图运用了轮播并用JS代码设置轮播间隔时间为2s。 导航栏采用带有下拉菜单的响应式导航，搜索框运用了字体图标。 内容部分左侧采用轮播，右侧采用标签页插件。 在线课程部分也采用了栅格系统(大屏是4列，小屏2列，超小屏1列)缩略图、标签页插件。 社区版块采用了徽章、折叠插件。 点击导航栏热榜跳转至host post-子页面02.html，点击导航栏Cocos2D跳转至Cocos产品01.html子页面，点击在线课程里的推荐课程第一个（学点模型干动画）跳转至shopping子页面，各页面点击首页均可来回跳转。 Cocos 产品子页面01.html效果图 本子页面导航栏采用了响应式导航栏。 中间采用了面板布局组件。 主体内容部分采用了附加导航、滚动监听插件。 Footer部分采用了分页布局组件。 Host post.html-子页面02效果图 本子页面采用了左侧导航采用了提示工具插件，注册，登录按钮采用模态框，内容运用了表单。 主体部分右侧采用了多媒体对象布局组件。 Shopping-子页面03效果图 本子页面所采用技术前面几个页面也涵盖 2.点击LOGO可跳转至首页。 设计小结 本部分主要是总结一下课程设计中碰到的问题和有什么收获，也可以写一下对该课程的建议。 问题：开发过程中对于如何调整个div的位置、导航栏如何均分、轮播如何修改间隔时间、图片自适应大小、以及div总是突出等问题。 解决措施：通过询问老师、同学以及不断参考菜鸟教程、百度等途径获得解决办法。 作品解释：本次课程设计参考CG网站、Cocos2D网站的结构.开发框架为本学期所学的bootstrap框架。