繼續(xù)學習布局咯：
先看一篇講述命名規(guī)范的文章吧，也摘錄一些經(jīng)典命名放在下面??：
頭：header ?內(nèi)容：content/container ?尾：footer ?導航：nav ?側欄：sidebar ?欄目：column ?頁面外圍控制整體布局寬度：wrapper ?左右中：left right center ?登錄條：loginbar ?標志：logo ?廣告：banner ?頁面主體：main ?熱點：hot ?新聞：news ?下載：download ?子導航：subnav ?菜單：menu ?子菜單：submenu ?搜索：search ?友情鏈接：friendlink ?頁腳：footer ?版權：copyright ?滾動：scroll ?內(nèi)容：content ?標簽頁：tab ?文章列表：list ?提示信息：msg ?小技巧：tips ?欄目標題：title ?加入：joinus ?指南：guild ?服務：service ?注冊：regsiter ?狀態(tài)：status ?投票：vote ?合作伙伴：partner
先看一下banner的效果圖啦：
在這個banner上简僧，不看背景圖片建椰，其上的文字部分共有三個，如圖所標識岛马。
而代碼的截圖如下：一個class 為header的div就包括了昨天的工作量咯棉姐。余下的粉紅色的框框就是整個的banner啦逆，而綠色部分，則是上面所說的1夏志、2、3個小模塊沟蔑，分別是三個div湿诊。其中，path是左上角的小路徑瘦材，extra是右上角的分享按鈕，而info-wrap就是中間的課程信息了朗和。
1和2都比較簡單，也在其中進行了說明簿晓，下面說一下3吧眶拉，它有四個div呢，分別是隱藏的h1頁面標題憔儿，課程信息，價格唱逢，購買按鈕屋休，具體如下所示：
但看完這些并沒有看到背景圖片呢，哈哈痪枫，接下來就有啦：
先看一下nav的效果圖啦：
這個是普通版的Nav效果圖呢：
但當鼠標滑動，比如視頻恰好到瀏覽器那里時易阳，又會出現(xiàn)一個固定在上方的Nav吃粒。這個特殊版出現(xiàn)，那個普通版就隱藏了呢徐勃。
于是僻肖，這個Nav部分的代碼分析如下：
在這個部分，是課程宣傳啦臀脏，包括介紹、章節(jié)秒啦、咨詢搀玖、評價等所組成的Nav余境，因為有兩個不會同時出現(xiàn)的Nav巷怜，一個普通版暴氏，一個固定版，而且還有一個宣傳視頻关带，于是沼撕，這個部分大的模塊來說是三個div呢。
普通版的Nav磨总，它里面我們學習了clearfix:after到底在講什么~ 還有就是錨點的命名要規(guī)范笼沥。
特殊版的Nav娶牌，它里面我們學習position為fixed馆纳，以及與header相似的布局模式。
宣傳視頻鉴裹，它里面我們學習隱藏真正的播放器钥弯，而是自己控制樣式。但播放器的邏輯還是有點點復雜猖凛，我現(xiàn)在還不太懂绪穆。
碼到這里來個小小總結啦：
banner部分，使用了兩個div菠红，一個div控制內(nèi)容难菌，一個div控制圖片。其中郊酒，內(nèi)容模塊width是1200，整個圖片的width是1742px摹闽，但對其設置為width為100%褐健，height也為100%，就有了大氣的banner了蚜迅。
Nav部分，使用了三個div坐梯，兩個Nav不會同時出現(xiàn)刹帕，但這個很巧妙啦馏段，而且践瓷，還有視頻的顯示那里，只是自己還沒有看得太懂喷舀。繼續(xù)加油??吧淋肾。
