CSS实现导航条图片的翻转菜单


设为首页	加入收藏	网站首页

休闲娱乐

两性生活

电脑网络

热点专题

您现在的位置：世纪中国 >> 网页制作 >> CSS教程 >> 教程正文

CSS实现导航条图片的翻转菜单
作者：中国图霸教程来源：网络点击数：更新时间：2007-1-2

t;li id="faq"><a href="#"></a></li>

<li id="contact"><a href="#"></a></li></ul>

　　设计的更体贴，照顾纯文本浏览的朋友:

　　可以在LI内套入SPAN元素，加入文本链接，在风格中设SPAN不可见。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</script>

_uacct = "UA-152060-1";

urchinTracker();

</script>

<!--

body{

background: #666666;

margin: 20px;

}

color:#EEEEEE;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

a:hover{

color: #FFCC00;

}

#imgmenu{

width: 450px;

height: 25px;

background: url(/imagelist/06/43/473648jpj0j1.gif);

list-style-type: none;

padding: 0px;

margin: 0px;

}

#imgmenu li{

float: left;

}

#imgmenu li a{

display: block;

width: 90px;

height: 25px;

}

#imgmenu li#home a:hover,#activeh{

background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px;

}

#imgmenu li#about a:hover,#activea{

background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px;

}

#imgmenu li#pro a:hover,#activep{

