复古式的立体CSS菜单实例

当前位置 : 首页 > 网页制作 > CSS > 复古式的立体CSS菜单实例

复古式的立体CSS菜单实例

来源: 作者: 时间:2016-01-25 10:02
CSS菜单的制作在CSS网页布局中一直是重头戏,用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 css xhtml xml Example Source Code 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;
}

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

相关文章

网友评论

<