很立体的CSS按钮菜单效果

分类 : 代码案例

很立体的CSS按钮菜单效果

很立体的CSS按钮菜单效果

很立体的CSS按钮菜单效果


<style type="text/css">

#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;}

</style>


<div id="menu">


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">

<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item one">ITEM ONE</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="#nogo"><span class="white"><span class="blackc" title="Item two">ITEM TWO</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="#nogo"><span class="white"><span class="blackc" title="Item three">ITEM THREE</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="#nogo"><span class="white"><span class="blackc" title="Item four">ITEM FOUR</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="#nogo"><span class="white"><span class="blackc" title="Item five">ITEM FIVE</span></span></a>

</div></div></div></div></div>


分类: 代码案例    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程


分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

DBC+MySQL入门实战(实现CURD的例子)
JQuery中resetForm与clearForm的区别
js中的 "use strict" 做了什么?使用严格模式有什么优点
html入门网页制作 零基础学习网页制作,从何学起
font-style (italic oblique normal)C
oracle数据库模糊查询匹配多个字符串
oracle sql like多个条件函数
oracle字段like多个条件
上海有什么好玩的地方?
html入门网页制作 零基础学习网页制作,从何学起


最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
C语言程序中break是什么意思?

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16