<html> <head> <title>表单验证</title> <style type="text/css"> .pagination { font-family: Tahoma; height: 25px; left: 50%; padding: 30px 0 20px; position: relative; } .page-bottom { left: -50%; position: relative; } .pagination .page-cur, .pagination .page-crt { background-color: #FFEEE5; border: 1px solid #FF5500; color: #FF5500; font-weight: 700; } .pagination a, .pagination .page-start, .pagination .page-end { background-color: #FFFFFF; border: 1px solid #CCCCCC; } .pagination a:hover{ background-color: #FFFFFF; border: 1px solid #ff5500; } .pagination a, .page-info, .page-start, .page-end, .page-break, .page-skip, .page-cur, .page-crt { float: left; font-family: Arial,SimSun; font-size: 13px; height: 23px; line-height: 23px; margin-right: 5px; min-width: 15px; overflow: hidden; padding: 0 5px; text-align: center; vertical-align: middle; white-space: nowrap; } </style> </head> <body> <div class="pagination"> <div class="page-bottom"> <span class="page-cur">1</span> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=40#J_FilterTabBar">2</a> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=80#J_FilterTabBar">3</a> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=120#J_FilterTabBar">4</a> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=160#J_FilterTabBar">5</a> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=200#J_FilterTabBar">6</a> <span class="page-break">...</span> <a href="/search?q=%D2%BB3&initiative_id=shopz_20120603&ssid=s5-e&s=40#J_FilterTabBar" class="page-next"><span>下一页</span></a> <span class="page-skip"> <form id="filterPageForm" name="filterPageForm" method="get" action="/search?q=%D2%BB3&initiative_id=shopz_20120603&tab=all" onsubmit="return gotoPage()"> <input type="hidden" name="q" id="q" value="一3"> <input type="hidden" name="ssid" id="ssid" value="s5-e"> 共100页 到第<input type="text" title="指定页码" name="jumpto" id="jumpto" size="3" value="2">页 <button title="指定页码" type="submit">确定</button> </form> </span> </div> </div> </body> </html>
详细解决方案
分页, 不定宽度, 自动正当中代码, 扒自淘宝
热度:153 发布时间:2012-07-20 10:38:30.0
相关解决方案