如对项目有任何问题或需要，请加本文下方推广QQ
本文CSDN资源：https://download.csdn.net/download/weixin_47040861/89615769
1.题目要求
具体要求：
（1）网站主题明确，内容丰富、布局合理规范、界面美观友好，要求使用响应式工具，可以根据屏幕和不同的媒体查询显示不同的页面内容（至少实现网站在两种设备下的不同布局）。（10分）
（2）网站目录规划合理，目录合理规范、模块清晰。网站功能模块要求至少5个，每个模块下1~2个页面，页面总数不能少于8个。要求主页统一用index.html命名，其它页面名称自拟，但要符合见名知义的原则，所有网页及素材名称都要使用英文。（10分）
（3）页面结构设计合理规范，功能多样（如各个模块的内容列表，功能区（链接搜索文章排行等），展示区（图片、视频等）。导航清楚方便，能快速返回主页面和各栏目页面。页脚版权内容要求必须为个人信息：学校 专业 班级（教务系统中使用标准班级名称） 学号（完整学号） 姓名。（20分）
（4）在页面中能够灵活运用网格系统布局，合理地使用Flex布局进行排版，综合运用列表、表格、按钮、图片、工具类等内容进行布局。（20分，要求除了标题、段落等基本排版外，必须包含列表、表格、按钮、图片等内容）
（5）在页面中合理使用按钮组、输入框组、下拉菜单、导航栏、列表组、卡片、媒体等组件。（20分，要求用到至少10种不同的组件）
（6）在页面中合理使用模态框、选项卡、滚动监听、折叠、轮播等插件。（15分，要求用到至少6种不同的插件）
（7）在页面的合适位置合理使用Font Awesome和Buttons等第三方扩展组件。（5分，要求至少2种。）
编程软件：
2.视频演示
【web前端期末/课程设计】中国体育网站(bootstrap4/jQuery/swiper)
3.项目介绍
该项目整体使用了bootstrap布局，页面在不同宽度下显示的内容不同，具体可以参考上方演示视频，所有页面点击左上角logo可以返回主页：
1.主页
鼠标悬停于右侧标题时左侧轮播为对应图片，左侧箭头同样可以控制左右轮播：
点击两个新闻大标题跳转到对应的新闻页面：
点击上方标签下方显示对应内容，点击最后的收起下方内容消失：
2.乒乓球
点击右侧的加号/减号来展开/收起当前介绍
3.篮球
按住鼠标左键左右拖动图片可实现图片切换，这里使用了swiper：
下方视频可以播放，在项目目录下的video文件夹中之需要将其他视频名称改为"NBA_mascot.mp4"后粘贴到该文件夹下，覆盖原有视频后即可修改页面中视频的内容：
4.羽毛球
静态页面，没有交互功能
5.跳水
静态页面，没有交互功能
6.田径
鼠标悬停于右侧标题栏时下方会显示对应图片：
7.登录注册
点击上方标签切换下方内容：
8.新闻页1
新闻标题引入了fonts：
右侧同样可以通过悬停显示图片
下方按钮鼠标悬停变色，这里使用了buttons：
9.新闻页2
与新闻页1类似
↓如对项目有任何问题或需要，请加下方QQ↓
