我是老大钦点的外门弟子

【今天完成的事情】

1、任务相关的事：

在font-awesome里找到微信、QQ、微博的小图标。

在纸上画了一下应该怎么去布局，大致记录了每个地方的字体大小、颜色、字体族、宽度、高度等值。

在iconfont里找到微信、QQ、微博、往右、person的小图标并且尝试运用到页面里。

今天就写了个header。

在bs中文网里看到一个做轮播的插件，迟点试试：http://www.bootcss.com/p/unslider/

2、其他的事：

(1)刷了好一会英语单词。

(2)刷了一会网：看了一会谷歌io大会，谷歌的页面做得实在是太帅了！无论是妇女节Google搜索的上的轮播图，还是2016谷歌io大会的网页（https://events.google.com/io2016/）都帅的不行！

(3)看了一篇文章《浏览器亚像素渲染与小数位》（https://isux.tencent.com/subpixel-rendering-and-percentage-calculations.html）

(4)之前以为github.io很复杂，今天再去试了试，比想象中简单多了。不过那个jekyll现在还是觉得比较复杂。。看到安装的环境需要："Ruby"、"RubyGems"、"Linux, Unix, or Mac OS X"，而且还不建议在Windows平台上安装Jekyll，然后就没琢磨下去。

(5)之后想给我的页面来个背景图，但是又不想背景图太大，搜了一下解决方法，知乎上提到WebP这样的图片。然后看到一篇技术的介绍：https://isux.tencent.com/introduction-of-webp.html

【明天计划的事情】

继续写任务8的页面1.

【遇到的问题】

1、关于github.io。

之前设置了llllllllllar.github.io，这前面的是自定义的用户名，也创建了个github.io的库，然后就不知道怎么办了。这次再看了一下https://pages.github.com/里面的介绍，看了主页的几分钟视频，唔，虽然准确意思不是很懂，但是大概看起来好像不是很难的样子。继续看下去，哦，是叫我在本地里clone一下在网页上创建的这个库，再创建个index.html，push到账户上，就有了第一个页面。

2、关于WebP。

用了上面网址分享提到的ISparta这个转换器软件。背景图片文件小了很多。。由五百多K变成了六十K。。实在是太好了。。这个图片压缩和视频压缩技术是之前一直想学习和研究的一个玩具，不过没有行动起来。现在慢慢行动起来。

不过不知道什么原因，浏览器在边框边窄的时候显示这个背景图会有错位(无论是PNG格式还是WebP格式都是这样)。

（https://llllllllllar.github.io/）

但是在background里加一个center fixed就不会错位，神奇。

html {
  font-size: 62.5%;
  font-family: STHeitiSC Light, serif;
  background: url("index-pic/background.webp") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

不过就算进行了以上设置，初次加载的速度也还是比较慢，文字明显先于图片加载出来。。。

3、关于小图标。

开始写代码的时候想着font-awesome还算比较熟悉就试着用用看，但是后来觉得font-awesome这些小图标最后效果实现得不太好，设计图里是镂空的logo，而font-awesome里是实心的logo；而且中间的内容里有些小图标还没有，就改成了用iconfont。看了看官方文档学了一下怎么用。可以用了，不过不是很熟练，在这个任务里熟练一下。

4、关于a标签的下划线。

没有找到控制a标签的下划线与文字间距的设置，而且小图标用了链接也出现了下划线。所以把a标签的下划线全都改成none。然后通过伪类:hover、:active与border-bottom的使用来达到效果。

【收获】

1、《浏览器亚像素渲染与小数位》这篇文章，看他的结论：百分比数值只需保留3位小数即可；在兼容IE8、IE9的情况下，无法避免1像素的差距，因此百分比宽度或背景定位时，需能兼容1像素的误差范围。

2、学到用iconfont的方法（我用的是symbol引用的方法）。

引用一个script的链接：

<script src="https://at.alicdn.com/t/font_hlwota9wyps98uxr.js"></script>

然后在css里加这么一个选择器：

.icon-font {
  width: 2rem; height: 2rem;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;}

接着在html里这样：

<svg class="icon-font" aria-hidden="true">
  <use xlink:href="#icon-weixin"></use>
</svg>

就可以了。

附上文档说明链接：http://www.iconfont.cn/plus/help/detail?helptype=code&spm=a313x.7781069.1998910419.14.bm07nd