武汉软件工程职业学院
《Web前端框架应用》
课程设计报告
2019-2020学年度第一学期
题    目：    特效设计学习网站
*    **        **
班    级：     软件1809
日期：2019 年 12 月 28 日
一、网站策划
本部分主要对网站各页面的布局进行规划，并进行简单的文字说明。
Index.html设计图
Cocos 产品子页面01.html
Host post.html-子页面02设计图
Shopping-子页面03设计图
html网页设计报告总结
二、效果图
本部分主要是对各页面进行截图，并对每页所用技术进行说明，必要时，可以添加简单的代码说明。
Index.html效果图
1.首页基于bootstrap响应式开发，登录(表单)与注册(表单)按钮运用了模态框。
2.Banne图运用了轮播并用JS代码设置轮播间隔时间为2s。
3.导航栏采用带有下拉菜单的响应式导航，搜索框运用了字体图标。
4.内容部分左侧采用轮播，右侧采用标签页插件。
5.在线课程部分也采用了栅格系统(大屏是4列，小屏2列，超小屏1列)缩略图、标签页插件。
6.社区版块采用了徽章、折叠插件。
7.点击导航栏热榜跳转至host post-子页面02.html，点击导航栏Cocos2D跳转至Cocos产品01.html子页面，点击在线课程里的推荐课程第一个（学点模型干动画）跳转至shopping子页面，各页面点击首页均可来回跳转。
Cocos 产品子页面01.html效果图
1.本子页面导航栏采用了响应式导航栏。
2.中间采用了面板布局组件。
3.主体内容部分采用了附加导航、滚动监听插件。
4.Footer部分采用了分页布局组件。
Host post.html-子页面02效果图
1.本子页面采用了左侧导航采用了提示工具插件，注册，登录按钮采用模态框，内容运用了表单。
2.主体部分右侧采用了多媒体对象布局组件。
Shopping-子页面03效果图
1.本子页面所采用技术前面几个页面也涵盖
2.点击LOGO可跳转至首页。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。