分页, 不定宽度, 自动居中代码, 扒自淘宝-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5974/article/details/82338263


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