前端開發 導航欄的製作

2021-08-17 04:11:22 字數 673 閱讀 9943

在前端開發中,導航欄製作是比較基本的操作,這是我寫的導航欄的**。

先寫基本的html檔案,用div框起來,使用ul標籤。

結果是這樣的

使用css檔案設定樣式

先給導航欄設定寬,高和背景顏色,然後使用p標籤左浮動,ul標籤右浮動,使其脫離文件流在一行顯示;將p標籤的line-height和top的height值設定一樣,使p標籤居中顯示;line-height設定垂直居中,text-align設定水平居中,導航欄完成

想給它加多一點樣式,滑鼠點到哪個欄目那個欄目就變色,效果如下

在li標籤前加上a標籤,css檔案如下:

a為聯級標籤,用display將a標籤設為塊級標籤,設定好寬和高:hover為當前滑鼠點中時,背景顏色設為黃色,字型設為黑,完成。

UserControl製作導航欄

1.最外邊放乙個scrollview控制項,目的是如果導航欄超過固定高度時 自動出現右側下拉條。2.在最外側放置listbox控制項,作為一級導航按鈕集合。3.通過xmal設定listbox.itemtemplate的datatemplate 一級導航窗格的datatemplate是expander...

silverlight製作導航欄

很久沒有寫東西了,最近開始接觸silverlight的專案,從而開始學習silverlight 開始的時候,什麼都是一抹黑,逐漸一點點的學習新的東西。今天製作了乙個導航欄,在這上面當滑鼠移動到上面的時候,相應模組的字型會發生變化效果如下圖 設計這個有很大一部分是silverlight的樣式,因為現在...

前端的滑動導航欄

本人不太會描述 直接上前端 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 這裡是內容區塊 ...