用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选项卡示例页面的代码。
附 文章中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="图象 "> </di</pre><pre><span>补充：</span>网页制作,设计基础</pre></div><div class="zykmore"><script type="text/javascript" src="/js/s3.js"></script></div><div class="content"><p>上一个：<a href="/show/0a3c62b5365d67e1.htm">网站LOGO设计规范的思考</a><br/>下一个：<a href="/show/4174005c267a8372.htm">导致Web站点崩溃最常见的七大原因</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/52593080fe610b4b.htm"><img src='/upload/2007-10/20071018171610813.jpg' width=105 height=105><br/>[原创]Photoshop切图教程，为了TS里8会切图的XDJM</a></li><li><a href="/show/6a3a61f324f61557.htm"><img src='/upload/2013111617/20131022101534420.png' width=105 height=105><br/>The NIB data is invalid.' foruncaught exception 'NSInternalInconsistencyException'</a></li><li><a href="/show/ba6098b3438c0e7c.htm"><img src='/upload/2013111617/20120128073040260.png' width=105 height=105><br/>2012年看看“开发者们”都想干什么</a></li><li><a href="/show/24aa9366940feafe.htm"><img src='/upload/2013111617/20110520145841891.png' width=105 height=105><br/>对减少HTTP请求的疑问</a></li><li><a href="/show/a25a457e63ace2ab.htm"><img src='/upload/2013111617/20110312152252366.gif' width=105 height=105><br/>互联网产品设计进阶（11）产品设计师的职责</a></li><li><a href="/show/58ccc279b5aa2fb1.htm"><img src='/upload/2013111617/20101207121808496.jpg' width=105 height=105><br/>fatal error C1083: 无法打开包括文件:“atlapp.h”解决方法</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/27_1.htm">网站相关</a>疑问解答：</dt><dd><a target="_blank" href="/show/da444108c3ee5886.htm">点com的文化和设计</a></dd><dd><a target="_blank" href="/show/d0a680e214a1e5e5.htm">网站项目管理规范手册</a></dd><dd><a target="_blank" href="/show/18d422713f89e61d.htm">设计师不可不看----《李永诠设计录》</a></dd><dd><a target="_blank" href="/show/7c9db50114b1d7fc.htm">网站开发规范</a></dd><dd><a target="_blank" href="/show/ab8cf04adc47b44d.htm">设计之心理学研究</a></dd><dd><a target="_blank" href="/show/ad83e28cacf44b28.htm">网页艺术设计初探</a></dd><dd><a target="_blank" href="/show/42090d4536ef8e18.htm">网页设计的八种陋习</a></dd><dd><a target="_blank" href="/show/79e6b279d993f74f.htm">平面构成入门（一）平面构成的基本要素</a></dd><dd><a target="_blank" href="/show/4aa14ff291d70f2f.htm">Web 上图形设计的最佳实践</a></dd><dd><a target="_blank" href="/show/b9df8164c55f569a.htm">平面构成入门（三）平面构成的形式</a></dd><dd><a target="_blank" href="/show/c6404b328977c77b.htm">平面构成入门（二）单形的构成</a></dd><dd><a target="_blank" href="/show/e4be70f35529b33c.htm">网站风格之魂</a></dd><dd><a target="_blank" href="/show/cf9989331927e07d.htm">网站生存的关键---创意</a></dd><dd><a target="_blank" href="/show/e1947d680aef61ad.htm">平面构成入门-平面构成的基本要素</a></dd><dd><a target="_blank" href="/show/e38d6c304d5a923f.htm">从美的原则谈 WWW 网页上的艺术表现 一：美的原则</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>