用htc组件制作windows选项卡

  在网页中模拟制作windows风格选项卡的方法可以有很多种,这里向大家介绍一个比较简单的方法——用htc组件制作。

  使用htc的好处是可以自由调用,有点批处理的感觉,例如你有很多网页都要用到这个选项卡,那么你只要做一个htc就可以了,然后在不同的网页中分别调用,而不必重复制作。使用起来很方便,可以节约很多时间。

  具体制作方法如下:

  一、下载mpc.htc

  首先去微软站点下载一个名为mpc.htc的组件,这是制作windows选项卡的原材料。

  二、编辑网页,调用mpc.htc

  1、将html标签写成:

  以下内容为引用: <HTML xmlns:mpc>

  2、建立样式行为:

  以下内容为引用:   <STYLE>

   mpc\:container,mpc\:page{

    behavior:url(mpc.htc);

   }

  </STYLE>

  即mpc\:container和mpc\:page均用行为调用mpc.htc

  3、具体内容调用:

  以下内容为引用: <BODY>

  <div>

  <mpc:container STYLE="width:400; height:200">

  <mpc:page

    ID="name"

    TABTITLE="这里的内容会被鼠标提示"

    TABTEXT="这里是选项卡标签的内容">

  这里是选项卡的具体内容

  </mpc:page>

  <mpc:page TABTITLE="" TABTEXT="">

  </mpc:page>

  </mpc:container>

  </div>

  </BODY>

  这里<mpc:container>标签中用style样式的width和height确定整个选项卡的宽度和高度;然后在<mpc:page>……</mpc:page>标签间中加入选项卡的具体内容,有几个选项就用几组<mpc:page>……</mpc:page>标签。

  附 文章中windows选项卡示例页面的代码:

  以下内容为引用: <HTML xmlns:mpc>

  <HEAD>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <TITLE>mpc</TITLE>

  <STYLE>

  mpc\:container,mpc\:page{

  behavior:url(mpc.htc);

  }

  </STYLE>

  </HEAD>

  <BODY BGCOLOR="#FFFFFF" ONLOAD="oMPC.style.visibility='visible'" text="#000000">

  <div style="position:absolute;height:200;width:400;margin-top:20">

  <mpc:container ID="oMPC" STYLE="width:400; height:200; visibility:hidden">

  <mpc:page ID="tab1" TABTITLE="这是一个表格" TABTEXT="表格 ">

    <table ALIGN="CENTER" STYLE="border:1 solid;font:20pt;

      width:300; height:150; color:white">

    <tr><td VALIGN="MIDDLE" ALIGN="CENTER">这是一个表格</td></tr>

    </table>

  </mpc:page>

  <mpc:page ID="tab2" TABTITLE="这里可以写入文本" TABTEXT="文本文字 ">

    <div STYLE="padding:12px; font:10pt; font-style:italic">

      请在这里写入文字……

    </div>

  </mpc:page>

  <mpc:page ID="tab3" TABTITLE="这是图象" TABTEXT="图象 ">

    <img src="/oblog312/sample.jpg ";border=1 hspace="75" vspace="30">

  </mpc:page>

  <mpc:page ID="tab4" TABTITLE="这是可以是其他内容" TABTEXT="其他内容 ">

    <a href=#><font face="楷体_GB2312" size="2">超级链接</font></a>

  </mpc:page>

  </mpc:container></div>

  </BODY>

  </HTML>

  http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/mpc/mpc.htc

  htc文件放到你选项卡所在htm文件相同的目录下,要么你改页面源代码中下面这段中htc的位置

  mpc\:container   {

  behavior:url(mpc.htc);

  }

  mpc\:page   {

  behavior:url(mpc.htc);

  }