<!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=gb2312" /> <title>无标题文档</title> <link href="http://www.happyshow.org/sample/20060615/css/main.css" rel="stylesheet" type="text/css"> <link href="http://www.happyshow.org/sample/20060615/css/class.css" rel="stylesheet" type="text/css"> <script src="http://www.happyshow.org/sample/20060615/nav.js" type="text/javascript"></script> <script type="text/javascript"> var selectindex = 0; //预设项目 var subclass = new Array() subclass[0] = "<ol><li>·电影</li><li>·餐厅</li><li>·演出</li></ol>"; subclass[1] = "<ol><li>·项链</li><li>·戒指</li><li>·耳环</li></ol>" subclass[2] = "<ol><li>·吃饭</li><li>·旅游</li></ol>" subclass[3] = "<ol><li>·万年历</li><li>·我的生日</li><li>·她的生日</li></ol>" subclass[4] = "<ol><li>·金牛座</li><li>·射手座</li><li>·蝎子座</li><li>·水瓶座</li></ol>" </script> </head> <body onload="preset()"> <div id="con"> <div id="logo"> <img src="http://www.happyshow.org/sample/20060615/images/logo1.gif" width="94" height="75" border="0" align="bottom" /> <img src="/uploadImages/2007-7-6/20077615171131628.gif" width="108" height="63" border="0" align="bottom" style="margin-top:12px;"/> <div id="search"> <input name="userpass2" type="text" class="inputbox1" id="userpass2" /><img src="/uploadImages/2007-7-6/20077615171191736.gif" width="31" height="18" /></div> <div id="nav" > <ul id="itemlist" onmouseout="recover()"> <li><a href="http://www.happyshow.org/sample/20060615/index.html"><span onmouseover="focusthis(this)" class="style0">约会安排</span></a></li> <li><a href="http://www.happyshow.org/sample/20060615/index2.html"><span onmouseover="focusthis(this)" class="style0">礼物安排</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">话题安排</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">日历</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">测试星座</span></a></li> <li><a href="#"><span style="width:15px;padding:0px" class="style0"> </span></a></li> </ul> </div> </div> <div id="subclass"> </div> <div id="content" onmouseover="recover()"> 我的博客：<br /> <a href="http://www.happyshow.org" target="_blank">http://www.happyshow.org</a><br> <br /> <br /> <br /> 导航条的三种状态：<br /><br /> <h5 class="style0">style0</h5> <h5 class="style1">style1</h5> <h5 class="style2">style2</h5> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

已经封装成 js 文件的代码：

// JavaScript Document

[1] [2] 下一页

上一篇:网页特效：图片随机显示实例详解

下一篇:浮动菜单是如何作出来的mouse事件

斜体样式的导航条相关文章：

·教你如何制作QQ空间FLASH导航条

·QQ空间导航代码最新版使用方法

·QQ空间导航代码-QQ空间导航

·ASP.NET 2.0的导航控件treeview和menu的实例

·制作彩色的QQ空间导航栏彰显个性

·Javascript +CSS横向三级导航菜单

·QQ空间动态背景皮肤与导航

·QQ空间超可爱导航条代码

·Flash AS制作的仿苹果机的导航菜单

·用Dreamweaver MX制作导航下拉菜单

斜体样式的导航条相关软件：

·苹果样式图标经典！

·2005年导航-张俊芳-哲学-录音 05

·层叠样式表详解

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.vipcn.net

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved.	鄂ICP备05000083号Powered by:viphot