百度下面的这种翻页按钮css是怎么写的?

html-css014

百度下面的这种翻页按钮css是怎么写的?,第1张

我来解释下吧

比如摆渡的这个页面下面的效果怎么怎么做的

http://zhidao.baidu.com/q?ct=17&tn=ikaslist&rn=10&word=%CE%D2%C3%C7&lm=0&pn=0

现在请把你的鼠标放到下面的[2]上,在你页面的左下角会出现个连接地址,现在你不需要点,依次的往[3],[4]啊依次看下去.你有没发现地址上的不同与共同点呢?,那么我来解释下地址的含义,你就会明白摆渡的做法了

没错,你会发现地址除了开头一样,结尾的pn的等于值都不一样,所以,pn值是摆渡工作人员考虑同一个答案按一定规则显示你要的结果的一个决定参数,这参数可以用JS代码捕获,传入后台

那么他又是怎么知道这些搜索出来的内容都有包含你搜索的关键字呢?那么你看见地址上的word=%CE%D2%C3%C7么?没错了,你可能不明白%CE%D2%C3%C7这是什么意思,那么我来解释下,这个我刚说的做法一样,可以用JS捕获word的值来判断你要的搜索关键字,为什么拿到word值就是你输入的关键字呢?那么我可以告诉你这里面一定加了一段JS的转编码代码,我在上面的地址里面输入的关键字是"我们"两个字,那么%CE%D2%C3%C7一定是"我们"转完了编码的值%CE%D2是"我"字 %C3%C7这个是"们"字,这算是加密技术中的一种

那么不难理解了,所有的信息都是地址来控制的

都是JS捕获的参数,我就拿我上面的地址进行总结下

http://zhidao.baidu.com/q?ct=17&tn=ikaslist&rn=10&word=%CE%D2%C3%C7&lm=0&pn=0

地址上从?后面都是参数,每个参数用&来分割,这不是一定的,估计他的JS里面捕获参数是按&这个符号来分割地址参数段,分成几个段,依次获取某段的参数,每个参数控制的含义不一样,我就不一一去测试回答你了

你若还有疑问,可以密我,我可以给你更详细并且耐心的解答,当然满意给分哦,70分啊我很想要

补充:老大你不是看完了假装没看见吧,我的热情不要熄灭啊

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

可能在配色方面有所误差,配色的话用抓取颜色工具可以解决

那些只是翻页链接的css样式,基本不包含翻页的功能。

最简单的方法,你可以在每个页数的超链接地址里面填上相应的页面地址,不过这样做出的是静态页面。

还是做成动态的比较好一点。