[刘阳Java]_CSS数字分页效果
Posted 刘阳Java
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[刘阳Java]_CSS数字分页效果相关的知识，希望对你有一定的参考价值。
先给出效果图，见下图。下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果
实现思路：
（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数字分页效果的主要内容，如果未能解决你的问题，请参考以下文章