网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.css(div+span)padding的使用.
.FF下神秘的不起作用的CSS.
.文字超出显示省略号==CSS制作.
.鼠标经过背景变色之CSS+DIV方法.
.如何像table一样对层div进行轻松.
.CSS定义DIV圆角边框.
.实现页面图片阴影特效.
.CSS初学者应该保持的一种心态.
.最常用的12种CSS BUG解决方法与技.
.css应用笔记整理之结构编写.
.CSS创建圆角框.
.CSS制作很漂亮的文字滑动效果.
.利用CSS层叠(cascade)处理样式冲.
.用css让图片自动适应大小.
.CSS网页代码编写技巧:隔行换色的.
.CSS笔记-除了a标签外的hover属性.
.CSS缩写语法总括.
.div+css布局漫谈.
.CSS初级入门:样式的多次声明.
.初学CSS和标准建站的一些CSS常用.

很立体的CSS按钮菜单效果

发表日期:2008-8-6


<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>

上一篇:CSS Hack兼容大全,令您的网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari… 人气:1199
下一篇:CSS运用的二十四则技巧 人气:1054
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