HTML5和CSS3扁平化風格部落格教學的資源分享

本課程透過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 瀏覽器常規化，可直接引入

二，頁面大框架分析： 

頭部header+內容content+頁腳footer 

#頭部>導航nav>主題banner

三，頁頭的結構分析及佈局 

※在sublime編輯器裡輸入lorem+tab可以產生毫無意義的文字填充。

以上是HTML5和CSS3扁平化風格部落格教學的資源分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！