箱形のページ移動リンクを作る(7ページ目)

/* リスト全体 */
ul.pagelinks {
   margin: 0px;
   padding: 0px;
}

/* 各項目の装飾 */
ul.pagelinks li {
   width: 1.2em;
   line-height: 1.2em;
   list-style-type: none;
   border: 1px solid blue;
   float: left;
   margin: 0.1em;
   padding: 0px;
   font-family: Arial,sans-serif;
   font-weight: bold;
   text-align: center;
}

/* リンクの装飾 */
ul.pagelinks li a {
   display: block;
   text-decoration: none;
   width: 1.2em;
}
/* 未訪問リンクの色 */
ul.pagelinks li a:link {
   background-color: white;
   color: blue;
}
/* 既訪問リンクの色 */
ul.pagelinks li a:visited {
   background-color: white;
   color: purple;
}
/* マウスが載ったときの色 */
ul.pagelinks li a:hover {
   background-color: blue;
   color: yellow;
}

/* 現在位置項目の装飾 */
ul.pagelinks li.here {
   background-color: green;
   color: #ffff80;
   border-color: green;
}

<ul class="pagelinks">
   <li><a href="page1.htm">1</a></li>
   <li><a href="page2.htm">2</a></li>
   <li class="here">3</li>
   <li><a href="page4.htm">4</a></li>
   <li><a href="page5.htm">5</a></li>
</ul>
<div style="clear:both;"></div>