招新网页搭建记录\#
随着我们的小团体的壮大, 我们需要一个像样的网站来开展介绍, 以此达到简洁高效的宣传目的
由于我也是第一次做这样的网站, 没有任何经验导致我甚至不知道一个合格的招新网站需要包含哪些元素, 只能暂时先参考一下别人设计的网站, 获取灵感, 然后再根据自身特色进行修改和创新了
网站元素\#
首先我们要认识到 React 框架下网页内容可以被一个个功能组件所划分, 因此我们可以较为独立地完成各个功能模块
- 标题封面: 我希望进入网页首先是一个占满网页的画面(如果能做成动态的话就更好), 然后中间出现 "海の城" City of Sea 的双语大标题, 并对图片设置一定的透明度来达到一种玻璃的滤镜效果, 随着页面往下划图片的模糊度变大,直至整幅图片不可见
- 景色&建筑&工业 展示: 这一块我打算使用流动的图片效果进行展示,具体效果为下面网站的样子:
- 自身优势: 这里可以使用框框的方式加上一些简单的图标, 做一个简约的设计
- 联系方式: 联系人/群 采用头像的方式显示在框框中
- 吉祥物: 鉴于群主的需求并根据个人的经验和审美, 将撕梓喵(虽然到现在我也不知道是什么...)放到网页的右下角, 并适当添加透明度
- 页脚: 添加版权和技术支持说明, 并在右下角补上bilibili(群主b站账号), qq(团体qq群), GitHub(这是我的个人账号) 的url, 如果有人看上了我的设计可以快速拷贝