动态效果网页HTML+CSS+JS

前年参加校内网页设计大赛的网页，当时没有跟课程系统学习过，也没有良好的代码书写习惯，导致许多id、class甚至是文件层级结构都比较混乱

现在分享出来，或许可以当个大作业用用，或许这种混乱的起名规则非常适合初学者做大作业

• 使用的Bootstrap框架，搭配AOS动画实现了整体页面的动态效果，其他小图标和鼠标指针来源忘了...
• 配色方面由于没有找到其它更合适的四方连续图（穷），主动适配了背景图的色调
• 有针对不同设备的适配内容，包括手机、平板、PC的不同效果，并对不同设备的页面布局稍有调整，主要体现在顶部导航栏
• 二级网页基本都写了大概，一般可以点的按钮都有对应效果

其实是模仿某网站制作而来的，算是完成了一个梦想吧

[SHANA]OrangEdge

在此附上工程文件，阅读性真的非常差

链接：https://pan.baidu.com/s/1PcDmGVuneq75W97tWGwhGg 
提取码：d66n

---

前不久被人问到这个东西是不是很复杂，技术细节该怎么讲

这个东西是我在磕磕绊绊写出来百度页面后，边学边做一星期完成的，在此之前我没有任何的代码书写基础。但不得不承认，最终的成品效果确实令人惊艳，但这是站立在巨人的肩膀上眺望远方罢了，如果你有需要，一些套话如下：

本网页是基于Bootstrap网页框架开发实现了整体网页内容的模块设计，充分使用了Bootstrap成熟的栅格结构，让页面可对不同平台做出更好的适配

同时引入AOS动画库，让页面变得更加灵动多样，与众不同

在用户关怀方面，我在不同平台对菜单布局做出了适配性调整，并自定义了页面内指针与网页小图标

限于素材有限，我决定基于素材图片对网页整体设计进行适配，由于使用了以蓝橙黑为主色的四方连续图作为网页背景，因此对整体配色的把握也，往这方面靠拢，让界面整体统一；网页模块吸收Vista系统设计风格，多采用毛玻璃效果，让页面观感良好，用户体验更好

限于本人水平以及时间限制，未能完成所有二级页面的设计，在此深感惭愧

---

上面那段故事还是挺离谱的，因为我发现在工程文件里包含了我的报名表......

信息是无误的，如果你有什么问题也欢迎来唠嗑