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如何实现数字分页效果的更多相关文章
- PHP自练项目之数字分页效果
学习要点:1.LIMIT 用法2.各种参数3.超链接调用 第一:先在文件中设置数字分页模块:我的文件是(blog.php) //分页模块 $_page = $_GET['page']; $_pages ...
- [刘阳Java]_CSS数字分页效果
先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...
- PHP自练项目之数字与文字的分页效果在函数中实现
/** * * @param $_sql * @param $_size */ function _page($_sql,$_size) { //将里面的所有变量取出来,外部可以访问 global $ ...
- thinkphp自定义分页效果
TP自带了一个分页函数,挺方便使用的. 下面是我的使用方法: /*****************分页显示start*************************/ $arr_page=$this ...
- 基于vue2.0实现仿百度前端分页效果(二)
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- 利用ajax实现分页效果
在网页中看到的分页效果,想一下就点击分页中的内容的时候,然后调用ajax调出对应的数据,正确的显示在相应的标签内. 1.用html实现正确的样式和结构 2.采用jquery中的ajax调出数据. 需要 ...
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- 5种风格的 jQuery 分页效果【附代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
随机推荐
- POI读取excel
HSSF是Horrible Spread Sheet Format的缩写 读取2007版本前 XSSF是XML Spread Sheet Format的缩写 读取2007版本后(包含2007)
- max_input_vars 的影响
一同事,让帮忙解决问题:post了1020条数据,结果只显示250条. 判断可能是php的post设置问题,结果发现php.ini里关于post的设置没有问题. 通过 php://input 得到请求 ...
- tomcat集群待整理
对于tomcat的集群有两种方式,这个主要是针对 session而言的.一种就是sticky模式,即黏性会话模式:另外一种就是session复制模式了.所谓sticky模式就是说同一个用户的访问 请求 ...
- Twitter 登录和分享
继上面一片介绍了FaceBook的登录和分享,现在再来实现Twitter的登录和分享. 1.首先要说明的是,我没找到官方提供的SDK,查阅很多文章都提到了一个帮助实现的包Twitter4j.jar ...
- shell中[[]]和[]的主要区别
[ ] 实际上是bash 中 test 命令的简写.即所有的 [ expr ] 等于 test expr 对 test 命令来说, 用 -eq 要进行数字比较,而你此时传入字符串,就报错了. [[ e ...
- 如何用Transformer+从PDF文档编辑数据
ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可使用该软件从PDF文档编辑机密信息,然后再发布它们,文本和图像均可编辑,本文将为 ...
- 关于spring 3.0.5的 <mvc:resources mapping="***" location="***">标签的使用
spring mvc 的<mvc;resources mapping="***" location="***">标签是在spring3.0.4出现的 ...
- OpenJudge计算概论-球弹跳高度的计算
/*======================================================================== 球弹跳高度的计算 总时间限制: 1000ms 内存 ...
- IOS:被误解的MVC和被神化的MVVM
MVC的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写.它表示的是一种常见的客户端软件开发框架. ...
- Hive(一):架构及知识体系
Hive是一个基于Hadoop的数据仓库,最初由Facebook提供,使用HQL作为查询接口.HDFS作为存储底层.mapReduce作为执行层,设计目的是让SQL技能良好,但Java技能较弱的分析师 ...