課前必學(xué)模塊：
這部分學(xué)習(xí)課程必學(xué)险掀，雖然沒有做項(xiàng)目樟氢，但這樣的充電時(shí)間真的很寶貴埠啃，感恩碴开，也要加油??~
先看一下課前必學(xué)模塊的效果圖吧：
這個(gè)模塊就是一個(gè)大的div潦牛，包括了四個(gè)小模塊巴碗，當(dāng)然了即寒，樣式都是復(fù)用的逸爵，我們只需要看一個(gè)小模塊凹嘲。很特別，這個(gè)地方?jīng)]有用ul li溯革，而是使用了div來包裹致稀。下圖就是顯示了4個(gè)div抖单。
具體去看課前必學(xué)模塊時(shí)耍休，我們依然發(fā)現(xiàn)货矮，最外層div只定義了width喧锦，而沒有定義height抓督。是用padding來使內(nèi)容不靠邊兒铃在，顯得好看些怔昨，超出范圍也是隱藏的宿稀。最外層div里包含一個(gè)h3的標(biāo)題還有一個(gè)課程list的div祝沸。而課程list中奉狈，就有多個(gè)課程wrap啦涩惑。
課程wrap中跛蛋，樣式也是很特別的赊级，首先我們看到盒子與盒子的上下左右都有空隙是用了margin為10理逊。可是兑徘，第一個(gè)盒子如果有margin為10時(shí)挂脑，盒子的左邊就不能跟title對(duì)齊了，就很奇怪了锈麸。這個(gè)開發(fā)大牛就想到將整個(gè)課程盒子list的margin設(shè)置為 -10.(只是給盒子一個(gè)負(fù)的margin忘伞，卻使得里面的小盒子都有統(tǒng)一的樣式使用。太機(jī)智了舀奶。)? 再發(fā)現(xiàn)斋射，每一個(gè)盒子是有陰影涧至，而且鼠標(biāo)滑過的時(shí)候南蓬，陰影更明顯了呢哑了，于是蒜焊，樣式是這樣的：
.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);}
而且在每一個(gè)小的課程div里泳梆，分為兩個(gè)部分乘综，一個(gè)是學(xué)習(xí)進(jìn)度卡辰，一個(gè)是課程信息九妈。如圖中黑色部分所標(biāo)記的。下面將慢慢說雾鬼，嘻嘻??萌朱。
每一個(gè)wrap里有三個(gè)小東西，div的tag策菜，i的陰影晶疼，a的課程鏈接。
課程學(xué)習(xí)tag：
課程tag是課程wrap里的第一個(gè)小模塊呢又憨，也是效果圖里的黑色筆所標(biāo)注的1：
認(rèn)真的看翠霍，會(huì)發(fā)現(xiàn)除了綠色底兒，白色字蠢莺，而且還有點(diǎn)點(diǎn)的上邊距寒匙，還超出了左邊一點(diǎn)點(diǎn)耸携，還有就是有個(gè)小小的陰影。絕對(duì)定位哦河劝。
tag中务甥，padding-left為-4，會(huì)有3D的效果呢。z-index為1，才會(huì)在最上層顯示呢。
而tag-bg中炉媒，top是針對(duì)于最外層的wrap的呢白粉，因此它是tag的top值加上tag的高度鹃祖。小三角的出現(xiàn)：width為0，height為0，border-top為4 solid #4d555d;但border-left為4 solid 透明啦轧膘。
課程介紹：
課程介紹是課程wrap里的另一個(gè)個(gè)小模塊呢裂明，也是效果圖里的黑色筆所標(biāo)注的2：
它就是一個(gè)龐大版的超鏈接a，a中間包含了一個(gè)course-box，然后在box中，有了img，intro贾漏，還有bottom困食。對(duì)整個(gè)box而言瘩例，設(shè)置寬高，超出就隱藏黔漂。img不用細(xì)說酣藻，intro比較復(fù)雜坊夫，先說bottom吧。
intro是綠色標(biāo)記中的2考赛。它是鼠標(biāo)滑過時(shí)會(huì)顯示更多文字的div八孝。首先看h3的小標(biāo)題浅辙，它還有一個(gè) i 來特別標(biāo)記課程難度的級(jí)別诊赊。有趣的是秆撮，自己終于學(xué)會(huì)了如何在盒子中寫字。一個(gè)backgroundColor觉吭，一個(gè)padding黎侈，便出現(xiàn)了一個(gè)盒子贴汪。這里也會(huì)給出overflow為hidden。
bottom是綠色標(biāo)記中的3赡盘。它是固定的途戒，所以肯定有絕對(duì)定位，只是需要思考一個(gè)問題抄肖，當(dāng)height和line-height不等時(shí)久信，那一行文字在哪里顯示的呢？
小小總結(jié)：
看張?chǎng)涡袂拜呹P(guān)于line-height理解的文章漓摩，然后就曉得了這句話 ：高度不固定的文字垂直居中使用padding就好了裙士，瞬間就明白了為什么慕課網(wǎng)里大量使用padding上下。
Footer模塊：
這部分學(xué)習(xí)Footer管毙，已經(jīng)周五啦腿椎，一周的最后一天啦，還是很感恩夭咬，這一周簡單學(xué)了實(shí)戰(zhàn)宣傳頁面啃炸。感恩，加油??~
先看一下寬屏模式的Footer的效果圖吧：
標(biāo)注的也比較明顯啦卓舵，它將Footer模塊分為兩個(gè)部分啦南用，右邊的followus還有左邊的intro。上代碼咯：在整個(gè)大頁面布局中掏湾，只有footer和header是直接用的id训枢。在footer中，又是只定義了上下padding忘巧。因開發(fā)將Footer做成了不同寬度下有不同的樣式恒界，因此這個(gè)地方?jīng)]有再直接用 .w 樣式。而且在其中又用wraper包了一下砚嘴，將width設(shè)置auto十酣，但又設(shè)置最大寬度為1200，而且設(shè)置了margin使其居中际长。（而wraper包的這一下耸采，其實(shí)也是一個(gè)通用樣式了。）在wraper中工育，用footerwraper包是為什么呢虾宇？難道是語義化？~
右邊的followus小圖標(biāo)：
三個(gè)介紹它自己的小圖標(biāo)啦如绸，微信微博和QQ空間嘱朽，哎，位置上也說明了重要性是不同的怔接√掠荆看代碼吧：
這三個(gè)都是followus類中，一個(gè)float為right就定位啦扼脐。實(shí)現(xiàn)思路比較常規(guī)岸军，div中有三個(gè)，每一個(gè)a都鏈接到一個(gè)小圖標(biāo)。（問：這個(gè)時(shí)候?yàn)槭裁床挥胾l li啦艰赞？）共同的樣式放在 .followus a 中佣谐，比如鼠標(biāo)滑過，小圖標(biāo)更為清楚方妖，這個(gè)需要設(shè)置透明度比如之前opacity為0.5台谍，鼠標(biāo)滑過為1，再設(shè)置一下transition為opacity 0.2s吁断，使其過渡時(shí)間為0.2s趁蕊，這樣更為友好呢；特別的樣式就在單獨(dú)類中定義啦仔役。而且掷伙，微信是鼠標(biāo)滑過出現(xiàn)微信公共號(hào)，而微博和QQ空間實(shí)現(xiàn)的是真正的跳轉(zhuǎn)又兵。如果有三個(gè)小圖標(biāo)來放在樣式中是很麻煩的任柜，貌似是說碎片化了。
所以目前常用的方法是放在同一個(gè)png圖片上沛厨，然后使用background-image position來控制顯示哪個(gè)圖標(biāo)顯示宙地。一般來說，如果小圖標(biāo)是的橫向排列逆皮，那就是將小圖標(biāo)png豎著排呢宅粥。小圖標(biāo)如果是豎著排的，那就將小圖標(biāo)png原圖橫著排电谣。對(duì)了秽梅，小圖標(biāo)的寬高都要設(shè)置哦，不然會(huì)顯示不出來的剿牺。
微博與QQ空間就比較簡單啦企垦，但微信這個(gè)還是再說一下吧，當(dāng)鼠標(biāo)滑過時(shí)晒来，出現(xiàn)了一個(gè)二維碼的png钞诡，那就需要對(duì)其定位啦，肯定是絕對(duì)定位呢湃崩，它是針對(duì)是微信的a超鏈接來定位了荧降，為了使它在上方正中間出現(xiàn)，于是竹习，就設(shè)置了left為負(fù)值誊抛，bottom為小圖標(biāo)帶上margin后的高度。這樣就顯示的很友好啦整陌。
左邊的intro文字：
這個(gè)開發(fā)大哥很厲害呢，右邊的小圖標(biāo)直接float為right；左邊的內(nèi)容直接float為left泌辫，然后給出一個(gè)paddingleft不讓左邊內(nèi)容挨著就好了随夸，自始至終都沒有設(shè)置height。
左邊intro分為兩個(gè)部分震放，一個(gè)是link宾毒，一個(gè)是p。link中是一個(gè)ul li列表殿遂，樣式是說有個(gè)bottom不跟段落p挨著就好了诈铛，line-height顯得不要太緊湊就好了。然后這也是我見過的最為簡單的ul li的樣式了墨礁，margin-right保證不挨著幢竹，float保證水平排列。
width<980px時(shí)的footer效果圖：
這個(gè)footer看似簡單還是很厲害恩静，當(dāng)屏幕無限寬焕毫，卻依然保證包含內(nèi)容的width最大為1200，試想驶乾，如果沒有這個(gè)max-width邑飒，會(huì)讓左右小模塊之間的空隙特別大，應(yīng)該就是巨丑了级乐；但設(shè)置之后就不會(huì)啦疙咸，總是有個(gè)界限呢。但屏幕窄到980以下時(shí)风科，就換到下面的這個(gè)樣式啦罕扎。
在這里，可以看到丐重，followus不在float為right啦腔召，也開始居中啦。那時(shí)因?yàn)榘绲耄?footer中臀蛛，有了這樣的定義，@mediascreen and (max-width: 979px) #footer{ text-align:center }崖蜜。我曾以為text-align只應(yīng)用于文字浊仆，但我現(xiàn)在明白，不是這樣的呢豫领，里面若有div也可以可以的抡柿，因這個(gè)屬性會(huì)繼承呀，因此它的子div都繼承了這個(gè)居中等恐，于是洲劣，這些個(gè)div里面的文本都居中啦备蚓，參考鏈接是它。
雖然繼承說要居中囱稽，但如果一旦float郊尝，又都失敗了，于是战惊，將followus和intro中的float都改為none了流昏，它們之前是一個(gè)右浮動(dòng)，一個(gè)左浮動(dòng)吞获。而且之前intro為了防止左邊太靠邊兒况凉，還給了一個(gè)左padding，現(xiàn)在也將它重置為空啦各拷。
