# CNBLOG 个性化笔记（2）

上一篇博客主要解析了博客元素的结构，还做了一个可爱的猫猫形象开心一下。从这篇博客开始，将依次实现对博客元素的重新布局设计。这里吐槽一下cnblog对上传的文件居然有格式限制，我本来还想着拿先进的bootstrap做一个响应式布局的，但是他要用到css.map的索引文件，计划只能泡汤了~

这篇博客的任务是设计整体布局有个人样，并实现页头。

整体布局规划

为了更好观察效果，我给home的子元素添加了半透明属性：

filter:alpha(opacity=80);       /* IE */
-moz-opacity:0.8;              /* Moz + FF */
opacity: 0.8;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

一个正常的博客布局，可以是上面一层页头，下面左侧是博文区域，右侧是侧边栏，最后最下面是页尾，左右两边都要留一点空白。所以页头和页尾和内容区设成宽度1200px，博文区和侧边栏合起来比1200px小一点点，并用margin:0 auto居中。
为了更好观察，决定给各部分上个背景色。页头颜色是(195,232,141)，博文区是(81,154,186),侧边栏区是(225,205,64),页尾是(37,37,37)。并给他们加个黑色边框border:1px solid black，博文区和侧边栏之间的空隙就是为了防止多出一点东西导致不能排成一行的。
由于博文区和边栏区要并排显示，则使用浮动属性，一左一右。两者的高度也有差别，检查出此时稍长的侧边栏长度为721px。则设置内容区的最小长度为752px，博文区和侧栏区高度为99%（设置内部尺寸时留点空隙是好习惯）。
最后再给头、内容、尾整个2px的缝隙（正好被两个边框遮住），再整个overflow:hidden隐藏溢出部分，基本布局就完成了。

基本布局

页头设计

页头除了不需要多大改的标题之外也就是导航栏了，所以首先实现它。

列表区和计数区

导航栏设定为高度60px，宽度1200px，包括了导航列表和博文内容计数，他们应该是并排而且和下面的博文/侧栏区等宽，并且同理设定width和float属性。
中途遇到了一点问题。导航列表直接是一个ul标签，外面最好要有一个div容器然而没有，这样的话设置它的宽度经常会遇到魔性的误差。先调整margin让它对齐左上，再不断调试后发现这个误差接近40px，则设列表区和计数区分别为900px和300px。
列表区包括了六个跳转的超链接标签，使用display:inline-block;float:lefgt;让他们排成一行而且左对齐，宽度设为比900/6=150px。为了不让边框影响长款判断，可以设置box-sizing属性为border-box，这样的话设置长款是包括边框在内的，也就是实现了内边框效果
为了让字体漂浮在容器正中央，用的是控制line-height和font-size两个属性达到近似效果（哎，如果是我做的话我就直接每个标签都有一个div容器然后直接position定位了，哪有那么多麻烦事）。
计数区的字数垂直居中。也是使用的类似效果。

标题

一开始的标题字比较小，而且贴在了div的边上。为了能让他有个人样，至少要调一下大小，并移动一下位置还有……

字体问题

为什么字体要单独拿出来讲？因为弄个字体太南了。一般来说，为了能在网页上显现出好看的、基本上本地电脑没有的好看字体，可以用@font-face的方法在css里指定一个字体的下载来源。浏览器渲染网页的时候就会根据这一属性的信息下载字体然后显示。

/*指定字体来源*/
@font-face {
  font-family: '徐静蕾手写体';
  src: url('http://www.webhek.com/徐静蕾手写体.eot'); /* IE9 Compat Modes */
  src: url('http://www.webhek.com/徐静蕾手写体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.webhek.com/徐静蕾手写体.woff') format('woff'), /* 所有现代浏览器 */
       url('http://www.webhek.com/徐静蕾手写体.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.webhek.com/徐静蕾手写体.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*使用自定义字体*/
body {
	font-family: '徐静蕾手写体';
}

这本该是一个很不错的解决方法，国外也普遍适用，咋们为何不用呢？但问题就在中英文差异上：英文字体只需要设置26个字母，包容量小，相对容易制作，因此开源的也多；中文字体包含好几千个常用汉字，制作不便，一般都是由企业开发拿来商用，真的蛋疼。

在此参阅的资料来自(https://www.webhek.com/post/web-font-chinese.html),感谢前辈的帮助。使用的方法是精简字体文件并生成base64编码直接使用。（cnblog支持上传字体文件就没那么多破事了……）

首先去找一个好看的字体。由于受到国外大量的无衬线字体影响，国内也开始普遍适用这种没有突起造型简约的字体来。这样的字体看起来够清爽够大方，让网页更有设计感。这里我找的是造字工房的云川体：

造字工房hxd，从大一在宣传部做苦力时就在用了，个人非商用能免费使(bai)用(piao)各种好看的字体。直接输入下载码makefont得到字体的ttf文件。我滴龟龟，直接5MB……

原博客的建议是使用fontforge精简字库，但是fontforge是更适合自定义生成字库的，精简起来操作不是很方便。于是在网上一顿乱找后，找到了西山居的前辈们做的fontpruner软件，这是专门的字体精简软件，需要的python和java环境恰好我都有。

打开frontpruner.py，修改

  for path in inputPath:
    print"path = " +path
    fullPara +=path+" "

中print的部分给他加上括号（windows要加，linux不需要）。再把字体文件放进根目录，在src\FontExtract\ChineseOutPut.txt中输入你要的字，回到更目录打开cmd输入：

python FontPruner.py --inputPath=./ --inputFont=./字体名.TTF --tempPath=./

完成后可得到一个output文件夹，里面就有精简的字体文件。

再打开一个在线的base64转码网站上传得到Data—URL，再设置font-face属性（里面的src直接用刚刚得到的一大串编码结果），就成功了————

才怪……折腾了一天什么效果都没有。已经提问了博客客服了，过几天知晓什么问题再继续改字体吧……现在微软雅黑凑合着用呗……

初步成果

最后给页头整一个背景，设置如下：

/*设置图片不随鼠标移动、自动适应屏幕大小、不重复*/
#header{
 background-image:url(https://images.cnblogs.com/cnblogs_com/joufulmika/1688590/o_200403064227bg1.jpg);
  background-attachment: fixed;
  background-size:100%;
  background-repeat:no-repeat;
}

再把导航栏整了个白色背景，加上继承自home的半透明，得到的效果如下：
页头效果

有那么点味道了哦！

其实如果可以的话，还能给背景图片加一个空白的div蒙板，蒙版采用过渡效果，从坐左下到右上，黑色渐变到白色，再调整透明度，和背景图片配合起来就是一个渐变的图片，可以突出弥补一下页头空荡荡的右上角，可惜了~

今天就先做到这里，字体那里做了半天最后失败我是没有想到的。待到布局基本都搞定之后，或许还能给页头做一酷炫的小时动画效果吧！