本課程透過CSS3扁平化風格部落格的實例詳細講解，讓大家更容易理解常規網頁的組成部分，靈活的使用不同部分WEB組件，理解它的構成思想，以及網頁靈活的佈局和設計。我們也可以由宏觀到微觀去掌握整體的佈局。
課程播放網址：http://www.php.cn/course/307.html
該老師講課風格:
教師講課深入淺出，條理清楚，層層剖析，環環相扣，論證嚴密，結構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。學生透過聽教師的講授，不僅學到知識，也受到思維的訓練，還受到教師嚴謹的治學態度的熏陶和感染
本視頻中較為難點是html5和css3扁平化風格部落格了：
模組分析：
平面化風格版面：header與body
頁元件分析：
#1， header（頁頭）：
①h1>a，放首頁鏈接，一般建議一個頁面只有一個h1，其他可以用h2，h3等，醬紫有利於頁面優化
#②nav>ul>li>a>span ,層層嵌套menu，主要運用結構化方式，因為不能確定導航欄需要多少個按鈕或鏈接，
2，banner部分：inner部分+向下滾動按鈕
①div>h2+ul,
h2>p
ul>li>a
②a
3,正文section1
①section>div>header+ul
header> ##ul>li>a同級標題
inner用來約束整個頁面的寬度
3,正文section2
section>section>div1+div2
div1>img
div2>h22 +p
如果沒有很強的列表屬性的話，可以用div來寫。
4，section3和4略
5，footer頁腳部分
footer>ul+ul,此處適合用div或span。
一，重置樣式及檔案結構：
讓樣式在不同瀏覽器下保持一致，
網址：cssreset.com樣式重置官網，
常用網址：necolas.github.io/normalize.css 瀏覽器常規化，可直接引入
二，頁面大框架分析：
#頭部>導航nav>主題banner
三，頁頭的結構分析及佈局
以上是HTML5和CSS3扁平化風格部落格教學的資源分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
