日期:2014-05-16  浏览次数:20667 次

复古式的立体CSS菜单实例
CSS菜单的制作在CSS网页布局中一直是重头戏,用CSS制作菜单重要的是语义,结构简单,形式更加的灵活。
  今天的这一款菜单仅是作为小品来展示,其编码并不可取,我们通这个实例可以看到CSS功能的强大与形式的灵活,在具体的工作中不可以用此案例进行应用。因为其代码太冗余了。

  更多的CSS菜单制作知识,您可以参考大量的教程与实例,相信你一定会有更多的收获。
  关于CSS菜单的网址:
  http://www.52css.com/search.asp?SearchContent=%E8%8F%9C%E5%8D%95
  关于CSS导航的网址:
  http://www.52css.com/search.asp?SearchContent=%E5%AF%BC%E8%88%AA

  这款复古式的立体CSS菜单实例具有典型的90年代风格。整个菜单的实现不应用一张图片,全部通过CSS进行控制。重申,本实例仅是作为小品来展示,其编码并不可取,我们通这个实例可以看到CSS功能的强大与形式的灵活。看最终的效果如下图所示。


我们来看HTML编码:

div css xhtml xml Example Source Code Example Source Code
<div id="menu">
<div class="cond">
    <div class="conc">
        <div class="conb">
            <div class="cona">
                <div class="black">
                <a class="switch" href="http://www.52css.com/default.asp?cateID=3" target="_blank">
                    <span class="white">
                        <span class="blackc" title="Div+CSS教程">Div+CSS教程</span>
                    </span>
                </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="cond">
    <div class="conc">
        <div class="conb">
            <div class="cona">
                <div class="black">
                <a class="switch" href="http://www.52css.com/default.asp?cateID=9" target="_blank">
                    <span class="white">
                        <span class="blackc" title="CSS布局实例">CSS布局实例</span>
                    </span>
                </a>
                </div>
            </div>
      &nbs