【今天完成的事情】

1、任务相关的事：

(1)加入登录/注册字样,把QQ微博微信的几个小图标在屏幕低于768px时候去掉;

(2)没有找到在不同浏览器不同设备下相差的间距不同的原因，按师兄说的，先以谷歌浏览器为准吧。

(3)页面3那些合作的企业链接进行了修改。

提交了任务9审核

2、其他的事：

(1)把之前做了这一系列任务放到了自己的github.io；

(2)自己又试着翻译了一篇文档：github的官方帮助文件：What is my disk quota?<https://help.github.com/articles/what-is-my-disk-quota/>

（而这个链接<https://github.com/llllllllllar/translation/issues/4>是我试着把上文翻译出来的结果）

【明天计划的事情】

1、做任务10，如果任务9审核有问题就改。

2、查找并解决一下问题3过程中的各种不理解。

3、查找并解决一下这个问题：如果我的在阿里云备案的域名以及云虚拟主机过期了，那在工信部备案了的网站咋处理，要取消备案吗？

【遇到的问题】

1、关于github.io。

之前因为觉得那个“你敢点吗”很好玩，所以就用hexo搭载自己的github博客。

（详情请看我3月11号http://www.jnshu.com/daily/17340?uid=8380

和3月8号http://www.jnshu.com/daily/17077?uid=8380的日报）

我家最近晚上好像网络不好，filezilla不管是连学员服务器还是连我阿里云的云虚拟主机都连得很不顺畅。所以这次我多了一个新的小需求：就是把任务放到github.io上。

看了两眼别人写的完整攻略，没看进脑子里。后来想了一下，虽然hexo的工作原理我不是很懂，但是他总归也是html文件。而且我搭载的时候是按照攻略，分了两个分支。所以就看一下他的文件结构。

发现master分支下是hexo分支下public文件夹里的内容，这个文件夹里有个index.html。想着是不是可以改这个文件来达成我的目标呢？有点像，改了一下试试，然后部署，不对，不是这个文件。因为改了没反应，而且这个文件用浏览器打开来看是没有任何样式的。

然后我就想起来当时玩“你敢点吗”，加入那段代码的时候，打开的是另外一个文件。按照他的方法，路径是Hexo/themes/light（这个是你的主题文件夹的文件名，我的主题是yillia）/layout/_partial/left-col.ejs。好，我就用sublime text像当时添加“你敢点吗”的时候来改这个文件。就是在<ul></ul>这对标签里加这段代码：<li><a href="/ptteng/">IT修真院任务</a></li>，然后按照常规流程部署，就可以了。（所以上面改了没反应是主题的原因）

有些小细节：我的方法是有两个分支的。我也不知道一个分支是怎么弄。而我这两个分支的方式，上面的方法中引入了<a>标签，它的href属性的链接"/ptteng/"这是一个文件夹，里面包含了所有在修真院做任务的页面和资源。要把这个叫做ptteng的文件夹放到hexo分支的pubilc文件夹下面。而且还要设置一个index.html的文件。这个index页面里包含有可以链接到每个任务的链接。

唔，这个小需求很快就达成了。

据说github.io的免费空间是300M，hexo就占了一百多兆了，还有一百多M，希望我不要这么快用完啊！

既然这是"据说"，所以就想去证实，看到知乎上有人说github不限制，

有的回答是：“没有限制.推荐1G以内.达到1G以后会受到GITHUB的通知邮件.上传超过50M的单个文件会warning.无法上传超过100M的单个文件.目前大文件会提供一个1G的免费GIT-LFS空间.”

还有的回答附了官方的帮助文档，<What is my disk quota?><https://help.github.com/articles/what-is-my-disk-quota/>（如【今天完成的事】所说，我简单地翻译出来了）

再继续搜，然后又看到<使用GitHub托管服务，免费300MB空间>。

还是不大懂，我只能把他理解为github不限制，可能github.io限制吧。

最后还看到一个神奇的东东。https://gist.github.com/

2、关于加入登录/注册字样以及隐藏小图标。

首先想到的是用display:none并且配合媒体查询@media screen and (max-width:768px){}来解决。一开始解决得还算比较顺利。

只不过在调整宽度的时候觉着这个小图标离那个登录/注册字样有点远。就想要不试试让他们在一个col-sm里，然后再在col-sm里放两个不同的<ul>标签，第一个<ul>标签里放小图标，第二个放登录/注册字样。在768px以下就让第一个<ul>标签display:none。然而不行。没反应╮(╯_╰)╭

看了一下官网看看怎么解决的。没看懂。

然后想了一下就调整每个不同的col-lg col-md col-sm。调整了之后觉得解决得一般般。算了算了，先不纠结。

