设置首页
-
加入收藏
导航:
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置:
文章中心
-
WEB技术
-
链接放大效果
相关文章
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
简单的弹出层加遮罩层效果
JS图片放大查看效果!
js,post方式实现伪ajax效果
类似QQ闪动效果
韩国google的效果
很酷的TIP效果
层展开/关闭 - 运动缓冲效果
动画效果打开层,关闭层
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
链接放大效果
关键词:链接,效果 时间:2008年05月13日 星期二 阅读:121
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给放大的分页</title> <meta name="KEYWords" content="css,xhtml,display,layout, style,lab, sheets, w3c,w3, web standards,pagination" /> <meta name="DEscription" content="一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果" /> <meta content="all" name="robots" /> <style type="text/css"> ul#hovershow{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow li a { display: block; width:20px; height:20px; border:1px #999 solid; color:#0984FF; background-color:#fff; text-decoration: none; line-height: 20px; font-size: 12px; text-align: center; font-weight: bold; } ul#hovershow li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head> <body> <h1>给放大的分页</h1> <ul id="hovershow"> <li><a href="#1" title="#1">1</a></li> <li><a href="#2" title="#2">2</a></li> <li><a href="#3" title="#3">3</a></li> <li><a href="#4" title="#4">4</a></li> <li><a href="#5" title="#5">5</a></li> <li><a href="#6" title="#6">6</a></li> <li><a href="#7" title="#7">7</a></li> </ul> </body> </html>
提示:可以先修改部分代码后再运行
上一篇:
相同结构的40种CSS布局
下一篇:
根据浏览器宽度自动把布局从三栏切换成两栏加底栏
0条记录
访客评论
暂未有任何评论,你来发表一篇吧!
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我,再次发表不需要重填个人信息。
不想保留信息请
删除cookie
!
友情链接
name
name
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
0条记录访客评论