CSS制作上一页 下一页 页码显示样式

CSS制作上一页 下一页 页码显示样式

今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title>
<style>
a {
  width: 30px;
  height: 20px;
  line-height: 25px;
  font: 12px/20px "宋体";
  border: 1px solid #e0e1e2;
  display: inline-block;
  text-align: center;
  color: #2052a3;
}

.shang {
  width: 64px;
}

a:hover, .active {
  background-color: #1f3a87;
  color: #fff;
}
</style>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div> <a class="shang">上一页</a> <a>1</a> <a>2</a> <a class="active">3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a class="shang">下一页</a> </div>
</body>
</html>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2313.html

(1)
江山如画的头像江山如画管理团队
CSS制作三行二列居中布局,高度自适应
上一篇 2018年7月29日 下午12:05
会移动的文字 marquee标签(入门到高级)
下一篇 2018年7月30日 上午9:48

99%的人还看了以下文章

  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    4.1K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    9.1K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    10.8K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    7.3K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    7.1K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    8.3K0

发表回复

登录后才能评论