装飾する(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要素の中のテキストを、予め用意しておいた画像に置き換えます。

food
drink
sweets
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部分)