`
yj10864
  • 浏览: 82607 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

CSS控制分页文字放大效果

    博客分类：
  • web
CSSXHTMLHTML 
阅读更多

使用css来做网页分页链接按钮放大效果不错，难就难在相对定位的问题，所以本文的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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS分页链接按钮放大</title>
<style type="text/css">
 #link_box{width:300px; margin:0 auto; margin-top:200px;}
 a{display:block; float:left; margin:3px; width:20px; height:20px;color:#006; font:12px/20px Verdana, Arial, Helvetica, sans-serif; text-decoration:none; text-align:center; background:#EEE; border:1px solid #DDD;}
 a:hover{color:#000; position:relative; width:40px; height:40px; font:30px/40px Verdana, Arial, Helvetica, sans-serif; border-color:#006; margin-top:-7px; margin-left:-7px; margin-right:-7px;}
</style>
</head>
<body>
<div id="link_box"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a></div>
</body>
</html>
 
分享到：
| 超好用的组件模拟alert
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript网页特效范例宝典源码

    目录: 第1章 窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 ...实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第...

    《程序天下：JavaScript实例自学手册》光盘源码

    3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 ...

    程序天下:JavaScript实例自学手册

    3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 ...

    javascript网页特效实例大全（8-12）

    实例303　利用CSS样式分页打印　479 11.5　套打邮寄产品单　482 实例304　打印汇款单　482 实例305　打印快递单　484 实例306　打印信封　485 第12章　网站安全　489 12.1　禁止用户复制网页内容　490 实例307　禁止...

    YUI v3.17.2 RC1.zip

    值得关注的功能包括可排序的栏、分页、卷轴、行选取、可放大缩小的栏、以及线上编辑。 纪录器 提供一种快速简单的方式来写入 日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。 ...

    jQuery攻略.pdf

    49 3.10 在按钮上应用悬停效果 50 3.11 切换应用一个CSS类 52 3.12 创建基于图像的变换 54 3.13 为响应事件而添加和删除文本 57 3.14 应用样式作为对事件的响应 58 3.15 显示文字气球 60 3.16 创建“返回顶部”链接 ...

    IBM WebSphere Portal门户开发笔记01

    45、CSS背景图片与内容放大与缩小时相对定位 321 46、JS ATTACHEVENT与ADDEVENTLISTENER区别 321 47、JS WINDOW.EVENT.CANCELBUBBLE 事件冒泡 323 48、JS解决COOKIE跨域访问的问题之方法一 323 49、JS禁止复制网页...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    5)完善了水印控制的功能,文字水印支持更换字体及颜色! 6)优化了上传功能中返回上层目录的速度! 7)增加强大的可视化菜单配置及上传配置的生成工具,方便用户自行生成控件的相关配置文件(测试中)! 2008/3/02 Version ...

    C#编程经验技巧宝典

    16 &lt;br&gt;0033　Return语句的使用　17 &lt;br&gt;0034　如何实现无限循环　17 &lt;br&gt;0035　巧用foreach语句控制控件　18 &lt;br&gt;0036　有效使用switch case语句　18 &lt;br&gt;2.3　运算符　19 &lt;br&gt;0037　如何使用...

    JAVA上百实例源码以及开源项目源代码

    　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    JAVA上百实例源码以及开源项目

    　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    MY动力 Ver 3.51 Build 正式版.rar

    　（2）增加查找、计算器、文字背景颜色、插入手动分页符、当前**期、当前时间、EXCEL表格、符号、公式等功能，增强了表格编辑功能。 　（3）增加了下选菜单功能，如将表格功能的表格的属性、 插入删除行、 插入删除...

Magicbox
Global site tag (gtag.js) - Google Analytics