pe端的布局并不理想,个人比较喜欢pc端的,做了自适应。pe端打开的话可以双指把网页缩小,这样就能看到pc端的样子。另外,考虑到字数过多会不美观,所以给文字搭配了一个展开/收起功能,默认只显示多少行,后面的就需要展开查看。如果需要调整默认显示的行数(比如想默认显示3行),可以修改card-desc中的max-height值(每行高度30px,3行就设为90px)。
展开图片布置了点击放大,pe端图片展示在文字下面,pc端图片展示在文字右边,目的就是为了时间轴内容加个截图什么的,更有观赏性。现在图片懒得截图,放置的是🌰的二次元api图片接口,随机显示图片了,可以自行更改。
展开添加了Java翻页按钮,主要是为了在浏览的更方便,不会因为时间轴内容过多而眼花缭乱。尝试过懒加载,不过懒加载在pc端效果并不理想,所以就没有用上,还是选择了使用Java翻页。每页显示多少行时间轴可以修改,现在设置的是3行。
展开感觉整个页面就单独一个时间轴+内容还是太单调了,所以参考了一下别人的博客,在页面顶部添加了一个带背景图的标题,给它设置了背景自适应页面,让它无论是pe端还是pc端都可以完美展示。同样,背景图片可以自行修改,我写有标注的,不用担心找不到在哪修改。个人建议还是采用api做背景,每次进来都是不一样的图片。
展开目前还在不断完善中,暂时不会发布,到时候修改到我满意了再分享出来吧。而且现在的代码,我将html+js+css放到了一起,所以现在完全就是一个html放了全部,有点杂乱。到时候我会把它们单独分离出来,css和js放到文件夹,这样html就能简洁一些了,方便修改内容。
展开