设为首页
联系站长
加入收藏

您的位置: 首页>>IT业界>>互联网>>正文
 HTML制作微软栏目导航
 日期:2005-7-16 11:58:51  来源:100down.com
今天在MSDN上看到一个好东西。什么?你还没看到过?那快去看看吧,网址:
http://msdn.microsoft.com

  看到了吗?就是右边那个栏目导航啊!什么?你不觉得它有什么好?那让我来说说他有哪些特性吧:

  1、内容可折叠。

  这个都没什么特殊的,大家都见多了。再看

  2、没有使用层,完全用表格实现!(你会吗?:)

  3、可拖动换位置!

  这个功能就很不错了!你可以把自己喜欢的常去的栏目放到最上面,这样就不必去动滚动条了。也许你会说每次访问都要拖一下,还不是一样麻烦?哈哈,这样想就错了,让我们来看看它最伟大的一点吧,就是:

  4、可以记忆本次拖动后的各栏目位置及状态!

  也就是说,你第一次打开这个网页,拖好位置后,关闭浏览器,第二次再进入这个页面的时候,菜单会自动切换到你上次拖好的状态现在是不是觉得这是个好东西了啊?(不过前提是你有ie5以上的浏览器:))

  哈哈,好东西大家分享嘛!看我不把它弄回来!嘿嘿!不过越是好的东西,就越难到手。为了弄到它,我可是颇费了一番工夫,其中死了多少脑细胞就不提了!看看我最后得到的东西吧:

  先下载这些文件:
   webparts.htc ie.css chevronDown.gif chevronUp.gif
   downlevel.gif gripblue.gif gripGray.gif

  我已经对他们进行了修改。gif文件是栏目标题的图片,可以用自己的,但要保证文件名一样。把他们放在同一目录,然后在该目录下新建你自己的页面。打开css面版,选择ie.css为该页的外联样式文件。

  下面就可以开始制作导航栏了!

  1、新建一个1x1的表格用来放整个导航栏目,设置这个表格的ID属性为topTable选择它css式样为clsPartContainer.

  (注意这些都是必要步骤,而且要注意大小写!)2、在topTable里插入一个两行一列的表格,并设置它的ID属性(这个id属性可以随便设置,但每个栏目ID要不同),

  第一行是栏目标题把它拆分为3列,选中前面两个单元格设置css属性为clsPartHead,第三个单元格为clsPartRight。

  然后在第一个单元插入图片gripblue.gif,第三个单元格插入chevronUp.gif。

  选中这个cheveronUp.gif文件在代码编辑状态给它加上 class=clsMinimize 这个属性:

<img src="chevronUp.gif" width="25" height="19" class=clsMinimize>

  在第二个单元格插入图片或文字可以自己根据需要来定,但是要保证一点:

  第二个单元格里至少有一对html标记!也就是说光有文字还不行你得给它加上标记!比如:

<div>Topic1</div>、<b>Topic1</b>、<font color="FFFF99"> Topic</font> 这些都行!

  表格的第二行就是栏目的内容了。可以自己随便写。

  3、重复步骤2做好其他的导航栏。

  4、在<body>前加入如下代码:

<script>
var sContentID = XXXXXXX;
</script>

  注意,XXXXXXX你可以自己随便乱写一个随机的数字。它是一个表标识,用来却定当前页面保存的数据(导航栏状态)。

  如果你有两个页面,并且两个页面的导航栏不一样,你想它们都能分别保存自己的状态就要设置不同的sContentID值。

  5、在你的<body>区加入这行:

<div class=storeUserData id=oLayout></div>

  这行是个空标记,用来实现数据保存的。

  6、好啦!讲了这么多!现在终于大功告成了!是不是很麻烦啊?没办法,好东西就是这样的啦,比你自己写还是要来的方便吧?

  关于这个导航栏实现的原理有兴趣的朋友可以研究一下。它使用了ie内建behavior.saveUserDate来保存网页放数据在浏览器端。

  事实上IE的很多新特性都是很实用的。烦人的是一个兼容性问题 ,为什么这些实用的功能其它浏览器就不支持呢?

相关文章

·XML 取得元素的字符数据
·XML 使用NodeList对象
·编写跨浏览器的DHTML应用程序
·HTML网页中制作线条的技巧
·初探SSI网页制作
·关于超文本文件扩展名的约定
·不用询问关闭一个独立的窗口代码
·HTML设置浏览器的滚动条颜色
·使用HTML 4.0制作表格
·两个表格[Table]可以左右排放吗


阅读排行

·Win 2000不能访问Win XP的原因及
·解析Windows中的帐户和权限功能
·如何共享Windows XP操作系统
·Windows XP Service Pack 1
·通过 Windows XP 注册表自定义您
·Windows 2000 TCP/IP协议概述
·Windows 2000 Server TCP/IP协议
·dos常用命令使用说明
·Windows变慢原因分析及解决方法(
·Windows变慢原因分析及解决方法(
·WINXP下强行关闭“杀”不了的进程
·Windows XP系统注册表的恢复

最新文档

·创业激情需冷静 网络代理选择应理
·域名交易平台亟需规范 预防域名买
·Travel旅游域名即将引发抢注潮 
·从原理深处分析如何预防arp攻击
·突破建站弊端 企业网络营销大有可
·如何区分进程和病毒?
·java的基础知识,如何学好java
·微机原理与接口技术基础知识
·如何解决青少年沉迷网络的问题,
·全面分析主板BIOS报警信号

请您注意:
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·您在本站发表的作品,本站有权在网站内转载或引用
·其他网站如果需要转载 本站文章请在贵站著名来源,谢谢合作