CSS实现翻页显示

最新推荐文章于 2024-07-23 11:50:44 发布

程百球

最新推荐文章于 2024-07-23 11:50:44 发布

阅读量3k

点赞数 2

分类专栏：前端学习文章标签：翻页 div span居中 span在div中居中

本文链接：https://blog.csdn.net/Wolf_flue/article/details/80873383

版权

最近在编写前端页面，需要实现一个翻页界面，需要实现的效果如下：

实现过程代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页效果</title>
	<style type="text/css">
	/**{margin:0;padding: 0;}*/
		div{
			height:42px;
			width: 960px;
			border: 1px solid gray;
			margin:auto auto;
			text-align: center;
			/*padding-top: 14px;*/

		}
		span{
			display: inline-block;
			background: gold;
			padding:4px 10px;
			margin:7px 4px;
			font: normal 12px/19px '雅黑';
		}
	</style>
</head>
<body>
	<div>
		<span>上一页</span>
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span style ="display: inline-block;background: #fff; ma