复古式的立体CSS菜单实例

2022-05-29 13:57:17

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编码：

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>
        </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=5" target="_blank">
                    <span class="white">
                        <span class="blackc" title="CSS2.0教程">CSS2.0教程</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/css_websites_showcase/" target="_blank">
                    <span class="white">
                        <span class="blackc" title="CSS酷站欣赏">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/css_template/" target="_blank">
                    <span class="white">
                        <span class="blackc" title="CSS模板下载">CSS模板下载</span>
                    </span>
                </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

我们再看CSS编码：

Example Source Code

#menu {
    display:block;
    position:relative;
    background:#edebdc;
    width:112px;
    padding:25px;
    border:1px solid #000;
    margin:0 auto;
}
.white {
    position:absolute;
    width:100px;
    height:20px;
    color:#fff;
    background:#fff;
    border-top:1px solid #ffdc56;
    border-right:1px solid #957704;
    border-bottom:1px solid #937603;
    border-left:1px solid #ffdc56;
    overflow:hidden;
    text-align:center;
}
.blackc {
    position:absolute;
    top:0;
    left:0;
    width:98px;
    height:18px;
    color:#000;
    font-family:verdana;
    font-size:11px;
    font-weight:bold;
    overflow:hidden;
    border-top:1px solid #ffd42e;
    border-right:1px solid #caa205;
    border-bottom:1px solid #c9a105;
    border-left:1px solid #ffd42e;
    overflow:hidden;
    text-align:center;
    line-height:15px;
    background:#fc0;
}
.black {
    position:relative;
    top:0;
    left:0;
    width:102px;
    height:22px;
    border:1px solid #000;
}
.cona {
    position:relative;
    top:0;
    left:0;
    width:105px;
    height:25px;
    border-top:1px solid #d5d3ca;
    border-left:1px solid #d5d3ca;
    background:#f7f6ef;
}
.conb {
    position:relative;
    top:0;
    left:0;
    width:107px;
    height:27px;
    border-top:1px solid #b8b7af;
    border-left:1px solid #b8b7af;
    background:#f7f6ef;
}
.conc {
    position:relative;
    top:0;
    left:0;
    width:109px;
    height:29px;
    border-top:1px solid #9c9b95;
    border-left:1px solid #9c9b95;
    background:#f7f6ef;
}
.cond {
    position:relative;
    top:0;
    left:0;
    width:111px;
    height:31px;
    border-top:1px solid #d5d3ca;
    border-left:1px solid #d5dc3a;
    background:#fff;
    margin-top:2px;
}
#menu a.switch:visited {
    text-decoration:none;
}
#menu a.switch {
    color:#c00;
    text-decoration:none;
    position:absolute;
}
#menu a.switch:hover {
    color:#c00;
    background:#edebdc;
    cursor:pointer;
}
#menu a.switch:hover .white {
    position:absolute;
    width:100px;
    height:20px;
    color:#fff;
    background:#fff;
    border-bottom:1px solid #ffdc56;
    border-left:1px solid #957704;
    border-top:1px solid #937603;
    border-right:1px solid #ffdc56;
    overflow:hidden;
    text-align:center;
}
#menu a.switch:hover .blackc {
    position:absolute;
    top:0;
    left:0;
    width:98px;
    height:18px;
    color:#000;
    font-size:11px;
    font-weight:bold;
    overflow:hidden;
    border-bottom:1px solid #ffd42e;
    border-left:1px solid #caa205;
    border-top:1px solid #c9a105;
    border-right:1px solid #ffd42e;
    overflow:hidden;
    text-align:center;
    line-height:17px;
    background:#eb0;
}

▲▲▲　>>>点击这里查看最终效果<<<
　　
　　

复古式的立体CSS菜单实例,布布扣,bubuko.com

复古式的立体CSS菜单实例

码农公寓

相关文章