课前必学模块：

这部分学习课程必学，虽然没有做项目，但这样的充电时间真的很宝贵，感恩，也要加油💪~

先看一下课前必学模块的效果图吧：

这个模块就是一个大的div，包括了四个小模块，当然了，样式都是复用的，我们只需要看一个小模块。很特别，这个地方没有用ul li，而是使用了div来包裹。下图就是显示了4个div。

课前必学模块效果图

具体去看课前必学模块时，我们依然发现，最外层div只定义了width，而没有定义height。是用padding来使内容不靠边儿，显得好看些，超出范围也是隐藏的。最外层div里包含一个h3的标题还有一个课程list的div。而课程list中，就有多个课程wrap啦。

课前必学模块代码示意图

课程wrap中，样式也是很特别的，首先我们看到盒子与盒子的上下左右都有空隙是用了margin为10。可是，第一个盒子如果有margin为10时，盒子的左边就不能跟title对齐了，就很奇怪了。这个开发大牛就想到将整个课程盒子list的margin设置为 -10.(只是给盒子一个负的margin，却使得里面的小盒子都有统一的样式使用。太机智了。)  再发现，每一个盒子是有阴影，而且鼠标滑过的时候，阴影更明显了呢，于是，样式是这样的：

.moco-course-wrap:hover{ box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important} 

 .moco-course-wrap { box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);}

而且在每一个小的课程div里，分为两个部分，一个是学习进度，一个是课程信息。如图中黑色部分所标记的。下面将慢慢说，嘻嘻☺️。

每一个wrap里有三个小东西，div的tag，i的阴影，a的课程链接。

课程学习tag：

课程tag是课程wrap里的第一个小模块呢，也是效果图里的黑色笔所标注的1：

课程tag代码示意图

认真的看，会发现除了绿色底儿，白色字，而且还有点点的上边距，还超出了左边一点点，还有就是有个小小的阴影。绝对定位哦。

tag中，padding-left为-4，会有3D的效果呢。z-index为1，才会在最上层显示呢。

而tag-bg中，top是针对于最外层的wrap的呢，因此它是tag的top值加上tag的高度。小三角的出现：width为0，height为0，border-top为4 solid #4d555d;但border-left为4 solid 透明啦。

课程介绍：

课程介绍是课程wrap里的另一个个小模块呢，也是效果图里的黑色笔所标注的2：

课程介绍代码示意图

它就是一个庞大版的超链接a，a中间包含了一个course-box，然后在box中，有了img，intro，还有bottom。对整个box而言，设置宽高，超出就隐藏。img不用细说，intro比较复杂，先说bottom吧。

intro是绿色标记中的2。它是鼠标滑过时会显示更多文字的div。首先看h3的小标题，它还有一个 i 来特别标记课程难度的级别。有趣的是，自己终于学会了如何在盒子中写字。一个backgroundColor，一个padding，便出现了一个盒子。这里也会给出overflow为hidden。

bottom是绿色标记中的3。它是固定的，所以肯定有绝对定位，只是需要思考一个问题，当height和line-height不等时，那一行文字在哪里显示的呢？

小小总结：

看张鑫旭前辈关于line-height理解的文章，然后就晓得了这句话 ：高度不固定的文字垂直居中使用padding就好了，瞬间就明白了为什么慕课网里大量使用padding上下。

Footer模块：

这部分学习Footer，已经周五啦，一周的最后一天啦，还是很感恩，这一周简单学了实战宣传页面。感恩，加油💪~

先看一下宽屏模式的Footer的效果图吧：

宽屏模式下的Footer效果图

标注的也比较明显啦，它将Footer模块分为两个部分啦，右边的followus还有左边的intro。上代码咯：在整个大页面布局中，只有footer和header是直接用的id。在footer中，又是只定义了上下padding。因开发将Footer做成了不同宽度下有不同的样式，因此这个地方没有再直接用 .w 样式。而且在其中又用wraper包了一下，将width设置auto，但又设置最大宽度为1200，而且设置了margin使其居中。（而wraper包的这一下，其实也是一个通用样式了。）在wraper中，用footerwraper包是为什么呢？难道是语义化？~

Footer模块代码示意图

右边的followus小图标：

三个介绍它自己的小图标啦，微信微博和QQ空间，哎，位置上也说明了重要性是不同的。看代码吧：

微信微博QQ空间小图标代码示意图

这三个都是followus类中，一个float为right就定位啦。实现思路比较常规，div中有三个，每一个a都链接到一个小图标。（问：这个时候为什么不用ul li啦？）共同的样式放在 .followus a 中，比如鼠标滑过，小图标更为清楚，这个需要设置透明度比如之前opacity为0.5，鼠标滑过为1，再设置一下transition为opacity 0.2s，使其过渡时间为0.2s，这样更为友好呢；特别的样式就在单独类中定义啦。而且，微信是鼠标滑过出现微信公共号，而微博和QQ空间实现的是真正的跳转。如果有三个小图标来放在样式中是很麻烦的，貌似是说碎片化了。

所以目前常用的方法是放在同一个png图片上，然后使用background-image position来控制显示哪个图标显示。一般来说，如果小图标是的横向排列，那就是将小图标png竖着排呢。小图标如果是竖着排的，那就将小图标png原图横着排。对了，小图标的宽高都要设置哦，不然会显示不出来的。

微博与QQ空间就比较简单啦，但微信这个还是再说一下吧，当鼠标滑过时，出现了一个二维码的png，那就需要对其定位啦，肯定是绝对定位呢，它是针对是微信的a超链接来定位了，为了使它在上方正中间出现，于是，就设置了left为负值，bottom为小图标带上margin后的高度。这样就显示的很友好啦。

左边的intro文字：

这个开发大哥很厉害呢，右边的小图标直接float为right；左边的内容直接float为left，然后给出一个paddingleft不让左边内容挨着就好了，自始至终都没有设置height。

左边的intro代码示意图

左边intro分为两个部分，一个是link，一个是p。link中是一个ul li列表，样式是说有个bottom不跟段落p挨着就好了，line-height显得不要太紧凑就好了。然后这也是我见过的最为简单的ul li的样式了，margin-right保证不挨着，float保证水平排列。

width<980px时的footer效果图：

这个footer看似简单还是很厉害，当屏幕无限宽，却依然保证包含内容的width最大为1200，试想，如果没有这个max-width，会让左右小模块之间的空隙特别大，应该就是巨丑了；但设置之后就不会啦，总是有个界限呢。但屏幕窄到980以下时，就换到下面的这个样式啦。

width<980px的footer效果图

在这里，可以看到，followus不在float为right啦，也开始居中啦。那时因为，在#footer中，有了这样的定义，@mediascreen and (max-width: 979px) #footer{ text-align:center }。我曾以为text-align只应用于文字，但我现在明白，不是这样的呢，里面若有div也可以可以的，因这个属性会继承呀，因此它的子div都继承了这个居中，于是，这些个div里面的文本都居中啦，参考链接是它。

text-align使用说明

虽然继承说要居中，但如果一旦float，又都失败了，于是，将followus和intro中的float都改为none了，它们之前是一个右浮动，一个左浮动。而且之前intro为了防止左边太靠边儿，还给了一个左padding，现在也将它重置为空啦。