[劉陽Java]_CSS數字分頁效果
阿新 • • 發佈：2018-02-10
mar 塊級元素 title color order position meta -a pla
先給出效果圖，見下圖。下圖主要的完成當鼠標放到分頁數字的上會呈現一個變大的效果
實現思路：
（1）. 使用浮動屬性，以便讓li元素水平排列。
（2）.將a元素設置為塊級元素，然後設置它們的尺寸。
（3）.使用鏈接偽類控制當鼠標放在鏈接之上使a元素尺寸變大；使用絕對定位，使a元素能夠覆蓋周邊的元素。 特別說明:a元素的背景色設置為白色，因為默認狀態背景是透明的，否則將會看到兩邊被遮蓋的邊框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul { list-style: none; } ul li { float: left; width: 22px; height: 22px; margin-left: 5px; } a { display: block; width: 20px; height: 20px; text-align: center; text-decoration: none; background-color: white; border: 1px solid #666; } a:hover { width: 40px; height: 30px; border: 1px solid #666; position: relative; 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> </ul> </body> </html>
[劉陽Java]_CSS數字分頁效果