關(guān)于網(wǎng)頁布局的原則和導(dǎo)航欄的一些理解。（小白）-DD狗

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

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

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

用最大化的簡化html的結(jié)構(gòu)，然后用css進行設(shè)置，減少html和css的契合度。

看到網(wǎng)頁設(shè)計圖時，先進行html的結(jié)構(gòu)，語義化，再進行css設(shè)計。

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

導(dǎo)航菜單的制作：
①垂直菜單
用無序列表構(gòu)造

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

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

以上學(xué)習(xí)內(nèi)容來自：慕課網(wǎng)。 http://www.imooc.com/course/program

---恢復(fù)內(nèi)容結(jié)束---

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