列表导航栏实例-精美电子商务网站赏析

最新推荐文章于 2024-11-04 09:11:09 发布

loveesc

最新推荐文章于 2024-11-04 09:11:09 发布

阅读量567

点赞数

文章标签：电子商务 float url header div html

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

一、效果

二、HTML

[html]view plaincopy 
   
 <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>  

三、CSS

[css]view plaincopy 
   
 /* 
 基本样式*/  
 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;  
 }  