用htc组件制作windows选项卡_WEB开发

在网页中模拟制作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 </td> </tr> </table> </div>  <div class="post_tag"> <b>标签：</b> <a href='/tags/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C/'>网页制作</a> </div> <div id="bdshare"> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div>  <div class="commend mt1"> <dl class="tbox relevant-cont"> <dt class='relevant-cont'><strong>相关内容</strong></dt> <dd class='relevant-cont'> <ul> <li>· <a href='/archives/167476.html'>bootstrap中popover.js(弹出框)使用总结+案例</a></li> <li>· <a href='/archives/157365.html'>这些优秀的主流代码编辑器，你用过多少款</a></li> <li>· <a href='/archives/119592.html'>CSS3盒模型介绍及使用方法 _ CSS _ 建站百科</a></li> <li>· <a href='/archives/119586.html'>META标签使用详细介绍</a></li> <li>· <a href='/archives/119585.html'>移动端html5 meta标签的作用</a></li> <li>· <a href='/archives/119567.html'>使用CSS伪类:before, :after在网页插入内容 _</a></li> <li>· <a href='/archives/119566.html'>css实现网页调用服务器端字体@font-face属性</a></li> <li>· <a href='/archives/119556.html'>利用flash制作一个电子相册 _ 动画flash导航</a></li> <li>· <a href='/archives/119545.html'>*{margin: 0; padding: 0}的作用与利弊 _ CSS _ 建站</a></li> <li>· <a href='/archives/119542.html'>div 与 section、article 区别及使用场合</a></li> </ul> </dd> </dl> </div> <div class="dede_pages"> <ul class="pagelist"> </ul> </div>    <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div> <div class="handle"> <div class="context"> <ul> <li>上一篇：<a href='archives/117521.html'>Web网页配色方案及安全色谱</a> </li> <li>下一篇：<a href='archives/117523.html'>同一网页中的不同hover效果</a> </li> </ul> </div>  <div class="actbox"> [<a href="javascript:window.close();">关闭窗口</a>] [<a href="javascript:void(0);" onclick="backTop(this);">返回顶部</a>] </div>  </div>  </div>   </div>   <div class="pright"> <div class="pright"> <div> <dl class="tbox"> <dt><strong>栏目列表</strong></dt> <dd> <ul class="d6"> <li><a href='/list-20.html' class='thisclass'>WEB开发</a></li> <li><a href='/list-21.html'>网页特效</a></li> <li><a href='/list-42.html'>脚本代码</a></li> <li><a href='/list-136.html'>JavaScript</a></li> <li><a href='/list-145.html'>jQuery</a></li> <li><a href='/list-150.html'>HTML</a></li> <li><a href='/list-151.html'>CSS</a></li> </ul> </dd> </dl> </div> <div id="contentRtPicAD" style="margin:10px auto"></div> <div class="commend mt1"> <dl class="tbox light"> <dt class='light'><strong>推荐内容</strong></dt> <dd class='light'> <ul class="d4"> <li><a href="/archives/39315.html">2017年最受欢迎的5个前端框架推荐</a> <p>在这篇文章中，我将对我认为当今最好的 5 个框架进行比较。每...</p> </li> <li><a href="/archives/39314.html">2017年最受欢迎的5个前端框架推荐</a> <p>在这篇文章中，我将对我认为当今最好的 5 个框架进行比较。每...</p> </li> </ul> </dd> </dl> </div>  <div class="hot mt1"> <dl class="tbox light"> <dt class='light'><strong>热点内容</strong></dt> <dd class='light'> <ul class="c1 ico2"> <li><a href="/archives/42.html">Html A标签中 href 和 onclic</a></li> <li><a href="/archives/45.html">瀑布流布局浅析</a></li> <li><a href="/archives/119555.html">HTML5 li 标签之间空白间隔</a></li> <li><a href="/archives/119557.html">HTML5中meter元素详解</a></li> <li><a href="/archives/119566.html">css实现网页调用服务器端</a></li> <li><a href="/archives/119592.html">CSS3盒模型介绍及使用方法</a></li> <li><a href="/archives/111332.html">FCKEditor 中文字体添加与中</a></li> <li><a href="/archives/117615.html">网页设计应该考虑的问题</a></li> <li><a href="/archives/119591.html">CSS3中新增的背景属性（如</a></li> <li><a href="/archives/117782.html">开启FCKeditor编辑器的图片</a></li> </ul> </dd> </dl> </div> <div id="contentRtPicAD2" style="margin:10px auto"></div> </div>  </div> <div id="innerfooterAD2" style="margin:10px auto; width:726px"></div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?db2bea1984c4c601a83a5a1ac99cdd61"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>  <div class="footer w960 center mt1 clear"> <div class="footer_left"></div> <div class="footer_body"> <div id="sitelink"> <ul> <li><a href="#">關於我們</a> |</li> <li><a href="#">聯繫我們</a> |</li> <li><a href="#">免責聲明</a> |</li> <li><a href="#">廣告服務</a> |</li> <li><a href="#">網站地圖</a> |</li> <li><a href="#">投訴建議</a> |</li> <li><a href="#">在線投稿</a> |</li> <li> <script src="https://s13.cnzz.com/z_stat.php?id=1272899812&web_id=1272899812" language="JavaScript"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2bbb67f8513cb18bbff1a4b50a527ece"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </li> </ul> </div> <p class="powered"> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:Rinchey@163.com 我们24小时内处理 <div class="copyright">CopyRight © 2006-2018 指引網 Ondex.Net , All Rights Reserved. <a href="http://www.miitbeian.gov.cn" rel="external nofollow">粤ICP备16026640号-1</a></div></p>  </div> <div class="footer_right"></div> </div>  </body> </html>

搜索

热门标签:

用htc组件制作windows选项卡