箱形のページ移動リンクを作る準備
まずは、HTMLを書きます。ここでは、下記のようにul要素とli要素とを使ってリストの形でリンクを作っています。 （現在のページが「3ページ目」の場合の例）
<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>
<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>
後から装飾するため、ul要素には「pagelinks」というクラス名を付加しています。 また、現在位置を示すため、3ページ目のli要素には「here」というクラス名を付加しています。
上記のHTMLをそのまま表示すると、以下のように見えます。
ただのリストですね。リストの1項目ごとに1つのリンクがあるだけです。 このように、必要な数だけリストの形でリンクを作っておきます。
それでは、スタイルシートを使って「箱形ページ移動リンク」に見えるようこのリストを装飾してみましょう。