background: url(/imagelist/06/43/47</p><p align='center'><b><a href='/webmake/css/200701/20070102014853_24105.html'>上一页</a>  <a href='/webmake/css/200701/20070102014853_24105.html'>[1]</a> <font color='red'>[2]</font> <a href='/webmake/css/200701/20070102014853_24105_3.html'>[3]</a> <a href='/webmake/css/200701/20070102014853_24105_3.html'>下一页</a> </b></p></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <table class=center_tdbgall id=table8 cellSpacing=0 cellPadding=0 width=570 border=0>
          <tr>
            <td align=middle>
            <script language="javascript" src="/ads/cntuba-ads/dn/y2.js"></script></td>
          </tr>
          <tr>
            <td background=/Skin/sealove/line01.gif height=1></td>
          </tr>
          <tr>
            <td height=2></td>
          </tr>
          <tr>
            <td align=middle>
            <script language="javascript" src="/ads/cntuba-ads/dn/y3.js"></script></td>
          </tr>
        </table>
      </td>
      <td width=1 bgColor=#888888></td>
      <td width=4></td>
      <td width=1 bgColor=#888888></td>
      <td vAlign=top width=200>
        <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
          <tr>
            <td align=middle>
            <script language="javascript" src="/ads/cntuba-ads/dn/y5.js"></script></td>
          </tr>
          <tr>
            <td height=5></td>
          </tr>
        </table>
        <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
          <tr>
            <td align=middle bgColor=#fab571 height=20><FONT color=#ffffff><STRONG>分类推荐</STRONG></FONT></td>
          </tr>
          <tr>
            <td align=middle><table height=216 cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
    <tr align=middle bgColor=#fcfcf5>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>社会</FONT></B></td>
      <td><A href="/News/List/List_17.html">社会</A></td>
      <td><A href="/News/List/List_18.html">娱乐</A></td>
      <td><A href="/News/List/List_19.html">军事</A></td>
      <td><A href="/News/List/List_20.html">校园</A></td>
    </tr>
    <tr align=middle bgColor=#fcfcf5>
      <td><A href="/humor/Index.html">幽默</A></td>
      <td><A href="/News/List/List_21.html">体育</A></td>
      <td><A href="/women/List/List_50.html">女性</A></td>
      <td><A href="/Article/Index.html">专题</A></td>
    </tr>
    <tr align=middle bgColor=#eff1f1>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>电脑</FONT></B></td>
      <td><A href="/developer/Index.html">编程</A></td>
      <td><A href="/webmake/Index.html">网页</A></td>
      <td><A href="/software/Index.html">软件</A></td>
      <td><A href="/systems/Index.html">系统</A></td>
    </tr>
    <tr align=middle bgColor=#eff1f1>
      <td><A href="/computer/Index.html">安全</A></td>
      <td><A href="/picture/Index.html">图象</A></td>
      <td><A href="/internet/Index.html">冲浪</A></td>
      <td><A href="/exam/Index.html">认证</A></td>
    </tr>
    <tr align=middle bgColor=#f6fefc>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>搞笑</FONT></B></td>
      <td><A href="/gaoxiao/List/List_31.html">人物</A></td>
      <td><A href="/gaoxiao/List/List_33.html">动物</A></td>
      <td><A href="/gaoxiao/List/List_34.html">物品</A></td>
      <td><A href="/gaoxiao/List/List_39.html">表情</A></td>
    </tr>
    <tr align=middle bgColor=#f6fefc>
      <td><A href="/gaoxiao/List/List_36.html">签名</A></td>
      <td><A href="/gaoxiao/List/List_32.html">色图</A></td>
      <td><A href="/gaoxiao/List/List_35.html">漫画</A></td>
      <td><A href="/gaoxiao/List/List_40.html">奇闻</A></td>
    </tr>
    <tr align=middle bgColor=#faf4fc>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>美女</FONT></B></td>
      <td><A href="/girl/List/List_57.html">明星</A></td>
      <td><A href="/girl/List/List_58.html">清纯</A></td>
      <td><A href="/girl/List/List_60.html">自拍</A></td>
      <td><A href="/girl/List/List_62.html">欧美</A></td>
    </tr>
    <tr align=middle bgColor=#faf4fc>
      <td><A href="/girl/List/List_61.html">丝袜</A></td>
      <td><A href="/girl/List/List_64.html">卡通</A></td>
      <td><A href="/girl/List/List_59.html">性感</A></td>
      <td><A href="/girl/List/List_63.html">走光</A></td>
    </tr>
    <tr align=middle bgColor=#fdf5f5>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>两性</FONT></B></td>
      <td><A href="/health/List/List_42.html">知识</A></td>
      <td><A href="/health/List/List_43.html">性图</A></td>
      <td><A href="/health/List/List_48.html">孕育</A></td>
      <td><A href="/health/List/List_44.html">技巧</A></td>
    </tr>
    <tr align=middle bgColor=#fdf5f5>
      <td><A href="/health/List/List_46.html">同性</A></td>
      <td><A href="/health/List/List_47.html">单身</A></td>
      <td><A href="/health/List/List_49.html">情感</A></td>
      <td><A href="/health/List/List_45.html">实录</A></td>
    </tr>
    <tr align=middle bgColor=#f3f8fb>
      <td width=33 rowSpan=2><B><FONT color=#ff0000>视频</FONT></B></td>
      <td><A href="/movie/List/List_10.html">写真</A></td>
      <td><A href="/movie/List/List_9.html">搞笑</A></td>
      <td><A href="/movie/List/List_11.html">MTV</A></td>
      <td><A href="/movie/List/List_15.html">翻唱</A></td>
    </tr>
    <tr align=middle bgColor=#f3f8fb>
      <td><A href="/movie/List/List_12.html">写实</A></td>
      <td><A href="/movie/List/List_13.html">片段</A></td>
      <td><A href="/movie/List/List_14.html">游戏</A></td>
      <td><A href="/movie/List/List_16.html">综艺</A></td>
    </tr>
  </table></td>
          </tr>
          <tr>
            <td height=5></td>
          </tr>
        </table>
        <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
          <tr>
            <td align=middle bgColor=#82b3ce height=20><FONT color=#ffffff><STRONG>CSS教程热门文章</STRONG></FONT></td>
          </tr>
          <tr>
            <td>
            <img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014738_24066.html" title="CSS垂直树形下拉菜单" target="_blank">CSS垂直树形下拉菜单</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014923_24119.html" title="CSS+JS实现的选项卡效果(html组件)" target="_blank">CSS+JS实现的选项卡效果(html组</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014816_24087.html" title="用CSS做滑动效果的图片画廊" target="_blank">用CSS做滑动效果的图片画廊</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014924_24120.html" title="用CSS设计高体验的表单显示效果示例" target="_blank">用CSS设计高体验的表单显示效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014906_24112.html" title="网页制作之常用CSS缩写语法总结" target="_blank">网页制作之常用CSS缩写语法总结</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014853_24105.html" title="CSS实现导航条图片的翻转菜单" target="_blank">CSS实现导航条图片的翻转菜单</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014845_24102.html" title="CSS仿淘宝首页导航条按钮布局效果" target="_blank">CSS仿淘宝首页导航条按钮布局效</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014711_24052.html" title="超强，用CSS构建iframe效果" target="_blank">超强，用CSS构建iframe效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014914_24116.html" title="完全CSS写的鼠标悬停tip效果" target="_blank">完全CSS写的鼠标悬停tip效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014911_24114.html" title="对css滑动门技术的一些总结和归纳" target="_blank">对css滑动门技术的一些总结和归</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014841_24099.html" title="用CSS层叠样式表完成可以控制的闪烁效果" target="_blank">用CSS层叠样式表完成可以控制的</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014832_24096.html" title="常用CSS" target="_blank">常用CSS</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014758_24076.html" title="CSS+DIV网页特效欣赏：非常酷的角BANNER" target="_blank">CSS+DIV网页特效欣赏：非常酷的</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014755_24074.html" title="CSS+DIV设计实例：纯CSS制作下拉导航菜单" target="_blank">CSS+DIV设计实例：纯CSS制作下</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014707_24047.html" title="CSS属性中Display与Visibility的不同" target="_blank">CSS属性中Display与Visibility</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014648_24039.html" title="利用CSS控制打印" target="_blank">利用CSS控制打印</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014925_24121.html" title="内联CSS的background-image属性图片相对路径设置失败" target="_blank">内联CSS的background-image属性</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014922_24118.html" title="导航上用CSS标志当前页效果的实现" target="_blank">导航上用CSS标志当前页效果的实</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014917_24117.html" title="CSS的常用技巧放送" target="_blank">CSS的常用技巧放送</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014913_24115.html" title="XHTML+CSS兼容性解决方案小集" target="_blank">XHTML+CSS兼容性解决方案小集</a><br /></td>
          </tr>
        </table>
      </td>
      <td width=1 bgColor=#888888></td>
    </tr>
  </table>
  <table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#ffffff border=0>
    <tr>
      <td bgColor=#888888 height=1></td>
    </tr>
  </table>
  <table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#ffffff border=0>
    <tr>
      <td height=5></td>
    </tr>
    <tr>
      <td align=middle>
      <script language='javascript' src='/ads/cntuba-ads/dn/y6.js'></script></td>
    </tr>
  </table>
  <table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#f5f8fc border=0>
<HR>
    <tr>
      <td class=menu_bottombg align=middle>| <A class=Bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.cntuba.com');" href="#">设为首页</A> | <A class=Bottom href="javascript:window.external.addFavorite('http://www.cntuba.com','世纪中国');">加入收藏</A> | <A class=Bottom href="/ads/adlx.html" target=_blank>服务合作</A> | <A class=Bottom href="/FriendSite/Index.asp" target=_blank>友情链接</A> | <A class=Bottom href="/Copyright.asp" target=_blank>版权申明</A> | <A class=Bottom href="/ads/adlx.html" target=_blank>联系我们</A> | </td>
    </tr>
    <tr>
      <td class=bottom_bg vAlign=top height=50>
        <table height=35 cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
          <tr>
            <td width=90 rowSpan=2>　</td>
            <td width=90 rowSpan=2><IMG height=36 src="/Images1/gongan.gif" width=30 align=right border=0></td>
            <td align=middle width=418>广东广州海珠区 世纪网络工作室 版权所有 上海电信提供网络带宽</td>
            <td align=right width=180></td>
          </tr>
          <tr>
            <td align=middle width=378>信箱: 9297659@qq.com　<A title="" href="http://www.miibeian.gov.cn/" target=_blank><FONT color=#ff0033>粤ICP备06113754号</FONT></A>   
            <script src='http://s15.cnzz.com/stat.php?id=129463&web_id=129463' language='JavaScript' charset='gb2312'></script></td>
            <td align=right></td>
          </tr>
        </table>
      </td>
    </tr>
  </table> 
</body>
</html>