酷知百科網

位置:首頁 > 遊戲數碼 > 電腦

HTML和css怎樣製作橫排導航條,選單

電腦1.9W

很多小夥伴學習了一段時間的HTML和css,就想自己動手試試製作導航條選單,不過卻沒有思路,今天小編我就來分享一下HTML和css製作導航條的實例,大家可以參考參考。

操作方法

(01)如圖,製作導航條選單一般是用一個div嵌套ul和li標籤,然後li裏面有a標籤。

HTML和css怎樣製作橫排導航條,選單

(02)佈局做好之後,開始寫導航條的樣式,如圖,先清除導航條的margin和padding。

HTML和css怎樣製作橫排導航條,選單 第2張

(03)然後定位導航條的div,這裏我就用絕對定位來居中,如果你有其他導航條居中方法可以忽略這一條。

HTML和css怎樣製作橫排導航條,選單 第3張

(04)然後設定導航條的li左浮動,並且去掉li前面的圓點,讓導航條更好看。

HTML和css怎樣製作橫排導航條,選單 第4張

(05)然後設定導航條的a標籤轉塊級,以及導航條選單的寬高,文字顏色,水平垂直居中和背景色以及去掉a標籤的下劃線。

HTML和css怎樣製作橫排導航條,選單 第5張

(06)接着設定鼠標經過導航條選單變色即可。

HTML和css怎樣製作橫排導航條,選單 第6張

(07)最後,一個完美的導航條選單就完成了,簡直是太簡單了。

HTML和css怎樣製作橫排導航條,選單 第7張