作者最近加入FreeCodeCamp-一個GitHub開源項目缩歪，也是一所被認(rèn)可的網(wǎng)絡(luò)學(xué)校。在FreeCodeCamp谍憔，作者跟著進(jìn)度匪蝙，遇到了難題习贫。
一開始的導(dǎo)航欄便讓我犯難逛球。
當(dāng)然，作者之前也寫過許多網(wǎng)頁苫昌，做過許多導(dǎo)航欄颤绕，也都差不多成功了。那么祟身，今天為什么還要拿看似簡單的導(dǎo)航欄出來奥务，津津樂道呢？問題就在于袜硫，總結(jié)汗洒。
雖然以前導(dǎo)航欄做了不少，但是每一次都遇到問題父款，簡單的問題卻花費作者大量的時間去摸索溢谤。這次也不例外。
大家可以看到憨攒，就是這樣一個五個詞匯的導(dǎo)航欄世杀，作者卻花了大概3個小時。
這次不同的是肝集，在這三個小時里瞻坝，我領(lǐng)悟到了一套迅速做好導(dǎo)航欄的方法。作為我簡書上的第一篇文章杏瞻，分享給大家所刀。
首先，大的灰色長條背景是一個高50px的div捞挥。
左邊的ZHOULIANG是一個子div浮创，里面放一個p標(biāo)簽。并沒有給鏈接砌函。
重點來了斩披，右邊還是大家熟悉的ul里面四個li溜族，每個li里面放一個a來存文字。
可是垦沉，怎樣才能做到圖示的幾點呢煌抒？
1.四個單詞在右邊，并且不緊靠右側(cè)厕倍。
2.Home,About,Protfolio,Contact之間的間距一樣寡壮。
3.四個單詞垂直居中。
還有下圖的效果：根據(jù)文字的長度讹弯，hover變色诬像。
好了，直接為大家解答（這里假設(shè)父div的id為lead）
做導(dǎo)航欄闸婴，css里面一定要有
1.#lead ul???? 2.#lead ul li???? 3.#lead ul li a???? 4.#lead ul li a:hover
這點毋庸置疑坏挠。技巧來了
1.#lead ul{margin: 0;padding: 0;overflow: hidden;width:425px;margin-left:1200px;background:#505050;}??? 這是這個導(dǎo)航欄，我給ul的樣式邪乍。加粗的部分降狠，大家注意了！如果沒有這個部分庇楞，會發(fā)生什么呢榜配，不妨讓我們來看一看f12下的ul
大家注意到了嗎？ul沒有高度吕晌！作為包含了四個li的容器蛋褥，ul莫名其妙的失去了高度。而在我們加上了上面加粗部分的代碼后睛驳，會發(fā)生什么呢烙心？
這才是我們的ul啊，不是嗎乏沸？所以技巧一：給你的ul加上margin: 0;padding: 0;overflow: hidden淫茵；這樣，ul的寬蹬跃，高匙瘪，背景色都不是問題了。第一個問題便也解決：.四個單詞在右邊蝶缀，并且不緊靠右側(cè)???? 答案：獲得正確的ul后丹喻，給它加上margin-left。
2.#lead ul li a{font-size:25px;text-decoration: none;display: block;text-align: center;padding-top: 10px;height: 40px;color: ghostwhite;}???? 這是這個導(dǎo)航欄翁都，我給a加的樣式碍论。首先display，然后給padding-top自行調(diào)整荐吵。讓其居中骑冗，這也解決了第二個問題赊瞬。然后既然轉(zhuǎn)變成了塊狀元素先煎，就可以設(shè)定其高度贼涩。這里注意了，雖然父div的高度是50px薯蝎，但是別忘了我們?yōu)榱俗屍渚又幸＞耄o了padding-top,所以為了達(dá)到上圖所示的hover效果，我們給出的高度等于父div的高度減去padding-top的值占锯。
3.
為了讓hover的變色長度適應(yīng)文字的長度袒哥，我們在行間根據(jù)文字長度，自己定義每個a的寬度消略，這樣便解決了第三個問題堡称。
第一次寫文章，如果覺得有用艺演，點個喜歡吧却紧！
