【web前端期末/课程设计】中国体育网站(bootstrap4/jQuery/swiper)

代写C语言、C++、Java、Python、HTML、JavaScript、vue、MySQL相关编程项目，
长期接单，信誉有保证，如有需要请加文章末尾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↓