学成在线首页完整版

跟着 PSD 切图做完了，把 promo-nav，左边浮动的边框等都补充完成了。当然，值目前都是写死的，移动端还没适配——书和视频都还没看到那里。

第一版跟着视频做的，也写了步骤分解，详情可以看这个：学成在线 制作分解版。

源码在 github 上，新写完的在 v2 文件夹里。

PSD与完成版与第一版之间的对比：

PSD	完成版	第一版

具体的变化如下：

• 头部改用 flex 完成……本来想用 position + float 写的，后面折腾了很久没有折腾出来，就干脆偷懒用 flex了……反正也不是不会（趴
• 首先将确实的内容都补完了，其实真的做了就发现，下面的内容大部分都可以复用之前写好的 CSS。
• 完成了轮播图（静态），这是用 position 完成的。
• 添加了左边的浮动窗口，这个目前是用 position: fixed; 将其固定在视窗窗口。

尚未解决的问题：

• 导师介绍哪里，应该是 hover 的效果会让整个黑色区域向上拉伸。这里设置了 height: 100%;，原本的 bottom 的定位会失效……倒也不是不能写死，但是写死了后面如果想要配上JS做动态的话，无法动态适配内容长度也会成为问题。
• 有个毕业季的图片忘写了……