關于網頁布局的原則和導航欄的一些理解。（小白）-DD狗

歡迎大家來到我的博客，我是一個web小白，希望可以通過博客來了解學習更多知識，謝謝大家。

今天，我對網頁的布局和導航欄進行了簡單的了解，下面和大家分享一些自己的筆記。

網頁簡單布局結構與表現原則：
在網頁布局中，html:結構化，css：表現化，JavaScript：行為化，三者存在分離又存在結合（一種思想）。
那么什么是分離呢？并不是簡簡單單的分開編輯，如上所說，html是指向結構的，我們在制作時，
應該先把html進行結構化，簡潔化，再在此基礎上進行css，實現真正的分離和結合。在初步的制作時，我們不應該過分追求
樣式，先在html的結構和語義化上進行努力。

用最大化的簡化html的結構，然后用css進行設置，減少html和css的契合度。

看到網頁設計圖時，先進行html的結構，語義化，再進行css設計。

---- text-indent 文本縮進。（簡化代碼）

導航菜單的制作：
①垂直菜單
用無序列表構造

延伸回顧：塊級元素(block)的特點:1 每個塊級元素都會獨自霸道一行。
2 元素的高，寬，行高以及頂和底邊距都可以設定。
3 寬度不設置時，與父元素一致。
內聯元素(inline)的特點:1 與其他元素在同一行上。
2 元素的高，寬，行高以及頂和底邊距都不可以設定。
3 元素的寬度不可以改變。
內聯塊狀元素(block-inline)特點:1 與其他元素在同一行上。
2 元素的高，寬，行高以及頂和底邊距都可以設定。

②水平菜單
在垂直菜單的基礎上對li進行浮動
li{
float:left
}
③圓角菜單
在水平菜單的基礎上有兩種方法：
1.為ul增加一個border-bottom，再為a標簽增加一個圓角的圖片背景。移動背景：background-position：
2. 使用border-radius。

以上學習內容來自：慕課網。 http://www.imooc.com/course/program

---恢復內容結束---

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com