仿windows选项卡效果拾零(2)　　　　来源 blueidea.com　marvellous



New Document




   



 
   
   
 
 
   
 
 
   
 
 
   
 
当前位置：展馆分布 > A展馆1楼展厅

     
       
         
         
         
         
         
         
       
     
A展馆1楼展厅A展馆2楼展厅B展馆1楼展厅B展馆2楼展厅C展馆1楼展厅C展馆2楼展厅

     
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
     

            一
         

            二
         

            三
         

            四
         

            五
         

            六
         

   

法2:


http://www.cn-lan.com/">



无标题文档






 
   
   
   
   
   
   
   
   
   
 

我佛山人
红色黑客
蓝色月光
孤零飘客



 
   
 
 
 


 
 
 

 

 

法3:

New Document




  



 
   
   
 
 
   
 
 
   
 
 
   
 
当前位置：展馆分布 > A展馆1楼展厅

     
       
         
         
         
         
         
       
     
A展馆1楼展厅B展馆1楼展厅B展馆2楼展厅C展馆1楼展厅C展馆2楼展厅

     
       
         
         
         
         
         
         
       
     
A展馆1楼展厅A展馆2楼展厅B展馆1楼展厅B展馆2楼展厅C展馆1楼展厅C展馆2楼展厅


     


       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
       
         
       
       
     

            一
         

            二
         

            三
         

            四
         

            五
         

            六
         

            七
         

            八
         

            九
         

            十
         

            十一
         

   

法4:

 







显示属性－<A href="http://www.51windows.Net</title">www.51windows.Net</title</A>></P> <P></head></P> <P><body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no><BR><SCRIPT LANGUAGE="javascript"><BR><!--<BR>function restore()<BR>{<BR>td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l";<BR>td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c";<BR>w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none";<BR>}<BR>function c1()<BR>{<BR>td1.className="lc";<BR>td_1.className="l-hc";<BR>w1.style.display="block";<BR>}<BR>function c2()<BR>{<BR>td2.className="lc";<BR>td_2.className="l-cc";<BR>w2.style.display="block";<BR>}<BR>function c3()<BR>{<BR>td3.className="lc";<BR>td_3.className="l-cc";<BR>w3.style.display="block";<BR>}<BR>function c4()<BR>{<BR>td4.className="lc";<BR>td_4.className="l-cc";<BR>w4.style.display="block";<BR>}<BR>function c5()<BR>{<BR>td5.className="lc";<BR>td_5.className="l-cc";<BR>w5.style.display="block";<BR>}<BR>function c6()<BR>{<BR>td6.className="lc";<BR>td_6.className="l-cc";<BR>w6.style.display="block";<BR>}<BR>//--><BR></SCRIPT><BR><form name="free" method="post" target="_target"><BR><div align="center"><BR>  <center><BR>  <table border="0" cellpadding="0" cellspacing="0" width="400" height="61"><BR>    <tr><BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td><BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td><BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外观</div></td><BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td><BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td> <BR>      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">设置</div></td><BR>      <td width="50" height="20" align="center" valign="bottom" ></td><BR>      <td width="50" height="20" align="center" valign="bottom"></td><BR>    </tr><BR>    <tr  style=""><BR>      <td width="50" height="1" align="center" class="l-hc" id="td_1" > </td><BR>      <td width="50" height="1" align="center" class="l-c" id="td_2"> </td><BR>      <td width="50" height="1" align="center" class="l-c" id="td_3"> </td><BR>      <td width="50" height="1" align="center" class="l-c" id="td_4"> </td><BR>      <td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <BR>      <td width="50" height="1" align="center" class="l-c" id="td_6"> </td><BR>      <td width="50" height="1" align="center" class="l-c" id="td_"> </td><BR>      <td width="50" height="1" align="center" class="l-r" id="td_"> </td><BR>    </tr><BR>    <tr><BR>      <td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"><BR>        <p align="center"> <BR>        <div align="center"><BR>          <table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"><BR>            <tr><BR>              <td width="100%" height="280"><BR>             </P> <P>             <div align="center"><BR>              <center><BR><div style="display:" id=w1><h1>AAAAAAAAAAAA</h1></div><BR><div style="display:none" id=w2><h1>BBBBBBBBBBBBB</h1></div><BR><div style="display:none" id=w3><h1>CCCCCCCCCCCCC</h1></div><BR><div style="display:none" id=w4><h1>DDDDDDDDDDDD</h1></div><BR><div style="display:none" id=w5><h1>EEEEEEEEEEEEEE</h1></div><BR><div style="display:none" id=w6><h1>FFFFFFFFFFFFFFFFF</h1></div><BR>              </center><BR>             </div><BR>             </P> <P>             </td><BR>            </tr><BR>          </table><BR>        </div><BR>      </td><BR>    </tr><BR>  </center><BR></table><BR></div><BR></form><BR></body><BR></html></P> <P> </P> <P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"><BR><html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>"><BR><head><BR><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR><title>无标题文档




 

   
 


 

仿淘宝网站的导航效果。此方法有几个优点：

1、根据字数自适应项目长度
 
 
2、不同的项目使用不同的颜色来区分

 
3、这回需要使用到js了，呵呵

 
4、背景图片只需要两个图片文件就足够，减少服务器负担

 
5、这是使用到的两个图片：
        
          
            
            
          
        
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" />http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" />

 

 




关联文档