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

  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    6.5K0
  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    网页制作 2020年2月23日
    8.7K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    7.5K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    4.1K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    6.1K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    5.4K0

发表回复

登录后才能评论