3、关于页面3每个合作企业前面那些小圆点

这里还是花了一些时间去想他实现的逻辑。

(1)首先想的是，我能不能用border-radius自己画个圆来实现呢，试了一下，还是否决了。因为我想起来之前尝试在这里用iconfont，但最后发现设计图这个圆点跟iconfont长得不太一样。设计图里的圆点的边框和内部填充是两个不同的颜色，而iconfont实心圆并没有边框另外一个颜色只说（当然也可能我没找到，或者其实也可以用AI去改，那暂时先不往这方面思考吧）。所以border-radius也是同理，不行。（包括我也想了一下要不用无序列表的list-style-type，空心实心原点，猜测可能不行，且有点偷懒不想又手动大量去改html结构，所以也否决了无序列表）

(2)然后我就想能不能用background:(url) no-repeat;然后通过:hover来显示不同的背景图片呢。试验了一下不太好操控，否决。

(3)接着我想:hover伪类还是要用的。background我不用不同的背景图片，我用不同的背景颜色可以吗？意思就是说，还是用<img>标签引用设计图里那个空心圆，然后通过:hover来让这个img标签的背景颜色变成实心圆中间的颜色。

理论上应该是可行的。但是我还是试了好一会才实现。为什么呢？因为我其实并不是很理解几个选择器放在一起是个什么意思，什么实现顺序，什么逻辑。这话是什么意思？

就是这次做任务9的时候翻了一下任务日报，参考了一下龚浩师兄日报（http://www.jnshu.com/daily/13705?tid=41）中提供的成果展示（谢谢师兄！）。看到师兄有的地方实现一个样式的时候，是在父元素上设置一个自定义选择器，然后后面加个元素。比如:

html结构
<div class="student"><img src=""><span>xxx</span><div>

css样式
.student{属性:值;}
.student img{属性:值;}
.student span{属性:值;}

这里，这个逻辑，我一开始并不是很明白什么意思。虽然也用过类似，但是因为不懂所以一直不敢轻易地去用，除非是按照别人提供的方法和代码一葫芦画瓢，才会这样用。比如任务7的时候，用:check伪类做一个关闭按钮的遮罩也试过"将一堆选择器放到一起"（这么说可能不恰当），其实也不太懂他什么意思，只是跟着别人提供的方法跟着用而已。

#check:checked + .mask-cover{  display: flex; }

包括还看到bootstrap的css文件还会用逗号、大于号等（都不大理解）。比如：

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}

回到这个问题上，我要实现把鼠标放到文字上，空心小圆点就有背景颜色。

那我要怎么用:hover呢？试验的过程不太记得了，只隐约记得这个过程中，在浏览器看到的错误效果是：要不就是要把鼠标hover到img上才行；要不就是hover上去也没反应；要不就是hover到行里整个一行都有背景颜色或文字也有背景颜色；要不就是只是hover到行，还没hover到<a>标签，小圆点就有了背景颜色了。

那还是把试出来结果分享出来吧

html结构
<div class="row">
  <a href="" class="company-dot">
    <img src="task8pic/dot.png">阿里巴巴
  </a>
</div>
CSS样式
.company-dot img{background: rgba(249,163,114,0);margin-right:.5rem}
.company-dot:hover img{background: rgba(249,163,114,1);}

然后他这个样式实现的逻辑，它的意思可能是：

(1)在有.company-dot这个自定义选择器的<a>标签（父元素）里的<img>标签（子元素）有这样{background: rgba(249,163,114,0);margin-right:.5rem}的样式

(2)而当鼠标指到这个有.company-dot这个自定义选择器的<a>标签（父元素）时，它里面的<img>标签（子元素）就变成{background: rgba(249,163,114,1);}这个样式。

此外，还需要注意一个小细节：ps cc里直接导出空心圈这个png图片的时候其实中间部分是白色的，所以就要编辑这个图片中间部分，让中间部分变成透明的。

整个流程是：选择移动工具，摁住ctrl+点击鼠标左键在设计图选中这个图片，右边就会显示出来这个图片所在图层，鼠标右键栅格化样式，鼠标右键将这个图层转换成智能对象，再鼠标右键编辑内容，然后把中间白色部分用橡皮擦擦掉（我用的魔术橡皮擦工具，一点就没了，不过会把圆点边框颜色变得很浅，取了原本的色补充回去边框的颜色就好了）。

这个流程只是一种方法，肯定还有别的也很方便的方法，欢迎指教。

其实最后实现得一般般，因为这是一个矩形的图片，设置的background:rgba(249,163,114,1)，在选中的时候不仅仅是圆点中间有颜色，在空心圆点的边框外部也有颜色。并且这过程中的不理解，明天去理解一下。

【收获】

github真是个好东西！