UI program 界面编程方法讨论之二

最新推荐文章于 2025-08-07 21:29:52 发布

onezeros

最新推荐文章于 2025-08-07 21:29:52 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：编程 ui float xsl action function

本文链接：https://blog.youkuaiyun.com/onezeros/article/details/4464254

本文介绍了一次偶然发现的有道字典界面编程案例，通过解析其XSLT模板和CSS样式，展示了如何利用网页技术实现应用程序的界面设计，并提供了一些JavaScript功能拓展的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚才想找一个英汉字典文件，就到有道字典的安装文件夹看看，虽没找到想要的东西却发现了新东西

在一篇文章中我提到使用网页进行应用程序界面编程，在这儿得到验证

请看： <xsl:template match="exam"> <xsl:if test="i"> <div style="float:left;width:20px"> </div> <div style="float:left;" mce_style="float:left;"><span style="color:#666666" mce_style="color:#666666">例句: </span></div> <div style="float:left;width:4px"> </div> <xsl:for-each select="i"> <xsl:if test="position() > 1" > <div style="float:left;width:50px"> </div> </xsl:if> <div style="float:left;" mce_style="float:left;"> <span style="color:#333333" mce_style="color:#333333"><xsl:apply-templates select="f/l"/></span> <BR/> <span style="color:#666666" mce_style="color:#666666"><xsl:apply-templates select="n/l"/></span> </div> <div style="overflow:hidden;height:1px;clear:both"></div> </xsl:for-each> </xsl:if> </xsl:template>

/*百科*/ #baike{line-height:140%;margin-top:5px;margin-left:15px;margin-bottom:20px} #baike div.word{font-size:120%;font-weight:bold;color:#0066CC;margin-top:10px} /*词典tab的查询词*/ #baike div.title{font-size:120%;font-weight:bold;color:#0066CC;float:left} /*百科tab的查询词*/ #baike div.content{color:Black;} #baole div.content div.left{float:left} /*词典tab百科内容左边的解释*/ #baike div.content div.right{float:right;} /*词典tab科内容右边的图片*/ #baike div.details{color:#0066CC;} /*词典tab的“详细内容>>”*/ #baike div.more{color:#0066CC;margin-top:5px} /*词典tab的更多相关词条*/ #baike div.from{color:Black;margin-top:10px} /*词典tab的来自于*/ #baike div.from a{color:#008000} /*词典tab的来自于的链接*/ #baike div.head{margin-top:7px;width:100%;font-size:12px} /*百科tab的内容头*/ #baike div.head font{font-size:12px} /*禁掉百科tab内容头的font*/

这是其css文件内容，就是其页面布局及消息处理；而且使用JavaScript拓展其功能：function ctlog(_7,q,_9,_a,_b,_c,_d){ var i=new Image(); i.src="http://dict.youdao.com/ctlog?q="+encodeURIComponentWrapper(q)+"&url="+encodeURIComponent(_7.href)+"&pos="+_9+"&cfd="+_a+"&spt="+_b+"&action="+_c+"&ctype="+_d; //alert(i.src); return true; } function ctlog2(queryString, action, ctype) { var i=new Image(); i.src="http://dict.youdao.com/ctlog?q="+queryString+"&url=null"+"&pos=0"+"&cfd=0"+"&spt=0"+"&action="+action+"&ctype="+ctype; return true; }

做界面设计的朋友可以深入研究一下