中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

關(guān)于網(wǎng)站分頁列表前后頁按鈕錯位問題

2023-03-22    分類: 網(wǎng)站建設(shè)

在我們?nèi)粘I钪?,上網(wǎng)沖浪幾乎是每天都做的一件事情,瀏覽新聞,查找信息,購物等,或多或少的都會看到網(wǎng)頁中內(nèi)容列表下方都有一行分頁列表,一般這種分頁列表包含有首頁,上一頁,具體頁,下一頁,最后一頁等按鈕,大多數(shù)分頁列表中的上一頁下一頁是用的“<”,“>”左右箭頭表現(xiàn)的,但是也有些網(wǎng)站上的上一頁下一頁是由設(shè)計師畫的箭頭來表示的,而這種箭頭就不是單純的能用左右箭頭來實現(xiàn)了。
最近工作中就遇到了一個比較符合網(wǎng)站主題的分頁列表,設(shè)計師的功力很深厚,設(shè)計稿中的分頁列表如下圖:

由圖可以看到,有具體的分頁項,還有上一頁下一頁和最后一頁(圖中 12),下面是具體實現(xiàn)這個分頁列表的代碼:

一開始的時候看到這個分頁列表,就想著不需要把箭頭切出來,直接用左右箭頭就能實現(xiàn),不就是給個顏色,字號,加粗嘛,然后發(fā)現(xiàn)事實上有點想當(dāng)然了

用左右箭頭實現(xiàn)的上一頁下一頁長得和設(shè)計稿上的不一樣,于是想著把箭頭單獨(dú)切出來放進(jìn)去,來實現(xiàn)設(shè)計稿上的上一頁下一頁按鈕,說干就干:
如此便實現(xiàn)了設(shè)計稿上的分頁列表了。


雖說是實現(xiàn)了,但是我又想能不能把箭頭寫到背景里面去,讓代碼頁面保持相對美觀些呢,于是問題來了

上一頁下一頁與具體頁不是垂直居中的,看著有點不對勁,然后就是調(diào)整了,margin啊,padding啊,vertiacl-align:middle都嘗試過,達(dá)不到想要的效果,既然css調(diào)整不過來,我就想是不是a標(biāo)簽的問題,是不是空的a標(biāo)簽和有內(nèi)容的a標(biāo)簽放到一起會有某種差別,于是我又開始嘗試,加個空格:

很不給面子,完全沒有反應(yīng)。我又想,是不是單純的空格鍵敲出來的空格是不是被判定為空了,那么換成空格符 試試看,
嚯,居中了!


至此,分頁列表的問題基本解決了,然后就是給出當(dāng)前頁的表現(xiàn)狀態(tài),調(diào)整間距了,最終比較好的實現(xiàn)了設(shè)計稿上的分頁列表:

最終實現(xiàn)的代碼如下:
代碼的世界很奇妙,很多工程師研發(fā)了各種美妙的庫類插件,各種代碼框架,就像是通向羅馬的條條大路很是神奇壯闊,而開發(fā)中的某些BUG就像大路邊上的野花一樣,能引起你的興趣,讓你發(fā)動思維去研究去發(fā)現(xiàn),從而產(chǎn)生一些別致的情緒。我想這也是代碼世界中的美妙之一吧。

本文題目:關(guān)于網(wǎng)站分頁列表前后頁按鈕錯位問題
當(dāng)前地址:http://m.rwnh.cn/news9/246859.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、網(wǎng)站改版、外貿(mào)建站定制開發(fā)、網(wǎng)站策劃、網(wǎng)站收錄

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
家居| 宣恩县| 措勤县| 噶尔县| 手游| 绥宁县| 山阳县| 南川市| 建宁县| 达孜县| 东阿县| 霍城县| 买车| 万荣县| 穆棱市| 浦东新区| 泸水县| 北安市| 临夏市| 金湖县| 大丰市| 博乐市| 台安县| 衡山县| 房产| 南华县| 丽江市| 阜新市| 曲靖市| 泉州市| 邵阳县| 安阳市| 化州市| 柏乡县| 新野县| 嘉荫县| 治县。| 叶城县| 那坡县| 济宁市| 武胜县|