前端小神龜 分頁導航欄

2022-09-03 09:27:10 字數 1374 閱讀 2940

本人剛入職做前端乙個月,第一次分享自己的經驗,這次是乙個分頁導航欄,下面上圖

這個算是比較簡單吧,但對於新手來說還是一次比較好的收穫;

html **如下:

1

<

ul class

="pagination-db"

>

2<

li>

3<

a>

4<

img

src="$/admin_v3/icon_left.png"

>5a

>6li

>

7<

li>

8<

a>1

a>9li

>

10<

li>

11<

a>2

a>

12li

>

13<

li>

14<

a>3

a>

15li

>

16<

li>

17<

a>4

a>

18li

>

19<

li>

20<

a>

21<

img

src="$/admin_v3/icon_right.png"

>22a

>

23li

>

24<

form

>

25<

span

>跳至

span

>

26<

span

><

input

type

="text"

name

="page"

>

span

>

27<

span

>頁

span

>

28form

>

29ul

>

css **如下:沒有做相容性處理,有興趣的朋友可以改寫成相容各大瀏覽器的。

原理就是利用ul-li布局,給每個li設定好樣式,li內部寫入和a標籤,用來進行翻頁的操作(這個不會的可以去研究下哦,就是改寫**,具體如何做要看用什麼樣的路由了!)

就樣式而言,這段**完全可以用哦!!

這裡還有兩張左箭頭和右箭頭的,我都在上面給出來了哦!

1

.pagination-db31}

32a:hover36}

37li.chosen42}

43form58}

59}

前端的滑動導航欄

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

《前端》慕課 分頁導航(帶頁碼的分頁導航)

分頁導航 帶頁碼的分頁導航 玩轉bootstrap 基礎 教程 慕課網 在bootstrap框架中使用的是 ul li a 這樣的結構,在ul標籤上加入 pagination 方法 大小設定 在bootstrap框架中,也可以通過幾個不同的情況來設定其大小。類似於按鈕一樣 1 通過 paginati...

前端開發 導航欄的製作

在前端開發中,導航欄製作是比較基本的操作,這是我寫的導航欄的 先寫基本的html檔案,用div框起來,使用ul標籤。結果是這樣的 使用css檔案設定樣式 先給導航欄設定寬,高和背景顏色,然後使用p標籤左浮動,ul標籤右浮動,使其脫離文件流在一行顯示 將p標籤的line height和top的heig...