使用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>
分享到:
相关推荐
"100套CSS3分页效果"集合包含了多种不同的分页设计方案,旨在满足各种设计需求,确保在各大浏览器上正常运行,提供良好的用户体验。 首先,让我们了解一下CSS3在分页设计中的应用。CSS3引入了新的选择器、伪类、...
15. 缩放分页:鼠标悬停时,分页按钮会放大,提供视觉反馈。 16. 点击动画:添加点击后的动画效果,如淡入淡出、滑动等,增加交互趣味性。 17. 微交互分页:通过微妙的动效,如按钮下凹、颜色变化等,增强用户的...
本文将深入探讨“6款时尚的CSS分页样式”,它们是基于CSS3技术实现的,具有独特的设计和易用性。 首先,CSS3是一种强大的样式表语言,它扩展了CSS2,增加了许多新的特性和功能,如伪元素、过渡、动画、多列布局以及...
3. **缩放效果**:超链接文字在鼠标悬停时会放大或缩小,增加用户与文本的互动感。 4. **滑动进入/离开**:文字会沿着某个方向滑入或滑出,这种动画效果可以吸引用户的注意力并引导视线。 5. **闪烁效果**:文字会...
3. **产品展示**:产品展示页需突出产品的特性和优势,CSS可以实现产品图的网格布局,以及鼠标悬停时的放大或旋转效果,提升用户体验。此外,还可以通过CSS实现详细的描述和规格展示。 4. **新闻动态**:新闻动态页...
CSS模板是一种预定义的样式表,它包含了一系列CSS规则,用于统一控制网页元素的布局和外观。在这个模板中,开发者已经预先设计好了相册展示的相关样式,如图片的排列方式、边框样式、阴影效果以及交互式动画等,使得...
目录: 第1章 窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 ...实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第...
在网页设计中,图片滚动效果常常被用于展示产品或服务,为用户带来更丰富的视觉体验。"jQuery左右图片自动滚动特效"是一个利用jQuery库实现的动态图片展示功能,它允许图片以自动化的方式左右滚动,为网站增添动感和...
- **图片分页**:当图片数量较多时,可以添加分页功能。 - **响应式设计**:优化不同设备上的显示效果,如手机和平板电脑。 - **动画效果**:添加过渡动画,如淡入淡出、滑动等,提高视觉吸引力。 以上就是关于如何...
3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 ...
3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 ...
实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第12章 网站安全 489 12.1 禁止用户复制网页内容 490 实例307 禁止...
它可以包括自动播放、手动控制(如左右箭头)、分页指示器等功能。 2. 图片淡入淡出(Fade In/Fade Out):这种效果使图片在展示时平滑地从透明变为不透明,或者反之。它可以用于图片切换,或者在页面加载时作为...
值得关注的功能包括可排序的栏、分页、卷轴、行选取、可放大缩小的栏、以及线上编辑。 纪录器 提供一种快速简单的方式来写入 日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。 ...
通过CSS和JavaScript可以为页面添加动画效果,如淡入淡出、滑动、缩小放大等,增强用户体验。 十四、表格被选中变颜色效果 利用CSS的`:selected`伪类和JavaScript的`onSelect`事件,可以在表格行或单元格被选中时...
接着,CSS(Cascading Style Sheets)用于控制网页的样式和布局。在照片墙的设计中,我们可以通过CSS设置图片的宽度、高度、边距、对齐方式等属性,以实现图片的网格布局。例如,我们可以使用`display: grid`或`...
46. 3D效果:如CSS3和jQuery结合,创建3D翻转、旋转等效果。 47. 模拟手风琴:折叠和展开内容,如Accordion。 48. 评分系统:如Star Rating,允许用户对内容打分。 49. 载入指示器:显示数据加载状态,如Loaders....
同时,使用CSS3的伪类和伪元素,可以创造出引人注目的悬停效果和分页指示器。 在文件名称列表"Cocktails-development"中,我们可以推测这可能包含了网站开发的相关文件。在这个项目中,CSS文件可以与HTML和...
黑色瀑布流风格可能包含一些互动元素,如悬停效果、点击放大预览、分页导航等,以增强用户与网站的交互体验。 8. **易用性与可访问性**:模板应该遵循无障碍设计原则,确保视觉障碍或其他残障人士也能顺利浏览。这...