大白书架
作者: dkvirus 发表于: 2018-06-25 15:41:00 最近更新: 2018-07-04 21:36:26

一、大白书架第一弹

1. 列表

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

列表

2. 九宫格

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

3. 书架模型

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

书架模型

4. 书院二楼

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

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

书院二楼.gif

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

大白书架第二弹

最近疯狂迷恋上 css 动画,研究了几天,给书架博客做了一次升级。

1. 首页

首页去除了背景图书馆的照片,换成单色调,更加简单。

布局上分了三部分:书架标题大白

  • 书架。默认缩小 0.8 倍,静静的排在页面左边。当鼠标悬浮时,恢复原来大小,并移动到屏幕中心位置;
  • 标题。just a name;
  • 大白。可爱的大白(●—●)会问候每一位来访的客人,如果想要快速搜索文章,看见大白肥硕的肚子没,那儿有个输入框……..

首页

2. 书本立体效果

之前看到的一个效果,一直想着迁移过来。到今天总算是完成了。书柜给了背景阴影效果,增加立体感。

3d书本

3. 文章 markdown 样式

文章 markdown 样式参考阮一峰博客和简书的 UI。修改了部分感觉看着不爽的地儿。


书架博客传送门。如果你有好的想法,欢迎下方留言,让页面动起来~

三、大白书架第三弹

书架博客试运行了两个礼拜,有些功能和优化待搞定。

1. 功能

  • 文章增加目录。

2. 优化

  • 大白层级过高,会遮住书架;
  • 文章内图片加载慢,寻求解决方法;
首页
友链
归档
dkvirus
动态
RSS