列表导航栏实例（03）——精美电子商务网站赏析

一、效果

二、HTML

[html]
<div id="page">
    <div id="header">
        <h1 id="logo">
            <a href="#" target="_top" title="Archiduchesse">
                <img src="images/logo.jpg" alt="Archiduchesse" /></a></h1>
        <ul id="mainmenu">
            <li class=""><a href="#" title="Shop">Shop</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li class="menu_actif"><a href="#" title="Infos">Info.</a></li>
        </ul>
        <div id="categories_block">
            <ul>
                <li class="selected" id="et_voici_la_categorie_6"><a href="#" title="High & smooth">
                    <strong>De ville</strong><span>High & smooth</span></a></li>
                <li id="et_voici_la_categorie_22"><a href="#" title="Lisle socks"><strong>De luxe</strong><span>Lisle
                    socks</span></a></li>
                <li id="et_voici_la_categorie_5"><a href="#" title="Sweet & warm"><strong>Bouclette</strong><span>Sweet
                    & warm</span></a></li>
                <li id="et_voici_la_categorie_7"><a href="#" title="Short & thin"><strong>Ankle
                    sock</strong><span>Short & thin</span></a></li>
                <li id="et_voici_la_categorie_18"><a href="#" title="Only for kids"><strong>Tights</strong><span>Only
                    for kids</span></a></li>
            </ul>
        </div>

    </div>
</div>

<div id="page">
    <div id="header">
        <h1 id="logo">
            <a href="#" target="_top" title="Archiduchesse">
                <img src="images/logo.jpg" alt="Archiduchesse" /></a></h1>
        <ul id="mainmenu">
            <li class=""><a href="#" title="Shop">Shop</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li class="menu_actif"><a href="#" title="Infos">Info.</a></li>
        </ul>
        <div id="categories_block">
            <ul>
                <li class="selected" id="et_voici_la_categorie_6"><a href="#" title="High & smooth">
                    <strong>De ville</strong><span>High & smooth</span></a></li>
                <li id="et_voici_la_categorie_22"><a href="#" title="Lisle socks"><strong>De luxe</strong><span>Lisle
                    socks</span></a></li>
                <li id="et_voici_la_categorie_5"><a href="#" title="Sweet & warm"><strong>Bouclette</strong><span>Sweet
                    & warm</span></a></li>
                <li id="et_voici_la_categorie_7"><a href="#" title="Short & thin"><strong>Ankle
                    sock</strong><span>Short & thin</span></a></li>
                <li id="et_voici_la_categorie_18"><a href="#" title="Only for kids"><strong>Tights</strong><span>Only
                    for kids</span></a></li>
            </ul>
        </div>

    </div>
</div>
【说明】

05、<h1 id="logo">中插入了一个图片，但样式

补充：web前端 , HTML/CSS  ,