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
- jQuery數字分頁效果程式碼例項jQuery
- CSS3具有3D立體效果的數字分頁CSSS33D
- css數字分頁佈局程式碼例項CSS
- 數字按鈕分頁CSS樣式程式碼CSS
- javascript實現的數字分頁效果程式碼例項JavaScript
- css翻頁效果CSS
- jQuery使用者數字評分效果jQuery
- css動畫之 360首頁四字移動效果CSS動畫
- CSS網頁文字分欄CSS網頁
- jQuery實現的數字分頁程式碼例項jQuery
- 分頁實現前臺後臺不同效果,分頁類引入
- js數字三位分隔效果程式碼例項JS
- CSS等寬均勻分佈效果CSS
- Tp框架實現好看分頁效果框架
- 用CSS實現Tab頁切換效果CSS
- CSS3頁面開關燈效果CSSS3
- 分頁總頁數計算方法 所有分頁通用
- CSS3文字豎排效果CSSS3
- CSS3打字效果詳解CSSS3
- CSS3文字閃爍效果CSSS3
- CSS3字串逐字高亮效果CSSS3字串
- CSS分頁簡潔樣式CSS
- CSS箭頭引導的分佈效果CSS
- iOS 類知乎”分頁”效果的實現?iOS
- vue+Element-ui實現分頁效果VueUI
- 教你如何使用MvcPager實現分頁效果MVC
- 表示哀悼的網頁黑白效果 CSS 程式碼網頁CSS
- VUE實現評分效果和不同型別分數展示效果元件Vue型別元件
- CSS3星級評分效果程式碼CSSS3
- vue 數字滾動遞增效果Vue
- Laravel 帶引數分頁Laravel
- CSS3實現的頁面反轉效果CSSS3
- CSS3文字動態填充背景效果CSSS3
- CSS3文字顏色漸變效果CSSS3
- CSS實現頁面切換時的滑動效果CSS
- CSS3實現的頁面載入等待效果CSSS3
- css實現網頁”回到頂部“的程式碼效果CSS網頁