课程设计 html css 前端——bootstrap响应式网页制作-星游记主题（大作业+源码）

爱琴海kkk 博客 2024-02-09 1 0

一、前言

在b站上看见了童年神作的续集（虽然是个人自制）作品：【自制星游记续】十年后，我们再飞行！！！

【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。部分BGM来自：北京来的狼，鹿泊言{其实还有举杯邀酒请孤独，老杯做了很多动画bgm，很感谢他}开头的钢琴曲来自：再见秋猫配音表：麦当——繁陌浅笛亚——名前桑咕咚——在下秋爷米龙——Variabilitysama 唐武德以及联盟士兵——老零ZERO , 视频播放量 93902、弹幕量 1023、点赞数 21409、投硬币枚数 20380、收藏人数 8282、转发人数 1365, 视频作者 K王桐木, 作者简介修高！！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，퐓퐌耗时ퟏퟏퟒퟓퟏퟒ秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。，星游记—笛亚，【独家】赘婿第1集风起【4月国创】，“这短短三小时，看懂的人却整整花了十几年”https://www.bilibili.com/video/BV1om4y147ZM剧情神还原！太赞了！

自己正好想了解一下响应式网页的制作——于是制作了一个简单的网页，用于练习

二、网页（源码）

星游记-响应式网页制作.zip - 蓝奏云文件大小：52.4 M|https://wwwf.lanzout.com/iECSB0yuujxc

目录结构

把模块引用的CSS单独放一个文件夹里，方便以后CV

素材

搜集素材还是挺累时间的（文本内容+照片）

三、功能

1、导航变色（下拉到一定距离-变色） 2、打字机特效 3、鼠标特效（点击特效（烟花）-还可以加鼠标移动特效） 4、音乐播放 (用的大佬的) 5、盒子出现动画（JS库） 6、时间轴滚动特效（Plugin） 7、响应式（※※※）网格布局（超出换行） 8、网页宠物（左下角）（Plugin） 9、返回顶部（黏性标签-联系客服） 10、canvas的应用（星空点绘制-拓展可以做樱花飞舞） 11、加载动画（简单：gif --进阶- 用svg画一个，然后加CSS动画） 12、轮播图 (用的大佬的) 13、图片-遮罩

14、响应式导航

TODO 1、图表 2、时钟 3、登录-注册页 4、表格

借用大佬的素材： https://space.bilibili.com/266664645 时间轴、轮播图

还用了好几位大佬的素材，但是链接找不到了，呜呜呜

四、首页代码

星游记模仿网页

name='viewport' />