1 前言
我的首页（https://w.ctm49.com）之前展示的最近看/听/玩/读，但更新起来麻烦，也不够展示personalization。于是就一直想重新装修一下。想了很多种网站结构，最终以爱好标签的模式来展示。即暂分为音乐、游戏、二次元三个版块。
2 设计
然后就开始画草图了，想像ppt一样，通过滚动翻页，制作4页，分别是主页和三个版块。
看起来还是很抽象的hhh，但基本的思路就是这样了。
3 实现
五一假期于是就开始动手写代码了。首先网页body下面分为5个块，菜单、主页，和三个tag。具体实现如下
3.1 主页
首先所有子页padding-top: 4rem留给菜单。
主页采用简单的block布局，分为两个height: 50%的div。
上div中使用margin: 0 auto实现居中，然后bottom: 5rem与下方隔开。
上div中，LOGO是图片，而OnO's World是文字，通过vertical-align: middle来让它们居中对齐。下方的社交媒体链接也是同理。
下div中使用gird布局来分散三个tag。
3.2 音乐页
音乐页采用tab-menu和三个tab布局。通过听、唱、作来切换tab，每个tab可以纵向scroll（overflow-y: auto）。
听的音乐展示采用横向flex布局，添加滚动条（overflow-x: auto）。
唱作使用比较简单的gird布局。
3.3 游戏页
游戏页使用全屏的横向tab形式展示。都采用较为简单的flex布局。
3.4 二次元页
二次元页也是以flex布局为主。这个页面在1920x1080、2560x1440下都很好，但做自适应非常麻烦，后面自适应会提到。
4 动画
爆肝了大概两天，静态页面基本实现完毕，然后就是添加一些简单的动画。图片hover放大使用transform: scale和transition来实现。首页的动画效果使用animation实现。这个基本上还是比较简单的。
然后就是滚动动画，实现了很多次，最后用css的scroll-snap以及js的wheel事件和scroll事件基本完美实现了。
5 自适应
更正: 不应称为「自适应」（Adaptive）应当称为「响应式」（Responsive）。
这也是最麻烦的一步，要同时适配不同尺寸的pc和手机。css上使用类似@media (min-width: 2400px) 或 @media (max-width: 1280px)，其中min-width代表屏幕宽度>=后面的数值，而max-width代表<=。
首先是内容显示的自适应，例如主页的字社交媒体文提示（Blog、微博、b站等）和菜单tag在小屏幕下不显示。
然后是布局的自适应，屏幕小的时候，页面两边、上边的padding变小或取消，两栏布局缩小为一栏等等。
最后是大小自适应，因为尺寸单位采用rem为主，修改html的font-size即可得到不同的布局大小。
6 内容和后记
然后就是补充一些内容，目前游戏页、二次元页还差一些内容，还没想好怎么展示。游戏页现在就加了英雄联盟和炉石传说，还有很多游戏以及一些游戏作品准备放上去。二次元页也打算再加一点内容。
总之，这次网站重新装修基本符合我的设想。也名副其实曰“OnO's World”。后续再完善完善，就很好啦~
0 条评论