在网页中模拟制作windows风格选项卡的方法可以有很多种，这里向大家介绍一个比较简单的方法——用htc组件制作。
使用htc的好处是可以自由调用，有点批处理的感觉，例如你有很多网页都要用到这个选项卡，那么你只要做一个htc就可以了，然后在不同的网页中分别调用，而不必重复制作。使用起来很方便，可以节约很多时间。
示例页面如下：
具体制作方法如下：
一、下载mpc.htc
首先去微软站点下载一个名为mpc.htc的组件，这是制作windows选项卡的原材料。
二、编辑网页，调用mpc.htc
1、将html标签写成：
<![CDATA[ <HTML xmlns:mpc>]]> 2、建立样式行为：
<![CDATA[ <STYLE>
mpc\:container,mpc\:page{
behavior:url(mpc.htc);
}
</STYLE>
]]> 即mpc\:container和mpc\:page均用行为调用mpc.htc
3、具体内容调用：
<![CDATA[<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>
<br>
<script language=javascript src="/gg/contentad2.js"></script></div>
</DIV>
<div id="gadlink"> <script type="text/javascript"><!--
google_ad_client = "pub-5489821349304640";
//728x15, 创建于 07-12-24
google_ad_slot = "9013909818";
google_ad_width = 728;
google_ad_height = 15;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="gadsearch"> <!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.wzsky.net">
<label for="sbi" style="display: none">输入您的搜索字词</label>
<input type="text" name="q" size="64" maxlength="255" value="" id="sbi">
<label for="sbb" style="display: none">提交搜索表单</label>
<input type="submit" name="sa" value="搜索" id="sbb">
</td></tr>
<tr>
<td> </td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0">
<label for="ss0" title="搜索网络"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.wzsky.net" id="ss1">
<label for="ss1" title="搜索 www.wzsky.net"><font size="-1" color="#000000">www.wzsky.net</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5489821349304640">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="channel" value="4025447517">
<input type="hidden" name="ie" value="GB2312">
<input type="hidden" name="oe" value="GB2312">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#000000;VLC:663399;AH:center;BGC:FFFFFF;LBGC:000000;ALC:333333;LC:333333;T:000000;GFNT:0066CC;GIMP:0066CC;LH:0;LW:0;L:http://www.wzsky.net/php/modpage/img/toplogo.gif;S:http://www.wzsky.net;FORID:1">
<input type="hidden" name="hl" value="zh_CN">
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
</DIV>
<DIV id=sidebar>
<div id="cats">
<div id="catstopad">
<IFRAME marginWidth=0 src="/gg/catsad.htm" frameBorder=0 width=220 scrolling=no height=91 marginheigh=0></IFRAME>
<IFRAME marginWidth=0 src="/gg/catsad1.htm" frameBorder=0 width=220 scrolling=no height=201 marginheigh=0></IFRAME>
<DIV class=clear></DIV>
</div>
<H2>相关栏目导航</H2>
<UL> <li> <a href="/html/Website/Dreamweaver" title="Dreamweaver">Dreamweaver</a> </li> <li> <a href="/html/Website/Javascript" title="JavaScript">JavaScript</a> </li> <li> <a href="/html/Website/Color" title="网页配色">网页配色</a> </li> <li> <a href="/html/Website/htmlcss" title="html语言教程">html语言教程</a> </li> <li> <a href="/html/Website/CSS" title="CSS教程">CSS教程</a> </li> <li> <a href="/html/Website/seo" title="SEO技术">SEO技术</a> </li> <li> <a href="/html/Website/FrontPage" title="FrontPage">FrontPage</a> </li> <li> <a href="/html/162" title="网站运营">网站运营</a> </li> <li> <a href="/html/163" title="网赚技巧">网赚技巧</a> </li> </UL>
<DIV class=clear></DIV>
</div>
<DIV id=cattop> <H2>相关文章</H2>
·<a href='/html/Website/Experience/72984.html'>全新无边框窗口实现方式</a><br>
·<a href='/html/Website/Experience/72983.html'>给自己做的网页加上一把锁</a><br>
·<a href='/html/Website/Experience/72982.html'>在网页上制作精美的“立体表格”</a><br>
·<a href='/html/Website/Experience/72981.html'>关于韩国网站的风格的探讨</a><br>
·<a href='/html/Website/Experience/72980.html'>google hacking的实现以及应用</a><br>
</DIV>
<DIV id=catrecom> <H2>推荐文章</H2>
·<a href='/html/Website/Experience/97511.html'>2008网页版式风向标-黑底炫彩设计</a><br>·<a href='/html/Website/Experience/91457.html'>网幅广告点评之联想S手机 粉流形</a><br>·<a href='/html/Website/Experience/89175.html'>网页制作参考：网页设计制作规范</a><br>·<a href='/html/Website/Experience/86756.html'>旧金山Web2.0大展评出的全球最佳</a><br>·<a href='/html/Website/Experience/83744.html'>Yahoo!韩国设计探讨</a><br></DIV>
<DIV id=cattop> <H2>热门文章</H2>
·<a href='/html/Website/Experience/30816.html'>个人网站定位\网站发展\网站运营</a><br>·<a href='/html/Website/Experience/83368.html'>网页信息的表现类型和常见的排版</a><br>·<a href='/html/Website/Experience/83134.html'>2007流行网站导航设计欣赏</a><br>·<a href='/html/Website/Experience/30815.html'>大学生IT创业计划书</a><br>·<a href='/html/Website/Experience/81167.html'>太有创意了!看看这些让人称绝的4</a><br></DIV>
<div id="cats">
<div id="catstopad">
<script language=javascript src="/gg/catsad2.js"></script>
<IFRAME marginWidth=0 src="/gg/catsad3.htm" frameBorder=0 width=220 scrolling=no height=201 marginheigh=0></IFRAME>
<DIV class=clear></DIV>
</div>
</div>
</DIV>
</DIV>
</DIV>
</div>
<DIV class=bgcontain>
<div id=bannerL>
<script language=javascript src="/gg/Listdesignfootad.js"></script>
</div>
</DIV>
<DIV class=bgcontain>
<div class=footer>
<div id=foot><a href="/SiteMap.Html">网站地图</a> | <a href="/about.htm">关于我们</a> | <a href="/about.htm">联系我们</a> | <a href="/adserver.htm">广告联系</a> | <a href="/copyright.htm">版权声明</a> | <a href="/Hot.html">本站热门</a> | <a href="/new.html">最近更新</a> | <a href="/Recommendation.html">本站推荐</a> | <a href="/about.htm">我要投稿</a><br>Copyright© 2007 wzsky.net All Rights Reserved. <a href="http://www.miibeian.gov.cn/" >浙ICP备05018788号</a>
版权所有:设计前沿 版本:DesignFront V2007 站长:平淡是真<br><script src="/php/count.php?artID=72985&view=yes" type="text/javascript"></script> <script language=javascript src="/gg/51.js"></script>
</div>
</div>
</DIV>
<script language=javascript src="/php/modpage/Std_StranJF.Js"></script>
</body>
</html>
]]>
收藏到QQ书签