无敌博皮 之 乾坤大变色——中篇:样式说明
无敌博皮 之 乾坤大变色——中篇:样式说明
无敌博皮 之 乾坤大变色——下篇:脚本讲解
无敌博皮 之 乾坤大变色——支持:后续更新 <<<请在这里检查更新或提出问题
假期无聊,去一朋友家串门,发现在他们家24寸的显示器我的博客没办法看,一行字太长了,看完一行转回头来往往找不到该看哪行,以至于实在无法使用全屏而不得不人为的把窗口缩小来看。我一直知道这是个问题,但我以为问题不是非常大,没有亲身体验,还真是无法感受,看来余世维是对的:凡是“我以为”的,一定是错的。
还有一件一直“我以为”的事情,我以为大家已经习惯了12px那小巧精致的字体,虽然我知道应该照顾一下“某些人”,但还是想着,或者他们可以自己克服下,于是一直是12px下来的,当然,我又错了,因为我发现自己变成了“某些人”中的一员——12px的字体看着很费劲,分辨率越高,我越是需要14px甚至更大的字。
于是有了现在这个布局:960px的页宽 & 686px 的内容宽 + 14px字体。
写给别人看的东西,应该让别人专注于内容,而不是很费劲的去看盯着屏幕寻找。当一行文字很长的时候,看完一行回头得去寻找该看哪行了,很多时候当看到第二行的时候还得去回想上一行是什么,寻找新行花费了太多时间并打断了我们的思路,以至于我们无法利用大脑暂留区域或眼睛的聚焦范围来清楚的知道当前的状态。
“文形”是一件很重要的事情,文形是指大块儿文字所形成的一种形状,在我们看一段文字时,我们其实并不把焦点放到某个字或者词上,而是放在这一“片”上。当我们需要接收越来越多的信息,这一点就越发显得重要。很长的行,明显不是一种好的“文形”,尤其是当字还比较小的时候。
技术真的是要命,我的一些习惯还保留自800*600的时代,而现在大家的显示器都已经如此BT~~~~在上面的宽度中,我已经放弃了800的宽度限制,做过太长时间的700+,是时候换成900+了。分辨率也越来越高,不只是因为屏幕大了,同样也因为屏幕能够更细腻的去表达了,而这带来的结果就是12px的字,可以清楚的显示和分辨,但实在不适合大段阅读。
于是,终于下定决心把主体内容加大到了14px,因为我希望别人能够比较舒服地看完我的文章,而一些链接、扩展文字之类,依然保持12px,这些东西其实很不重要,想看的人自然会看到,不想看的人也无所谓,而且因为这类字大都很短,几个字而已,倒不成什么问题。
样式相对来说比较简单,没有使用到图片,全部以各种颜色搭配来实现。我虽不是色盲,但是对颜色其实超级不敏感,所以做得难看再所难免,只是做个样子,各位达人可自行修改 :),样式文件可以在上一篇中给出的链接中下载,也可以直接引用我给出的文件,我是不会删除、移动或重命名这些文件的(系统本身移动的我不负责(H))。本文发布的时候一共是7个样式文件,也就是支持七种不同的风格,后面或许会继续添加。
样式很简单,没有用到很多技巧,也没有使用hack什么的,甚至连个important都没有用到,我就不废话了,大家可以自己去看看,不明白的地方请在下面留言,我会尽力解答。
值得注意的是,在每个文件里,都有很多颜色是重复利用的,这只是适应了我做的这一种版式,如果你想做出自己的版式,可能不得不把其中某些声明拆散,任务量相对比较大。而不同的风格基本上就是修改了颜色,没有对样式进行过多的改动,因为考虑到当风格切换时,最好还是保持页面各元素不动,换版式和元素移动显然不是一种好的体验,比如一个文章看到一半儿,一换版式可能就找不到看到哪儿了,或者换完之后又得重新寻找刚刚点过的那些链接等等。
另外需要提起的就是CSS文件中的最后两段,前一段是作用于文章的,可以在这里添加你常用的样式定义,还算比较方便。最后一段,非常抱歉的使用了我的名字,以防止和博客园本身哪里的设定起冲突,这一部分是用来定义那个切换区域的样式的,如果你没有保留切换功能,那么就不需要这一部分了,可以直接删除掉。