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)
江山如画的头像江山如画管理团队
上一篇 2018年7月29日 下午12:05
下一篇 2018年7月30日 上午9:48

99%的人还看了以下文章

  • 36个漂亮的CSS3动态按钮,纯CSS制作无图片

    36个漂亮的纯CSS制作的动态按钮。

    2020年2月2日
    4.6K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    4.4K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.8K1
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    11.2K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    3.7K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    3.2K0

发表回复

登录后才能评论