随着Web技术的不断发展，其功能越来越强大，以至于能完成许多应用程序的工作！Web技术以其简便、快捷的优越性，使很多应用程序在向Web技术转变。如Microsoft近几年的产品：Windows Media 服务管理器直接应用网页式管理，而IIS管理也可通过网页来完成。

当人们都习惯一种东西时，突然冒出个新东西会很不适应。所以不但要用网页来实现应用程序的功能，而且界面上也要相似，这样更容易使人接受。下面我们就举几个模仿应用程序界面的例子。希望大家不仅仅局限与这几个例子，充分发挥自己的想象力，设计出更多，更好的界面！

1、模拟系统颜色选择框

运行代码框
<HTML><HEAD><TITLE>颜色</TITLE><META content="text/html; charset=gb2312" http-equiv=Content-Type><STYLE type=text/css>TD {FONT-SIZE: 10.8pt}BODY {FONT-SIZE: 10.8pt}BUTTON {WIDTH: 5em}</STYLE><SCRIPT language=JavaScript>var SelRGB = '';var DrRGB = '';var SelGRAY = '120';var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');function ToHex(n){ var h, l;n = Math.round(n);l = n % 16;h = Math.floor((n / 16)) % 16;return (hexch[h] + hexch[l]);}function DoColor(c, l){ var r, g, b;r = '0x' + c.substring(1, 3);g = '0x' + c.substring(3, 5);b = '0x' + c.substring(5, 7);if(l > 120){l = l - 120;r = (r * (120 - l) + 255 * l) / 120;g = (g * (120 - l) + 255 * l) / 120;b = (b * (120 - l) + 255 * l) / 120;}else{r = (r * l) / 120;g = (g * l) / 120;b = (b * l) / 120;}return '#' + ToHex(r) + ToHex(g) + ToHex(b);}function EndColor(){ var i;if(DrRGB != SelRGB){DrRGB = SelRGB;for(i = 0; i <= 30; i ++)GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);}SelColor.value = DoColor(RGB.innerText, GRAY.innerText);ShowColor.bgColor = SelColor.value;}</SCRIPT><SCRIPT event=onclick for=ColorTable language=JavaScript>SelRGB = event.srcElement.bgColor;EndColor();</SCRIPT><SCRIPT event=onmouseover for=ColorTable language=JavaScript>RGB.innerText = event.srcElement.bgColor;EndColor();</SCRIPT><SCRIPT event=onmouseout for=ColorTable language=JavaScript>RGB.innerText = SelRGB;EndColor();</SCRIPT><SCRIPT event=onclick for=GrayTable language=JavaScript>SelGRAY = event.srcElement.title;EndColor();</SCRIPT><SCRIPT event=onmouseover for=GrayTable language=JavaScript>GRAY.innerText = event.srcElement.title;EndColor();</SCRIPT><SCRIPT event=onmouseout for=GrayTable language=JavaScript>GRAY.innerText = SelGRAY;EndColor();</SCRIPT><SCRIPT event=onclick for=Ok language=JavaScript>window.returnValue = SelColor.value;window.close();</SCRIPT><META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD><BODY bgColor=menu><DIV align=center><CENTER><TABLE border=0 cellPadding=0 cellSpacing=10><TBODY><TR><TD><TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTablestyle="CURSOR: hand"><SCRIPT language=JavaScript>function wc(r, g, b, n){r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');}var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);for(i = 0; i < 16; i ++){document.write('<TR>');for(j = 0; j < 30; j ++){n1 = j % 5;n2 = Math.floor(j / 5) * 3;n3 = n2 + 3;wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);}document.writeln('</TR>');}</SCRIPT><TBODY></TBODY></TABLE></TD><TD><TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTablestyle="CURSOR: hand"><SCRIPT language=JavaScript>for(i = 255; i >= 0; i -= 8.5)document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');</SCRIPT><TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV><DIV align=center><CENTER><TABLE border=0 cellPadding=0 cellSpacing=10><TBODY><TR><TD align=middle rowSpan=2>选中色彩<TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColorwidth=40><TBODY><TR><TD></TD></TR></TBODY></TABLE></TD><TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPANid=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7></TD><TD><BUTTON id=Ok type=submit>确定</BUTTON></TD></TR><TR><TD><BUTTONonclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2、web216颜色框

