【www.gdgbn.com--win10】

在网页中模拟制作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> <mpc:container STYLE="width:400; height:200">   <mpc:page     ID="name"     TABTITLE="这里的内容会被鼠标提示"     TABTEXT="这里是选项卡标签的内容">   这里是选项卡的具体内容   </mpc:page>   <mpc:page TABTITLE="" TABTEXT="">   </mpc:page> </mpc:container> </BODY>
  这里<mpc:container>标签中用style样式的width和height确定整个选项卡的宽度和高度;然后在<mpc:page>……</mpc:page>标签间中加入选项卡的具体内容,有几个选项就用几组<mpc:page>……</mpc:page>标签。

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

附 文章中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"> <mpc:container ID="oMPC" STYLE="width:400; height:200; visibility:hidden">   <mpc:page ID="tab1" TABTITLE="这是一个表格" TABTEXT="表格 ">          这是一个表格        </mpc:page>   <mpc:page ID="tab2" TABTITLE="这里可以写入文本" TABTEXT="文本文字 ">            请在这里写入文字……        </mpc:page>   <mpc:page ID="tab3" TABTITLE="这是图象" TABTEXT="图象 ">     </HTML></BODY></HTML>

本文来源:http://www.gdgbn.com/caozuoxitong/14033/