好玩的书架博客第一弹,让页面动次打次~~
发布于 6 年前 作者 dkvirus 2773 次浏览 来自 分享

1. 列表

在网页上,内容排版大多做成列表的形式。尤其是众多的博客系统,不管是 Hexo 还是 Wordpress 搭建的个人博客都是这样,这导致一个页面展示的内容及其有限。

列表

2. 九宫格

手机上为了一个页面展示更多的内容,采用九宫格的方式。

3. 书架模型

周五的时候突发奇想,想到了书架模型,不同的书柜存储不同分类的文章,这样一个页面即可展示分类+文章。传统列表形式需要点击分类才会显示对应的文章,一比较 Lower 爆了。

书架模型

4. 书院二楼

有想法就试了一下,花了两天周末时间总算搞出个雏形。点击 书院二楼 (移动端会有适配问题,可以在网页端查看)看效果。书院二楼是我新站点的名字。

可以看到,一个个 书柜 就是传统列表里的 分类。博客只有两个页面:书架 页面,点击进入具体的 文章 页面,及其简洁。

书院二楼.gif

看完上面觉得还很 Lower 逼的同学请点这里:h5+css3实现 3d 书本展示效果。最完美的网页书架博客系统应该是包含这部分动画的,无奈本人 css 技术实在烂的不行,书本动画暂时搁浅了。

回到顶部