列表导航栏实例(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 ,