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%的人还看了以下文章

  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    13.0K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    4.1K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    14.3K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    6.4K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    7.2K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    14.2K0

发表回复

登录后才能评论