运行代码框
<style>#colorTable td {width:7;height:9;cursor:hand;}</style><body><div style="background-color:#000000;padding-left:6px;padding-right:6px;width:214"><table id="ColorTable" align="left" border='1' style='border-collapse:collapse;margin-right:6px;' bordercolor='black'><tr><td bgcolor="#000000"></td></tr><tr><td bgcolor="#333333"></td></tr><tr><td bgcolor="#666666"></td></tr><tr><td bgcolor="#999999"></td></tr><tr><td bgcolor="#cccccc"></td></tr><tr><td bgcolor="#ffffff"></td></tr><tr><td bgcolor="#ff0000"></td></tr><tr><td bgcolor="#00ff00"></td></tr><tr><td bgcolor="#0000ff"></td></tr><tr><td bgcolor="#ffff00"></td></tr><tr><td bgcolor="#00ffff"></td></tr><tr><td bgcolor="#ff00ff"></td></tr></table><script>oColorStr=new Array("00","33","66","99","cc","ff");document.write("<table id='colorTable' border='1' style='border-collapse:collapse' bordercolor='black'>");for(j=0;j<oColorStr.length;j++){ document.write("<tr>"); for(m=0;m<3;m++){ for(i=0;i<oColorStr.length;i++){ document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>") } } document.write("</tr>");}for(j=0;j<oColorStr.length;j++){ document.write("<tr>"); for(m=3;m<6;m++){ for(i=0;i<oColorStr.length;i++){ document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>") } } document.write("</tr>");}document.write("</table>");</script></div><br><span id="oColorShow" style="border:solid 1px #000;width:40;height:12"></span> <span id="oColorValue" style="font:10px verdana;"></span><script>document.body.onmousemove=function(){srcElem=event.srcElement;if(srcElem.tagName=="TD"){oColorValue.innerText=srcElem.bgColor;oColorShow.style.backgroundColor=srcElem.bgColor;srcElem.title=srcElem.bgColor}}</script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3、模拟系统选项卡

运行代码框
<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><style type="text/css"><!--body{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000;}td, div, input, <div id="Message" class="Message"></div> </div> <div class="nextinfo"> <li>上一篇：<a href=/jishu/513/557/2006062092264.html>网页制作技巧24条经验技巧</a></li> <li>下一篇：<a href=/jishu/513/557/2006062092266.html>凄惨的站长！今年夏天也下雪！经验技巧</a></li></div> <div class="infolast" >【<a href="javascript:window.external.AddFavorite(location.href,document.title);" title="添加WEB 技术模拟应用程序经验技巧到您的收藏夹！">加入收藏</a>】【<a href="javascript:mycode();">告诉好友</a>】【<A href="javascript:Re_FontSize(16);">大</A> <A href="javascript:Re_FontSize(14);">中</A><A href="javascript:Re_FontSize(12);"> 小</A>】【<A href="javascript:window.print();">打印此文</A>】【<A href="#">回到顶部</A>】【<A href="#" onClick="window.close();">关闭窗口</A>】</div> <div class="related"> <h3>相关教程</h3> <div class="relatedinfo"><li class="showlistr1">·<a href="/html/jishu51152420120327479882.html" title='让你的Web服务器日志文件更安全'>让你的Web服务器日志文件更安全</a></li> <li class="showlistr1">·<a href="/html/jishu51152420120327479880.html" title='让你的Web服务器日志文件更安全'>让你的Web服务器日志文件更安全</a></li> <li class="showlistr1">·<a href="/html/jishu51520101007463547.html" title='将Word快速转换为Powerpoint格式'>将Word快速转换为Powerpoint格式</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463479.html" title='简单几步提高PowerPoint制作效率'>简单几步提高PowerPoint制作效率</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463465.html" title='简单几步有效提高PowerPoint效率'>简单几步有效提高PowerPoint效率</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463460.html" title='PowerPoint轻松制作显微镜动画特效'>PowerPoint轻松制作显微镜动画特效</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463458.html" title='解决office应用程序配置错误问题'>解决office应用程序配置错误问题</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463450.html" title='巧将PowerPoint文字转换Word文档'>巧将PowerPoint文字转换Word文档</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463444.html" title='一款将MP3嵌入Powerpoint的软件'>一款将MP3嵌入Powerpoint的软件</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463441.html" title='PowerPoint流程文字转变为美观图形'>PowerPoint流程文字转变为美观图形</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463431.html" title='完善在PowerPoint中FLASH的使用'>完善在PowerPoint中FLASH的使用</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463415.html" title='Powerpoint中插入运算排序的表格'>Powerpoint中插入运算排序的表格</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463392.html" title='用PowerPoint2003制作多媒体光盘'>用PowerPoint2003制作多媒体光盘</a></li> <li class="showlistr1">·<a href="/html/jishu51520101005463390.html" title='巧用Powerpoint模板制作连线题课件'>巧用Powerpoint模板制作连线题课件</a></li> <li class="showlistr1">·<a href="/html/jishu51520101004463346.html" title='PowerPoint 2007变换复杂公式颜色'>PowerPoint 2007变换复杂公式颜色</a></li> <li class="showlistr1">·<a href="/html/jishu51520101004463334.html" title='Powerpoint2007中PPT文件打包操作'>Powerpoint2007中PPT文件打包操作</a></li></div> </div> <div class="related"> <h3>教程评论</h3> <table border="0" align="center" cellpadding="0" cellspacing="0" class="mainAreaTable"> <tr> <td class="commentInfo"></td> </tr> <tr> <td class="postComment"> <form name="myform" method="post" action="/jishu/comment.asp"> <input type="Hidden" name="ArticleID" value="92265" /> <input type="Hidden" name="action" value="save" /> <p>评论：<input type="text" name="UserName" maxlength="15" size="28" /> <font color="#ff0000">！</font> <a href="/html/jishucomment.aspArticleID92265.html" target="_blank">查看更多评论</a><input name="Grade" value="85" checked="true" type="Hidden" /></p> <p>内容：<textarea name="content" cols="70" rows="5" title="请注意用语文明且合法，不要发布带有攻击性的言论，谢谢合作！"> ！

验证码：验证码,看不清楚?请点击刷新验证码 (注“！”为必填内容。)