List navigation bar instance (03) -- Appreciation of exquisite e-commerce websites

I. Results

 

Ii. HTML

[Html]
<Div id = "page">
<Div id = "header">
<H1 id = "logo">
<A href = "#" target = "_ top" title = "Archiduchesse">
</a> <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">
</a> <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>
[Description]

05. An image is inserted in

 

Iii. CSS

[Css]
/*
Basic style */
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
{
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
{
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
{
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
{
Background-image: url (../images/onglet_bouclette.png );
}
Div # categories_block ul li # et_voici_la_categorie_6
{
Background-image: url (../images/onglet_deville.png );
}
Div # categories_block ul li # et_voici_la_categorie_7
{
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
{
Background-image: url (../images/onglet_collant.png );
}
Div # categories_block ul li # et_voici_la_categorie_22
{
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 # else
{
Display: none;
}
Div # categories_block ul li. selected
{
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;
}

/*
Basic style */
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
{
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
{
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
{
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
{
Background-image: url (../images/onglet_bouclette.png );
}
Div # categories_block ul li # et_voici_la_categorie_6
{
Background-image: url (../images/onglet_deville.png );
}
Div # categories_block ul li # et_voici_la_categorie_7
{
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
{
Background-image: url (../images/onglet_collant.png );
}
Div # categories_block ul li # et_voici_la_categorie_22
{
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 # else
{
Display: none;
}
Div # categories_block ul li. selected
{
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;
} [Description]

72. A <div id = "categories_block"> is added to the list. This may be a habit. Removing this div has no effect on the effect.

If you remove this div, change it to <ul id = "categories_block"> (here, pay attention to the modification of the corresponding style name, the ul, li, and a labels are all set with the red, green, and blue backgrounds respectively, you can clearly see the regions contained in these three labels, as shown in:

 

74. clear: both;

Clear the floating settings and make sure that the navigation bar starts with another line.

75. height: 56px;

<Div id = "categories_block"> the height is 56px. The height of