广告服务
|
收藏本页
|
设为首页
|
登录
|
注册
退出
|
管理
Alexa排名查询
|
广告代码
|
发布源码
首页
学院
源码
软件
书籍
模板
图标
图片
字体
酷站
特效
工具
论坛
阿里西西通告:
ASP教程
|
PHP教程
|
JSP教程
|
.NET教程
|
CGI教程
|
XML教程
|
AJAX教程
|
HTML
|
网站重构
|
CSS教程
|
JS教程
|
网页设计
|
数据库
|
服务器
|
开发工具
|
网站运营
ASP源码下载
|
ASP.NET源码下载
|
PHP源码下载
|
JSP源码下载
|
CGI源码下载
|
FLASH源码下载
|
AJAX源码下载
|
办公OA源码
|
网店商城
|
公司网站源码
|
整站源码
代码编程
|
界面设计
|
加解密
|
开发辅助
|
浏览阅读
|
装机必备
|
IIS软件
|
FTP软件
|
安全软件
|
远程监控
|
邮件系统 |
虚拟主机 |
web服务 |
组件
|
设计软件
|
数据库
网站运营
|
ASP电子书
|
PHP电子书
|
.NET电子书
|
JSP电子书
|
CGI
|
数据库XML
|
服务器
|
HTML
|
设计教程
|
AJAX
|
JAVA/J2EE
|
C语言
|
VB
|
DELPHI
|
安全
|
其它
论坛程序模板
|
医疗网站
|
产品网页
|
商务网站
|
主机网站
|
旅游网站
|
体育
|
娱乐
|
艺术网站
|
建筑网页
|
动植食物
|
人物网站
|
教育网页
|
企业网站
|
简约
|
另类
系统
|
房屋
|
苹果
|
文件夹
|
电脑
|
影视
|
动植物
|
表情
|
系列图标
|
软件
|
文件
|
游戏
|
工具
|
CD光盘
|
交通
|
人物
|
食物
|
体育
|
国旗
|
卡通
|
标志
|
桌面图标
风景图片
|
花草图片
|
水资源图片
|
动物图片
|
美食图片
|
人物图片
|
抽象
|
民族艺术
|
静物图片
|
宇宙图片
|
建筑图片
|
装修图片
|
科技交通
|
体育图片
|
精美图片
书法家字体
|
迷你
|
金梅
|
汉仪
|
华文
|
长城
|
创艺
|
汉鼎
|
金桥
|
文鼎
|
微软
|
超世纪
|
中国龙
|
四通利方
|
华康
|
经典
|
王汉宗
|
中文
|
条形码
|
英文
|
其它
韩国酷站
|
欧美酷站
|
中国酷站
|
日本酷站
|
黑色酷站
白色酷站
|
灰色酷站
|
红色酷站
|
橙色酷站
|
黄色酷站
|
绿色酷站
|
青色酷站
|
蓝色酷站
|
紫色酷站
广告代码特效
|
导航条代码
|
菜单特效
|
日期时间
|
背景图像
|
图层样式
|
鼠标特效代码
|
页面窗口
|
色彩表格
|
文字特效
|
表单按钮
|
计数转换
|
游戏特效
|
实例特效
网站免费登陆
|
Alexa排名查询
|
广告代码下载
|
站长工具
|
查询工具
|
色彩工具
|
技术手册查询
|
WHOIS信息查询
|
PR值查询
|
收录查询
|
极品万年历
|
身份证查询
网络编程技术
|
网页设计制作
|
原创作品点评
|
程序员互动
|
求职招聘
|
服务器主机
|
域名交易
|
建站源码发布
|
网站推广
|
站长链接交换
|
站长赚钱讨论
|
交易广告信息
当前位置:
网页特效
>
网页特效演示页
菜单导航特效
日期时间特效
背景图像特效
图层样式特效
鼠标特效代码
页面窗口特效
色彩表格特效
文字特效代码
表单按钮特效
计数转换特效
游戏网页特效
实例网页特效
web2.0精致导航下拉菜单代码 - 网页特效代码演示 - 特效代码运行
以下是HTML网页特效代码,点击运行按钮可查看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Alone's blog--导航</title> <style> /* for all */ a:link,a:visited{color:#2f5795;text-decoration:none;} a:hover,a:active{color:#000;} *{ margin:0; padding:0;} li{list-style:none;vertical-align:middle;} ol li{list-style:inside decimal; padding-left:6px;} img{ border:0;} .FL{float:left;} .FR{float: right;} .Hide{border-top:1px solid transparent !important;margin-top:-1px !important;border-top:0;margin-top:0;clear:both;visibility:hidden;} /*结构布局*/ body{font:12px/21px "宋体";color:#000;text-align:center;} .Wp {text-align:left; margin:0 auto;width:880px;} #Head{height:35px; background:#323334 url(img/navbg1.jpg) repeat-x; width:100%;background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;} /*公用*/ #Head .Wp{height:32px;} #Head h1{ float:left;} #nav{ float:right;border-left: 1px solid #818488;border-right: 1px solid #323334;} #nav li{ float:left;} #nav li a{width:78px; height:32px;border-right:1px solid #818488;border-left:1px solid #323334; display:block; font: bold 14px/32px "宋体";text-align:center;} #nav a:link,#nav a:visited{color:#fff;text-decoration:none} #nav a:hover,#nav a:active,#hover{color:#fff;font: bold 16px/32px "宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;} /*一级菜单*/ #downall{position:absolute;top:33px;margin:0;padding:0;} #product{position:absolute;top:33px;margin:0;padding:0;} #product1{position:absolute;top:33px;margin:0;padding:0;} #product2{position:absolute;top:33px;margin:0;padding:0;} #product3{position:absolute;top:33px;margin:0;padding:0;} #downall li,#product li,#product1 li,#product3 li,#product2 li{ float:none} #downall li a,#product li a,#product1 li a,#product3 li a,#product2 li a{ width:130px; height:24px;border-bottom:1px dotted #818488; display:block; font:12px/24px "微软雅黑", "宋体";color:#fff; } #downall a:link,#downall a:visited,#product a:link,#product a:visited,#product1 a:link,#product1 a:visited,#product2 a:link,#product2 a:visited,#product3 a:link,#product3 a:visited{text-decoration:none;background:#3f4249} #downall a:hover,#downall a:active,#product a:hover,#product a:active,#product1 a:hover,#product1 a:active,#product2 a:hover,#product2 a:active,#product3 a:hover,#product3 a:active{font: bold 12px/24px "微软雅黑","宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;} </style> <script language="javascript"> // JavaScript Document function $(s) { return document.getElementById(s)?document.getElementById(s):s; } function findPosX(obj) { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } var currPcnNav=null; function pcnNav(o){ var offLeft = findPosX(o); var offTop = findPosY(o); var arrNav=document.getElementById("subNav").getElementsByTagName("ul"); if (currPcnNav!=null) { hidPcnNav(currPcnNav); } if (o.getAttribute("urn")!="null") { shwPcnNav($(o.getAttribute("urn")),offLeft); currPcnNav=$(o.getAttribute("urn")); document.body.onmouseup=function(){ hidPcnNav(currPcnNav); } } else { currPcnNav?hidPcnNav(currPcnNav):""; } } function shwPcnNav(o,n){ o.style.display=""; o.style.left=n+"px"; } function hidPcnNav(o){ o.style.display="none"; document.body.onmouseup=null; } function pcnNavInit(){ var arrNav=document.getElementById("nav").getElementsByTagName("a"); for (var i=0;i<arrNav.length;i++ ) { arrNav[i].onmouseover=function(){ pcnNav(this); } } } window.onload=pcnNavInit; </script> </head> </head> <body> <div id="Head"> <div class="Wp"> <ul id="nav"> <li id="hover"><a urn="null" href="#">Alone</a></li> <li><a urn="downall" href="#">Alone</a></li> <li><a urn="product" href="#">Alone</a></li> <li><a urn="product1" href="#">Alone</a></li> <li><a urn="product2" href="#">Alone</a></li> <li><a urn="product3" href="#">Alone</a></li> <li><a urn="null" href="#">Alone</a></li> </ul> </div> </div> <div id="subNav"> <ul id='downall' style="display:none;"> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> </ul> <ul id='product' style="display:none;"> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> </ul> <ul id='product1' style="display:none"> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> </ul> <ul id='product2' style="display:none"> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> </ul> <ul id='product3' style="display:none"> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> <li><a href="http://www.hnctsd.cn/blog/">Alone's blog</a></li> </ul> </div> <div style="margin-top:50px"><h4>转载请著名作者:Alone</h4></div> </body> </html>
欢迎访问阿里西西网页特效代码站,js.alixixi.com
[提示:可先修改代码再按运行]
刚被其它网友点击的网页特效
特效标题
预览特效
点击
运行特效
叫你计算机“爬”着工作
运行
101
可控制的移动小窗口
运行
75
骇客帝国的感觉 (低配置的机...
运行
130
载入信息动画 每次刷新效果还...
运行
63
键盘控制窗口移动的特效
运行
34
特效代码:载入Loadbar 另一...
运行
122
网页特效:显示可移动的层并...
运行
141
仿Office 2003的工具条[网页特效]
运行
148
让屏幕抖动一阵一下的按钮
运行
52
点击按钮就可以实现自动向下...
运行
33
鼠标感应抖动的按钮,速度可...
运行
39
网页内部做个标记,以便迅速定位
运行
51
仿LightBox效果全屏提示框
运行
3210
全屏按钮
运行
80
[弹窗特效]点击单选框radio弹...
运行
1809
点击弹出提示信息时页面背景...
运行
1813
对网页滚动条的隐藏及显示控制
运行
81
仿软件浮动按钮 带连接的按钮
运行
150
正在加载网页时的进度条效果特效
运行
1373
禁止别人使用"另存为&quo...
运行
1321
仿QQ右下角弹出消息窗口特效代码
运行
2518
图片模拟滚动条网页特效
运行
1395
网页中某一区域的颜色变化
运行
45
在自己的站内建立一个GOOGLE...
运行
191
文本飞出的动画效果
运行
86
如何在网页中显示特殊字符
运行
135
JAVA-LED
运行
450
层钟表,cppl 且固定在右下角
运行
454
八种风格的时间日期
运行
304
时间日期在状态栏显示
运行
192
搜索查询面板
本月特效排行
令人震撼的图片展示效果
[运行]
简单的Ajax标签导航效果,兼...
[运行]
web2.0精致导航下拉菜单代码
[运行]
一个超酷弹出窗口的小效果
[运行]
JS仿flash动态切换(横向,带...
[运行]
一个无缝滚动代码(兼容IE、FF)
[运行]
精致导航下拉菜单
[运行]
一个伸缩效果,把innerHTML==&q...
[运行]
无间断循环滚动(兼容IE、FF)
[运行]
JS树形菜单
[运行]
更多...
本周特效排行
令人震撼的图片展示效果
[运行]
简单的Ajax标签导航效果,兼...
[运行]
web2.0精致导航下拉菜单代码
[运行]
一个超酷弹出窗口的小效果
[运行]
JS仿flash动态切换(横向,带...
[运行]
精致导航下拉菜单
[运行]
一个无缝滚动代码(兼容IE、FF)
[运行]
一个伸缩效果,把innerHTML==&q...
[运行]
无间断循环滚动(兼容IE、FF)
[运行]
JS树形菜单
[运行]
更多...
本日特效排行
flash效果的div+css导航菜单
[运行]
QQ在线客服代码,飘浮在右侧的...
[运行]
漂亮的loading加载效果特效
[运行]
可选择左右滚动的菜单,带缓动效果
[运行]
仿腾讯滔滔登陆界面的网页特效
[运行]
下滑菜单
[运行]
网页背景音乐播放器
[运行]
流畅的向上滚动新闻代码特效
[运行]
看你能坚持多少秒
[运行]
漂亮的立体表格效果特效
[运行]
更多...
网页特效即时演示功能V1.02 - 阿里西西
关于我们
·
免责声明
·
广告服务
·
版权隐私
·
联系我们
·
友情链接
·
网站地图
·
免费收录
·
本站技术QQ群:17701495
Copyright 2004-2008 © Alixixi.com
粤ICP备05097156号