<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<style type="text/css">
body { font:14px/1.5 "microsoft yahei","\5FAE\8F6F\96C5\9ED1",tahoma,arial }
ul,li,div {
margin: 0
padding: 0
}
ul,li { list-style: none }
li {
float: left
margin-left: 5px
padding: 0 8px
border: 1px solid #999
color: #000
line-height: 24px
}
.active {
color: #fff
background-color: red
border-color: red
}
.nowd { border: none }
select {
float: left
margin-left: 10px
height: 26px
}
button {
float: left
margin-left: 5px
line-height: 20px
}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>上一页</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li class="nowd">...</li>
<li>4</li>
<li>下一页</li>
<li>尾页</li>
</ul>
</div>
<div>
<select>
<option selected>01页</option>
<option>02页</option>
<option>03页</option>
</select>
<button>跳转</button>
</div>
</body>
</html>
可能在配色方面有所误差,配色的话用抓取颜色工具可以解决
内容分页一般是涉及到数据库的内容,如果楼主不是涉及到数据库,而是单纯的想用div+css实现翻页效果,完全可以通过javascript来实现,当点击上一页,下一页的时候应该做怎么样的操作,比如让原本显示的第一页隐藏,将原本隐藏的页面显示,则达成了所谓分页效果,你上面的代码只是一些表面效果,不具备任何所谓的“分页”功能。所谓分页,是动态的获取数据库的内容,通过数据库的记录来进行分类,比如每页需要显示10条记录,则从数据库获取10条记录,当点击下一页的时候,继续获取接下来10条,这里就设计到一些简单的算法,可以去看下javascript和sql查询语句以及limit的使用,手打,求给分
如下代码,纯手打,和你的一模一样,望采纳:
<style>.pagebox a{
padding:5px 11px
border:1px solid #CE0000
font-size:12px
background-color:#FFF
color:#444
text-decoration:none
}
.pagebox .pageon{
background-color:#CE0000
color:#FFF
}
</style>
<script>
function Cmd(v){
var link = document.getElementById("pagebox").getElementsByTagName("a")
for(var i = 0 i < link.length i++){
link[i].className = ""
}
v.className = "pageon"
}
</script>
<div class="pagebox" id="pagebox">
<a href="javascript:void(0)" onclick="Cmd(this)" class="pageon">首页</a>
<a href="javascript:void(0)" onclick="Cmd(this)">1</a>
<a href="javascript:void(0)" onclick="Cmd(this)">2</a>
<a href="javascript:void(0)" onclick="Cmd(this)">3</a>
<a href="javascript:void(0)" onclick="Cmd(this)">4</a>
<a href="javascript:void(0)" onclick="Cmd(this)">5</a>
<a href="javascript:void(0)" onclick="Cmd(this)">下一页</a>
<a href="javascript:void(0)" onclick="Cmd(this)">末页</a>
</div>