hover悬停放大的翻页效果
来源:52css 发布时间:2008-05-19 12:20:00
标签:hover,放大,鼠标,效果
今天我们继续向大家介绍一款翻页效果的制作。当鼠标移动到链接上时,翻页的链接区除了有悬停效果,还会放大。这样的效果具有很强烈的效果。大家适当美化即可作为自己的CSS布局资料了。
首先看XHTML代码:
<ul id="nav">
<li><a href="#">«</a></li>
<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>
<li><a href="#">8</a></li>
<li><a href="#">»</a></li>
</ul>
用无序列表来实现内容,当然,您也可以用段落p以及结合a标签来定义,根据你的页面结构进行选择即可。
看下面的CSS代码:
#nav {
list-style: none;
display: inline;
}
#nav li {
display: inline;
margin-right: 5px;
float: left;
height: 20px;
width: 20px;
}
#nav a {
color: #03c;
text-decoration: none;
display: block;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
#nav li a:hover {
font-size: 24px;
line-height: 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 10;
margin: -5px 0 0 -5px;
font-weight: bold;
color: #c00;
border: 1px dotted #666666;
background: #EEE;
}
代码相对简单,不再一一详解。大家可以对照52CSS.com的相关教程进行学习。
看最终的运行效果:
0
投稿
猜你喜欢
- 将SQL Server中所有表的列信息显示出来: SELECT SysObjects.Name as tb_name, SysColumns
- 本文实例讲述了Mysql数据库高级用法之视图、事务、索引、自连接、用户管理。分享给大家供大家参考,具体如下:视图视图是对若干张基本表的引用,
- 问题联邦学习原始论文中给出的FedAvg的算法框架为:参数介绍: K 表示客户端的个数, B表示每一次本地更新时的数据量, E 表示本地更新
- 安全公司 Imperva Cloud WAF 保护了全球超过10万个网站,并且每天观察到大约10亿次攻击。他们每天都会检测到成千上万种黑客工
- 本文实例为大家分享了python实现支付宝当面付示的具体代码,供大家参考,具体内容如下一、配置信息准备登录蚂蚁金服开放平台:https://
- 利用js实现点击一张图片,直接上传到指定的action,方法简单,一看就会了,只需要用户点击图片一次就可以实现图片上传功能。主要用到了onc
- 在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户
- Django默认支持Session,并且默认是将Session数据存储在数据库中的修改session存取放在数据库中SESSION_ENGI
- 这两天做了一个判断浏览器类型和版本号的业务,记录下相关的js代码: function allinfo(){ var ua = navigat
- Python3 正则表达式正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。本文主要阐述re包中的主要函数。
- 在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排
- 最近在上《自然语言处理》这门选修课,为了完成上机作业也是很认真了,这次是为了实现语角色标注任务,于是就入了这个坑,让我们来(快乐地 )解决出
- 本文实例讲述了python实现从ftp服务器下载文件的方法。分享给大家供大家参考。具体实现方法如下:import ftplibftp = f
- 记录下Django关于日期的配置,以及如何根据日期滚动切割日志的问题。配置的源码在githun上 https://github.com/bl
- 1.安装pyqt51.打开anaconda prompt命令窗口,激活虚拟环境:activate tensorflow2.安装PyQt5pi
- python除法负数商的取整方式与C++不同python:5 / -2 = -3若想和C++行为相同,可以使用 int(operator.t
- 前言CentOS 6.8 安装 Python 2.7.13,因为软件版本上的需求所以考虑将 Python 升级至 2.7.13,加上生产环境
- Python由于语言的简洁性,让我们以人类思考的方式来写代码,新手更容易上手,老鸟更爱不释手。要写出 Pythonic(优雅的、地道的、整洁
- 之前爬美团外卖后台的时候出现的问题,各种方式拖动验证码都无法成功,包括直接控制拉动,模拟人工轨迹的随机拖动都失败了,最后发现只要用chrom
- 本文实例为大家分享了Python实现神经网络算法及应用的具体代码,供大家参考,具体内容如下首先用Python实现简单地神经网络算法:impo