装飾する（main menu_link部分）

main menu_link部分を装飾する

今回はmain部分の装飾の続きを行います。

現状のHTMLは以下のようになっています。

HTML

<div id="menu_link">
    <h2><img src="./img/h2_menu.jpg" alt="Menu" width="300" height="25"></h2>
    <ul id="s_nav">
        <li><a href="#">Food</a></li>
        <li><a href="#">Drink</a></li>
        <li><a href="#">Sweets</a></li>
    </ul>
</div>

li要素の中のテキストを、予め用意しておいた画像に置き換えます。

HTML

<ul id="s_nav">
    <li><a href="#"><img src="./img/s_nav01.jpg" alt="food" width="300" height="60"></a></li>
    <li><a href="#"><img src="./img/s_nav02.jpg" alt="drink" width="300" height="60"></a></li>
    <li><a href="#"><img src="./img/s_nav03.jpg" alt="sweets" width="300" height="60"></a></li>
</ul>

marginやpaddingプロパティを利用して、余白を調整します。

→次のページ：装飾する（footer部分）

←前のページ：装飾する（main information部分）