原创文章,谢绝转载。

在这篇文章,我赌上一位理科男所有的审美。

接续上一篇的美化相关detail。

一、布局

上一篇一开始提到的是四行三列布局,且最大的iframe在最右边。

优化后布局感觉还是四行四列合适,且最大的iframe放在第二列,较为居中。

二、配色

关于背景配色,一开始我设计成略带黄色的白色,但是使用了一天之后感觉有点费眼睛:( 所以又改成黑色背景,但是又发现背景与字之间的对比度太大,反差太大还是有点费眼睛:( 经过我反复测试,找到一个自我感觉绝佳的背景颜色:RGB(12,30,24) 十六进制: #0C1E18 就是下图这个色(你可以右键保存下来这张图片做背景图片)

颜色示意

字当然是 RGB(255,255,255) 十六进制: #FFFFFF (纯白)

三、关于索引iframe的调整

1.关于颜色

这个一开始我没注意,后来发现深色背景配蓝色链接字雀食是看不见,而且点击过的链接颜色还不一样,参差不齐,十分难看。

所以经过我的调整,把调整后的颜色代码贴下面:

a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: underline;
    color: #CCCCCC;
}
a:active {
    text-decoration: none;
}
2.关于边距

一开始忽略了这个问题,后来发现本来就不大的iframe框你给我默认左边上边留这么大位置。。。

还有行距也很大我的天啊。

经过调整,代码贴下面:

body {
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    line-height:0px;
}
3.关于其他

这个生成的HTML档在浏览器里面直接打开是没问题的,但是在iframe框里面打开如果字太长,他不会换行,他会本行重叠。

这个也是有解决办法的,就是给iframe加一个较长的宽度。

width:600px;

四、关于后台美化

这个Typecho就是以轻量简洁闻名,但是这个后台其实可以美化一下。

这个上网百度一下可以找到许多相关美化插件,这个就不说了。

五、关于字体

我个人十分推崇楷体字,感觉楷体字看着比宋体字舒服,所以选用了一款不涉及侵权问题的免费大厂楷体——方正楷体。说实话你现在看到的就是方正楷体

方正楷体

注意是方正楷体而不是方正新楷体!新楷体不是免费的哦。

大概就是这样了。有问题在下面评论区留言哦。

下面这个链接是该文章的上篇。

如果觉得我的文章对你有用,请随意赞赏