ページを横渡りできるページ繰り

CSSとliを使ってページナビゲーションを作ります。

動的に一元管理したい場合は、こちらをご参考ください。
jQueryで簡単にページ送り。

HTMl

<div class="mod_pagelist">
<ol>
<li class="prev"><a href="#">&laquo;&nbsp;前のページ</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li class="next"><a href="#">次ページへ&nbsp;&raquo;</a></li>
</ol>
<!-- mod_pagelist_end --></div>

CSS

.mod_pagelist ol{
	width:500px; /* 横幅設定 */
	position:relative;
	text-align:center;
	background-color:#EEF; /* 背景色 */
}
.mod_pagelist ol li{
	padding:0;
	margin:0 1px 0 1px;
	display:inline;
	
}
.mod_pagelist ol li span,
.mod_pagelist ol li a{
	display:inline-block;
	padding:3px 8px 3px 8px;
	border: 1px solid #ccc;
	background-color:#FFF;
}
.mod_pagelist ol li.prev{
	padding:0;
	position:absolute;
	top:0;
	left:0;
}
.mod_pagelist ol li.next{
	padding:0;
	position:absolute;
	top:0;
	right:0;
}

.mod_pagelist ol li a:link    {color:#000;}
.mod_pagelist ol li a:visited {color:#000;}
.mod_pagelist ol li a:hover   {color:#000; text-decoration:none; background-color:#EEE;}
.mod_pagelist ol li a:active  {color:#000; text-decoration:none; background-color:#EEE;}