web128℃

よく使うページャーのサンプル　XHTML版とHTML5版

XHTMLのソース

<ul class="pager">
	<li><span>≪ PREV</span></li>
	<li><em>1</em></li>
	<li><a href="/ver1/news/p=2/">2</a></li>
	<li><a href="/ver1/news/p=2/">NEXT ≫</a></li>
</ul>

HTML5のソース

<nav class="pager">
	<ul>
		<li><span>≪ PREV</span></li>
		<li><em>1</em></li>
		<li><a href="/ver1/news/p=2/">2</a></li>
		<li><a href="/ver1/news/p=2/">NEXT ≫</a></li>
	</ul>
</nav>

CSS

/* @group Pager  */
.pager {
      margin: 10px;
}
.pager li {
      float: left;
      margin-right: 5px;
      border: 1px #3366FF solid;
      font-weight: bold;
}
.pager li:first-child,
.pager li:last-child {
      border: none;
}
.pager li span,
.pager li a {
      position: relative;
      display: block;
      padding: 3px 8px;
      color: #3366FF;
}
.pager li a:link,
.pager li a:visited {
      text-decoration: none;
}
.pager li a:hover,
.pager li a:active {
      background-color: #AADDFF;
      text-decoration: none;
}
.pager li em {
      display: block;
      padding: 3px 8px;
      background: #3366FF;
      color: #FFFFFF;
}
//floatクリア
ul.pager:after { content: " "; clear: both; display: block; height: 0; visibility: hidden; }

/* @end */