·
网页特效库
·
网页工具库
背景按钮
导航特效
图片特效
文本特效
时间特效
状态特效
另类特效
网页制作
网站首页
< 后退
|
收藏网页特效库
推荐网页特效
购物网站的导航效果,推荐!
向上下左右滚动图片的特效
超级变态广告代码
设为首页
加入收藏夹
防止选择和复制
新浪博客的提示窗口,推荐!
推荐网页工具
在线html编辑器
在线CSS编辑器
滚动条颜色生成器
弹出窗口生成器
网页加密解密工具
汉字转换成拼音工具
文本繁简体转换工具
您的位置:
网页特效库
>>
导航菜单特效
>> 购物网站的导航效果,推荐!
查看此特效演示
购物网站的导航效果,推荐!
把如下代码复制到<head>与</head>之间
<style type="text/css"> <!-- body { FONT-SIZE: 12px; COLOR: #414141; FONT-FAMILY: "宋体", Arial, Helvetica, sans-serif; text-align: center; } .public_top_window { WIDTH: 608px; HEIGHT: 154px; BORDER-RIGHT: #b39f86 1px solid; PADDING-RIGHT: 28px; BORDER-TOP: #b39f86 1px solid; PADDING-LEFT: 28px; PADDING-BOTTOM: 3px; BORDER-LEFT: #b39f86 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #b39f86 1px solid; BACKGROUND-COLOR: #fff } .public_top_window A:link { COLOR: #0041d3; TEXT-DECORATION: none } .public_top_window A:visited { COLOR: #0041d3; TEXT-DECORATION: none } .public_top_window A:hover { COLOR: #ff7000; TEXT-DECORATION: underline } .public_top_window A:active { COLOR: #bc2931; TEXT-DECORATION: underline } .public_top_window { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } .public_top_window ul { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; WIDTH: 688px; PADDING-TOP: 10px; BORDER-BOTTOM: #d1cfd0 1px dotted; liST-STYLE-TYPE: none } .public_top_window ul li { DISPLAY: block; FLOAT: left; WIDTH: 86px; liNE-HEIGHT: 20px } .public_top_window ul h2 { FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; WIDTH: 52px; MARGIN-RIGHT: 14px; PADDING-TOP: 3px; HEIGHT: 16px; BACKGROUND-COLOR: #f6791f; TEXT-AliGN: center } .public_top_window ul h2 A:link { COLOR: #fff; TEXT-DECORATION: none } .public_top_window ul h2 A:visited { COLOR: #fff; TEXT-DECORATION: none } .public_top_window ul h2 A:hover { COLOR: #fff; TEXT-DECORATION: underline } .public_top_window ul .h_bj { BACKGROUND-COLOR: #00a881 } .public_top_window .reduce_h { PADDING-BOTTOM: 5px; HEIGHT: 20px } .n2Pop { border: 0px outset #EEEDDD; background-color:#fff; position:absolute; z-index:200; } .animatedBox { position:absolute; visibility:hidden; border: 1px solid gray; background:white; z-index:220; } .animatedBoxHollow { position:absolute; visibility:hidden; border: 1px solid gray; z-index:220; } --> </style>
把如下代码复制到<body>与</body>之间
<script language="javascript" src="butong_net_1.js" type="text/javascript"></script> <script language="javascript" src="butong_net_2.js" type="text/javascript"></script> <a href="http://www.butong.net/" name=two-tabs|he|all-categories target="_blank">网页特效库</a> <div id=all-categories style="DISPLAY: none;"> <div class=public_top_window> <ul class=reduce_h> <h2><font color=#ffffff>分 类</font></h2> <li><a href="http://www.butong.net/background/index.htm" target="_blank">背景按钮</a></li> <li><a href="http://www.butong.net/navigation/index.htm" target="_blank">导航特效</a></li> <li><a href="http://www.butong.net/img/index.htm" target="_blank">图片特效</a></li> <li><a href="http://www.butong.net/text/index.htm" target="_blank">文本特效</a></li> <li><a href="http://www.butong.net/time/index.htm" target="_blank">时间特效</a></li> <li><a href="http://www.butong.net/state/index.htm" target="_blank">状态特效</a></li> <li><a href="http://www.butong.net/other/index.htm" target="_blank">另类特效</a></li> </ul> <ul class=reduce_h> <h2><font color=#ffffff>分 类</font></h2> <li><a href="http://www.butong.net/background/index.htm" target="_blank">背景按钮</a></li> <li><a href="http://www.butong.net/navigation/index.htm" target="_blank">导航特效</a></li> <li><a href="http://www.butong.net/img/index.htm" target="_blank">图片特效</a></li> <li><a href="http://www.butong.net/text/index.htm" target="_blank">文本特效</a></li> <li><a href="http://www.butong.net/time/index.htm" target="_blank">时间特效</a></li> <li><a href="http://www.butong.net/state/index.htm" target="_blank">状态特效</a></li> <li><a href="http://www.butong.net/other/index.htm" target="_blank">另类特效</a></li> </ul> <ul class=reduce_h> <h2 class=h_bj><font color=#ffffff>分 类</font></h2> <li><a href="http://www.butong.net/background/index.htm" target="_blank">背景按钮</a></li> <li><a href="http://www.butong.net/navigation/index.htm" target="_blank">导航特效</a></li> <li><a href="http://www.butong.net/img/index.htm" target="_blank">图片特效</a></li> <li><a href="http://www.butong.net/text/index.htm" target="_blank">文本特效</a></li> <li><a href="http://www.butong.net/time/index.htm" target="_blank">时间特效</a></li> <li><a href="http://www.butong.net/state/index.htm" target="_blank">状态特效</a></li> <li><a href="http://www.butong.net/other/index.htm" target="_blank">另类特效</a></li> </ul> </div></div>
下载此特效所需的文件:
(一)
(二)
使用说明:使用此特效前请先将上面两个文件下载到使用此特效网页的同一目录中,导航菜单中的内容可在<body>代码部分修改,导航菜单的宽度、高度、边框颜色等样式可在<head>代码部分修改。
上一个特效:
鼠标触发型导航菜单,推荐!
返回列表
下一个特效:
非常精彩的导航菜单,推荐!
关于我们
|
联系本站
|
免责声明
|
版权声明
|
网站地图
|
友情链接
|
鄂ICP备05023174号
Copyright © 2008
www.butong.net
.All Rights Reserved.