最近在编写前端页面,需要实现一个翻页界面,需要实现的效果如下:
实现过程代码如下:
<!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