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

【出处】http://www.archiduchesse.com/

一、效果

二、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>

 【说明】

05、<h1 id="logo">中插入了一个图片，但样式表中，又把这个图片设置成了不显示，实际显示的是<div id="header">中的背景图片。也许，这个图片，只是起到了一个占位的作用吧。

 

三、CSS

/*
基本样式*/
body
{
    font-size: 0.85em;
    font-family: georgia,serif;
    color: #525255;
    background: url(../images/bg.png) repeat-x;
}

/*
Page*/
div#page
{
    width: 967px;
    margin: 0 auto;
}
/*
header*/
div#header
{
    height: 185px;
    background: transparent url( ../images/archiduchesse.png) no-repeat -14px top;
}
/*
logo*/
h1#logo
{
    float: left;
    width: 375px;
    height: 129px;
}
h1#logo a
{
    display: block;
    height: 129px;
}
h1#logo a img
{
    display: none;
}
/*
mainmenu */
ul#mainmenu
{
    float: left;
    width: 260px;
    padding-left: 30px;
    height: 129px;
    overflow: hidden;
    font-size: 1.25em;
}
ul#mainmenu li
{
    float: left;
    padding: 58px 2px 0 2px;
}
ul#mainmenu li a
{
    text-decoration: none;
    display: block;
    padding: 4px 12px;
    color: #93908e;
}
ul#mainmenu li.menu_actif a, ul#mainmenu li a:hover
{
    color: #434b4f;
    background-color: #fff;
}
/*
categories */
div#categories_block
{
    clear: both;
    height: 56px;
 
}

div#categories_block ul li
{
    float: left;
    width: 192px;
    height: 56px;
}
div#categories_block ul li a
{
    display: block;
    float: left;
    width: 114px;
    height: 45px;
    padding: 11px 0 0 78px;
    color: #a2a2a2;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left bottom;
    
}

div#categories_block ul li a strong
{
    display: block;
    font-size: 1.4em;
    font-style: italic;
}

div#categories_block ul li a span
{
    display: block;
    font-size: 11px;
}

div#categories_block ul li#et_voici_la_categorie_5 a
{
    background-image: url( ../images/onglet_bouclette.png );
}
div#categories_block ul li#et_voici_la_categorie_6 a
{
    background-image: url( ../images/onglet_deville.png );
}
div#categories_block ul li#et_voici_la_categorie_7 a
{
    background-image: url( ../images/onglet_socquette.png );
}
div#categories_block ul li#et_voici_la_categorie_8, div#categories_block ul li#et_voici_la_categorie_atelier
{
    background-image: none;
    width: 80px;
    overflow: hidden;
}
div#categories_block ul li#et_voici_la_categorie_18 a
{
    background-image: url( ../images/onglet_collant.png );
}
div#categories_block ul li#et_voici_la_categorie_22 a
{
    background-image: url( ../images/onglet_deluxe.png );
}
div#categories_block ul li#et_voici_la_categorie_8
{
    display: none;
}
div#categories_block ul li#et_voici_la_categorie_8 strong, div#categories_block ul li#et_voici_la_categorie_8 span, div#categories_block ul li#et_voici_la_categorie_999
{
    display: none;
}
div#categories_block ul li.selected a
{
    color: #646464;
    background-position: left top !important;
}
div#categories_block ul li a:hover
{
    color: #444;
}
div#categories_block ul li.selected a span
{
    color: #a3a3a3;
}

 【说明】

72、列表外加了一个<div id="categories_block">，这也许是一种习惯吧，去掉这个div，对效果没什么影响。

        如果去掉这个div，改成<ul id="categories_block">（这里，要注意相应的样式名称的修改），这时，ul、li、a三个标签都设置了高度，分别给这三个标签加上红、绿、蓝颜色背景，可清楚地看到这三个标签所包含的区域，如图示：

74、clear: both;

        清除前面的浮动设置，确保导航条另起一行开始。

75、height: 56px;

        <div id="categories_block">高度为56px，处于同一行的<h1 id="logo">和<ul id="mainmenu">高度都为129px，加起来的和刚好是<div id="header">的高度185px。

 

 另、这网站的购物蓝做得很漂亮，有琢磨明白怎么做的大侠，还望不吝赐教哈...