网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> Windows风格的按钮效果的导航菜单
Windows风格的按钮效果的导航菜单
作者:admin 发布时间:2010-12-2 7:40:57 发布人: admin
<html> <head> <title>Windows风格的按钮效果的导航菜单</title> <style> .button2 { border-right:1px solid buttonhighlight; border-left:1px solid buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px solid buttonshadow } TD { cursor: hand; font-size: 9pt; font-family: 宋体; text-align: center; text-valign: middle } .handin { height:18px; width:2px; border-left:1px solid buttonshadow; border-right:1px solid buttonhighlight } .handout { height:18px; width:2px; border-left:1px solid buttonhighlight; border-right:1px solid buttonshadow; } .into { width:100%; border-right:1px solid buttonhighlight; border-left:1px solid buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px solid buttonshadow } .outto,.button1 { background-color: buttonface; background-repeat: repeat; background-attachment: scroll; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-top: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; background-position: 0%" } .button0 { } </style> </head> <body topmargin="0" leftmargin="0" bgcolor="#E0E0E0"> <script> function change_button(num) { if(event.srcElement.tagName=="TD"&&event.srcElement.value=="button") event.srcElement.className = "button"+num; } </script> <div class="into" style="width: 100%; height: 25"> <table class="outto" border="0" width="100%" height="25" cellspacing="1" onmouseover="change_button(1)" onmouseup="change_button(0)" onmousedown="change_button(2)" onmouseout="change_button(0)"> <tr> <td width="1%" height="19"><span class="handout"></span></td> <a href="http://web.archive.org/web/20150530122956/http://www.0491.com/"><td width="9%" height="19" value="button">团购大全</td></a> <td width="1%" height="19"><span class="handin"></span></td> <a href="http://web.archive.org/web/20150530122956/http://www.zzgjj.com.cn/"><td width="9%" height="19" value="button">链接平台</td></a> <td width="1%" height="19"><span class="handin"></span></td> <a href="http://web.archive.org/web/20150530122956/http://www.bankcha.com/"><td width="9%" height="19" value="button">银行网点</td></a> <td width="1%" height="19"><span class="handin"></span></td> <a href="http://web.archive.org/web/20150530122956/http://www.jz123.cn/"><td width="9%" height="19" value="button">站长之家</td></a> <td width="1%" height="19"><span class="handin"></span></td> <td width="69%" height="19"></td> </tr> </table> </div> </body> </html>
Windows
风格的按钮效果的导航菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
js+css精美二级导航菜单
下一篇:文章:
点击按钮自动向下滚屏
本类浏览排行 »
点击按钮自动向下滚屏
Windows风格的按钮效果的导航菜单
js+css精美二级导航菜单
支付宝样式美观的CSS下拉圆角效果导航菜单..
鼠标感应延时功能的滑动门菜单
同时布局在单个页面中的两个简洁美观的Ta..
css模拟按钮效果的导航菜单
利用CSS的Clip属性来创造多彩文字
本站推荐文章 »
JS实现Li列表的无缝垂直文字滚动代码
带关闭功能的网站顶部滑出的广告提示条
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单