学成在线课程页面

先把剩下两个页面中比较复杂的，也许要超链接的页面做掉了。

大部分布局上的功能都实现了，就剩下一些细节上的：例如说没有补上的注释，以及字体大小颜色上的细节方面。div都分了，class 也取名了，但是因为刚开始的时候CSS没有设计好，导致现在要重复写CSS就感觉很懈怠……

依旧源码在 github 上，新写完的页面也在 v2 文件夹里。

目前完成的学成在线部分

部分首页的单独拆分实现：学成在线制作分解版

这个页面中就是用纯浮动去写的，当时视频还没看到绝对定位，我也还没下载PS……
首页的完整实现：学成在线首页完整版

这个时候补完了绝对定位，把缺的轮播图补上了。这个时候也下载了PS的试用版，所以页面的布局是根据PSD上的版本来的，和视频上的实现不太一样。
职业规划页面的实现：学成在线职业规划页面

这个就是导航栏上的职业规划页面，这一块的代码量不是很大，并不太需要重复的写布局，所以实现的相对而言比较快。同样，这个页面写完之后已经不太需要切图了，所以效率也慢下来了一些。
单独一门课程的实现，也就是下文

至此，3/4的内容已经完成了，剩下一个所有课程的分页我也看了下，似乎也不是特别的复杂，这个礼拜应该就能把学成在线这个系列结束掉了。

单独课程页面的实现

依旧是熟悉的对比图：

PSD	实现

基本上来说该有的布局都有了，做到一半的时候就突然很想换成flex去实现，后来还是压抑住躁动的情绪继续用浮动做完了。

越写到后面就越燥，这个是真的不好……好在3/4已经完成了，现在就剩下一个所有课程的页面没有实现了。

当前页面的难点剖析

视频

视频方面也算是吧，我到现在还不知道应该怎么黑屏显示，网页中的视频用的是 MDN 上 video 的案例，大小还算合适，就直接拉下来用了。

不过不知道原页面是不是用 HTML5 实现的，感觉H5带的下拉框PSD中都没看到，也有可能是我实现的方式不对。

居中对齐

这一块就没有做到像PSD上显示的那样垂直居中对齐，这也是浮动的一个问题，换成flex就能够相对而言比较轻松的解决了。

评论区

另外一个方面就是左上角的评论区：

这一块的布局最终还是使用绝对定位+浮动完成了。头像用的是绝对定位，隔出一片空间后，用户名和星级评分单独分割出一块，向左浮动，日期向右浮动。具体的结构长这样：

|- 头像，绝对定位
|- 用户信息1，向左浮动
|       |- 用户名，常规流
|       |- 星级，常规流
|- 日期，向右浮动

其实做到这里就已经很想用flex去做了……不过刚开始结构都写好了，懒得一个个的去cv了。

对的，还是想用flex去实现，浮动对于多格元素的支持确实不太好。

这一块的代码，HTML+CSS也快千行了，就不放上来了，感兴趣的可以clone一下用devtools看看。就我个人来说我也不太喜欢干巴巴的看代码，然后脑子里面去实现……CSS干想太难了……