CSS如何实现数字分页效果
2013-05-21 20:30
573 查看
CSS如何实现数字分页效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。
代码实例如下:
一. 使用浮动属性,以便让li元素水平排列。
二.让a元素设置为块级元素,然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。
特别说明:之所以让a元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。
原文地址:CSS如何实现数字分页效果
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。
代码实例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <head> <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>以上代码实现了我们想要的效果,下面简单介绍一下实现的步骤:
一. 使用浮动属性,以便让li元素水平排列。
二.让a元素设置为块级元素,然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。
特别说明:之所以让a元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。
原文地址:CSS如何实现数字分页效果
相关文章推荐
- css实现数字分页效果
- css如何实现数字换行效果
- 用css实现如何使滚动条隐藏但是溢出时有滚动的效果
- 如何用css实现一条直线渐变效果
- fieldset实现下订单的分页效果(js+css+html)
- JS+CSS实现的拖动分页效果实例
- Web_PHP_DedeCMS_如何配合php标签实现分页效果?!
- DataGridView如何实现自动定位效果,比如我输入个数字N就能马上定位到第N行,而且滚动条也会跟着滚动!
- 如何用CSS实现翻页效果?
- css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
- 如何用css实现网页footer的效果
- 如何用CSS实现背景半透明效果
- 如何用CSS实现翻页效果?
- 如何实现数字lcd显示效果(原创)
- PHP实现简单数字分页效果
- 自动换行问题,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现换行的方法
- 巧用CSS实现表格的隐藏显示控制,类似分页效果
- 手把手教小白如何用css+js实现页面中图片放大展示效果
- 如何在CSS中实现父选择器效果?
- 如何用CSS实现文字环绕图片的效果