如何使用div+css制作下面图中的翻页按钮

html-css015

如何使用div+css制作下面图中的翻页按钮,第1张

<!DOCTYPE html>

<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>