CSS數字分頁效果
相當數量的網站都使用數字分頁效果,例如本站的分頁也是採用此方式,還算是比較美觀使用吧。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul{list-style:none;} ul li{ float:left; width:22px; height:22px; margin-left:5px; } a{ width:20px; height:20px; display:block; text-align:center; text-decoration:none; background-color:white; border:1px solid #666; } a:hover{ width:40px; height:30px; border:1px solid #666; position:absolute; line-height:30px; margin:-5px 0 0 -10px; } </style> </head> <body> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> </body> </html>
以上程式碼實現了我們想要的效果,下面簡單介紹一下實現的步驟:
(1). 使用浮動屬性,以便讓li元素水平排列。
(2).將a元素設定為塊級元素,然後設定它們的尺寸。
(3).使用連結偽類控制當滑鼠放在連結之上使a元素尺寸變大;使用絕對定位,使a元素能夠覆蓋周邊的元素。
特別說明:a元素的背景色設定為白色,因為預設狀態背景是透明的,否則將會看到兩邊被遮蓋的邊框。
相關文章
- JavaScript數字分頁效果詳解JavaScript
- CSS3具有3D立體效果的數字分頁CSSS33D
- PbootCMS實現數字條分頁樣式效果boot
- css動畫之 360首頁四字移動效果CSS動畫
- 用CSS實現Tab頁切換效果CSS
- CSS3頁面開關燈效果CSSS3
- CSS網頁文字分欄CSS網頁
- 分頁實現前臺後臺不同效果,分頁類引入
- CSS3文字豎排效果CSSS3
- CSS3文字閃爍效果CSSS3
- 表示哀悼的網頁黑白效果 CSS 程式碼網頁CSS
- CSS箭頭引導的分佈效果CSS
- anime.js 網頁動畫庫,輕鬆實現網頁數字滾動效果JS網頁動畫
- 使用Mybatis-plus進行分頁查詢,沒有分頁效果,查詢的資料量超出每頁數量設定MyBatis
- vue+Element-ui實現分頁效果VueUI
- 教你如何使用MvcPager實現分頁效果MVC
- CSS動畫-數字輪盤滾動效果實現(元件封裝,快速使用)CSS動畫元件封裝
- VUE實現評分效果和不同型別分數展示效果元件Vue型別元件
- CSS3文字動態填充背景效果CSSS3
- CSS3文字顏色漸變效果CSSS3
- iOS 類知乎”分頁”效果的實現?iOS
- CSS實現頁面切換時的滑動效果CSS
- CSS速刷 - CSS效果CSS
- vue 數字滾動遞增效果Vue
- 文字框限制輸入字數效果
- CSS3文字的描邊鏤空效果CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3文字不斷流光滑過效果CSSS3
- Laravel 帶引數分頁Laravel
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- CSS3文字陰影效果程式碼例項CSSS3
- 利用css變數實現按鈕懸浮效果CSS變數
- SpringMVC分頁顯示效果與配置不匹配的原因SpringMVC
- CSS div居中效果CSS
- CSS 對勾效果CSS
- html and css3 js製作翻頁書效果id1099-網頁前端設計HTMLCSSS3JS網頁前端
- js仿黑客帝國文字數字雨效果JS黑客
- 使用CSS計數器美化數字有序列表CSS
- [譯] CSS 變數實現炫酷滑鼠懸浮效果CSS變數