Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ywh555hhh/ncu-mcssartdepartment.github.io


https://github.com/ywh555hhh/ncu-mcssartdepartment.github.io

Last synced: 16 days ago
JSON representation

Awesome Lists containing this project

README 

        
# NCU-MCSSArtDepartment.github.io



## 写在最开始

作为一名CS学生，当我意识到有一个自己的项目的时候，我选择尝试写一个属于自己的静态网页  

在查阅多方资料以及询问周围高手之后，我决定不使用Hexo这种集合框架，而是尽可能自由的利用bootstpas之类的模块化内容来构建我的静态网页

而此时恰逢暑假招新，故我选择，以我在学生会中任职的文艺部为核心，以开学即将加入数计学院的新生为主要受众群体，编写一个偏展示类的静态网站  

甚至有想法让他成为文艺部的共创项目，一路传承下去，毕竟是数学与计算机学院的文艺部



## 使用工具

很多内容都是使用了bootstrap来实现的，主要针对移动端去设计，而网页端目前效果还很一般  

而背景图片图标，一部分来自canva的自己设计，一部分来自iconfont网站  

未来想使用GSAP来实现更多动画以及交互  

## 设计思想与缺陷

由于是第一次开发，开发过程中，存在许多不合理的地方，极大的影响了后续的更新

首先是命名不严谨，开始时候十分随心所欲，一是对标准没有清晰的认识，二是时间比较紧迫

其实是注释的风格没有严格的界限

再然后是没有先搭建后框架，以及对布局没有深刻的理解，尤其是面对位置方面的布局，一开始没有设计好，导致后期一直debug，在上面花费了大量的时间



#### 学习到的思想

宽度自适应： 在响应式设计中，通常会使用百分比、最大宽度或弹性布局来使页面的宽度适应不同屏幕尺寸。这样可以确保页面内容在不同设备上均能良好地呈现。



高度灵活： 页面的高度可以相对自由地延伸，以适应不同屏幕上的内容。内容的长度可能会有所不同，但不应过度强调高度的布局。



垂直滚动： 在移动设备上，用户习惯进行垂直滚动以查看更多内容。因此，不必担心页面内容的高度会超过屏幕。



关注内容重要性： 将最重要的内容放在页面顶部，这样无论在何种设备上，用户都能迅速看到重要信息。



测试不同设备： 在设计之后，务必在不同设备上测试你的网页，以确保页面在各种屏幕尺寸上都有良好的显示效果。



## 整体框架 



### 主题内容

1.简单介绍  （）

2.主要人员 （）

3.往期活动 （未实现）

4.精彩瞬间展示 ()

5.FQA   () 

6.footer  () 



### 其他模块 

1.~~侧边栏~~ 已经改成了 侧边图标

2.~~悬浮的 可以点击的 小图标~~

3.~~小logo显示~~ 



### 设计

1.配色

2.字体

3.现代化一点



## BUG

移动端 右侧图标内内容 大小异常  

国内访问速度特别的慢，jsdeliver貌似可以解决但不知道情况  

QQ超连接 还没有 弄成移动端的 暂时还没时间