当前位置:编程学习 > html/css >>

列表导航栏实例(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  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,