制作成品模型圖：

代碼：

一、寫代碼前需要準備的：
萬事先寫（css）結構，把結構搭建好再開始寫（css）樣式；制作導航條一般需要用到<ul><li></li><ul>標簽結構
二、知識點：
1、ul是塊級元素所以在進行水平居中時用的是margin:0auoto;text-align:center;水平居中作用于行內元素。
2、overflow:hidden;用于解決高度塌陷，高度塌陷指的是沒有了高。
3、增加白色邊框時增加了1px，所以寬度增加了8px，之前的960px變成了968px，只有在每個自己的內部減個1px才行
即每個.navullia的寬度由之前的120px變成了119px。
4、.navullia:hover鼠標滑過超鏈接時的狀態顯示。
5、.navulli.lastli和last之間的點沒有空格，這個運用到了權重值的知識點，如果寫.list權重值小于.navulli
即10<12是無法優先顯示的，所以加了在.list前加了.navulli以權重值更大優先作用讓最后一個白色邊框條消失。

總結

以上是生活随笔為你收集整理的导航条的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。