<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>VHUGES &#187; HTML</title>
	<atom:link href="http://www.vhuges.com/tag/html/feed" rel="self" type="application/rss+xml" />
	<link>http://www.vhuges.com</link>
	<description>We Are Hugo &#38; Jessie&#039;s Family</description>
	<lastBuildDate>Tue, 01 Jun 2010 07:10:39 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>DIV/TD/P兼容多浏览器de强制不换行&amp;换行</title>
		<link>http://www.vhuges.com/div-td-p-is-compatible-with-multiple-browsers-de-force-does-not-wrap-wrap.html</link>
		<comments>http://www.vhuges.com/div-td-p-is-compatible-with-multiple-browsers-de-force-does-not-wrap-wrap.html#comments</comments>
		<pubDate>Tue, 10 Mar 2009 16:05:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=31</guid>
		<description><![CDATA[关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。强制不换行：div,td {white-space:nowrap;}这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。但要是在 IE 的 td 中却很复杂：1.如果没有为 td 指定宽度，则上述代码仍然有效。 2.如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。 3.如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。综合起来，为了简单，使用：div {white-space:nowrap;}只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间需套一层 div。强制换行：强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不会撑大布局。div,td {word-break:break-all;}word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以在Firefox中无效果，为了不让其挤乱表格，可以加上 overflow:hidden 来凑合着解决。知其然知其所以然上面介绍了三种属性：white-space : normal &#124; nowrap word-wrap : normal &#124; break-word word-break : normal &#124; break-all &#124; keep-allwhite-space空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。 nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。word-wrap内容超过容器边界时是否断开转行。normal 允许（只是允许，不是必须）内容顶开指定的容器边界。 break-word 内容将在边界内换行。word-break换行的方式。normal 英文在标点和空白处换行，中文在任何地方换行。 break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。 keep-all 英文和中文都在标点和空白处换行。

]]></description>
			<content:encoded><![CDATA[<p>关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。<br/><br/>文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。<br/><br/><strong>强制不换行</strong>：<br/>div,td {white-space:nowrap;}<br/><br/>这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。但要是在 IE 的 td 中却很复杂：<br/><br/>1.如果没有为 td 指定宽度，则上述代码仍然有效。 <br/>2.如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。 <br/>3.如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。<br/>综合起来，为了简单，使用：<br/><br/>div {white-space:nowrap;}<br/><br/>只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间需套一层 div。<br/><br/><strong>强制换行</strong>：<br/>强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不会撑大布局。<br/><br/>div,td {word-break:break-all;}<br/><br/>word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以在Firefox中无效果，为了不让其挤乱表格，可以加上 overflow:hidden 来凑合着解决。<br/><br/>知其然知其所以然<br/><br/>上面介绍了三种属性：<br/>white-space : normal | nowrap <br/>word-wrap : normal | break-word <br/>word-break : normal | break-all | keep-all<br/><br/><strong>white-space</strong><br/>空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。<br/><br/>normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。 <br/>nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。<br/><br/><strong>word-wrap</strong><br/>内容超过容器边界时是否断开转行。<br/><br/>normal 允许（只是允许，不是必须）内容顶开指定的容器边界。 <br/>break-word 内容将在边界内换行。<br/><br/><strong>word-break</strong><br/>换行的方式。<br/><br/>normal 英文在标点和空白处换行，中文在任何地方换行。 <br/>break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。 <br/>keep-all 英文和中文都在标点和空白处换行。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/div-td-p-is-compatible-with-multiple-browsers-de-force-does-not-wrap-wrap.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>去除点击链接出现的虚线框</title>
		<link>http://www.vhuges.com/the-dashed-box-appears-click-on-the-link-to-remove.html</link>
		<comments>http://www.vhuges.com/the-dashed-box-appears-click-on-the-link-to-remove.html#comments</comments>
		<pubDate>Tue, 10 Mar 2009 15:16:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=32</guid>
		<description><![CDATA[在页面上点击链接常出现虚线框&#8230;有时候觉得多少有些碍眼（实际上它也是有用滴，提示当前焦点&#8212;-随便啥页面按Tab键瞧瞧&#8230;虚线框看见了吧~这作用可不小吧^_^），但是，某些时候页面总体美观性会被链接的这一属性给妨碍。那么~有办法去掉它么？当然&#8230;.是有办法滴~目前的解决办法有以下两种：【第1种方法】IE 下可使用其私有的html属性“hideFoucs”在标签的结构中加入 hidefocus=”true” 属性。即：&#60;a href=&#34;http://www.vhuges.com&#34; hidefocus=&#34;true&#34; title=&#34;欢迎光临时间线&#34;&#62;时间线&#60;/a&#62;而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：.HideFocus {outline:none;}【第2种方法】也可以仅用 CSS 来控制，即对 IE 的情形使用 e&#173;xpression 表达式，但不推荐使用，毕竟 e&#173;xpression 在性能上有问题。.HideFocus {&#160;&#160;hide-focus: e&#173;xpression(this.hideFocus=true);&#160;&#160;/* for ie 5+ */ &#160;&#160;outline: none;&#160;&#160;/* for firefox 1.5 + */}除链接外，该 CSS 同样适用于 input 和 button 标签。注：IE6, IE7, FF1.5, FF2, Opera9 测试通过。（opera9 似乎默认就不显示焦点虚线框哈）

]]></description>
			<content:encoded><![CDATA[<p>在页面上点击链接常出现虚线框&#8230;有时候觉得多少有些碍眼（实际上它也是有用滴，提示当前焦点&#8212;-随便啥页面按Tab键瞧瞧&#8230;虚线框看见了吧~这作用可不小吧^_^），但是，某些时候页面总体美观性会被链接的这一属性给妨碍。那么~有办法去掉它么？<br/><br/>当然&#8230;.是有办法滴~目前的解决办法有以下两种：<br/><br/>【第1种方法】<br/>IE 下可使用其私有的html属性“hideFoucs”在标签的结构中加入 hidefocus=”true” 属性。即：<br/><span style="color:Green">&lt;a href=&#34;<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>&#34; hidefocus=&#34;true&#34; title=&#34;欢迎光临时间线&#34;&gt;时间线&lt;/a&gt;</span><br/><br/>而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：<br/><span style="color:Green">.HideFocus {outline:none;}</span><br/><br/>【第2种方法】<br/>也可以仅用 CSS 来控制，即对 IE 的情形使用 e&#173;xpression 表达式，但不推荐使用，毕竟 e&#173;xpression 在性能上有问题。<br/><br/><span style="color:Green">.HideFocus {<br/>&nbsp;&nbsp;hide-focus: e&#173;xpression(this.hideFocus=true);&nbsp;&nbsp;/* for ie 5+ */ <br/>&nbsp;&nbsp;outline: none;&nbsp;&nbsp;/* for firefox 1.5 + */<br/>}</span><br/><br/>除链接外，该 CSS 同样适用于 input 和 button 标签。<br/><br/>注：IE6, IE7, FF1.5, FF2, Opera9 测试通过。（opera9 似乎默认就不显示焦点虚线框哈）<br/><br/></p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/the-dashed-box-appears-click-on-the-link-to-remove.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网页打印基本要素</title>
		<link>http://www.vhuges.com/basic-elements-of-web-page-print.html</link>
		<comments>http://www.vhuges.com/basic-elements-of-web-page-print.html#comments</comments>
		<pubDate>Wed, 24 Dec 2008 14:33:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=72</guid>
		<description><![CDATA[网页打印是很多BS系统都会碰到的问题，上一篇探讨了网页打印相对于A4纸的宽高，本篇来说说具体的打印页面应该由哪些基本要素构建&#8230;首先，打印页面是为了将WEB页面中需要打印的内容输出到打印机，并保证打印效果符合用户预想。那么打印页面个人以为至少要符合以下要求：1、页面显示内容应该尽可能的与打印效果相符，如果因特殊原因只能放任显示的差异，那么至少要另外提供一个预览页面供用户查阅打印输出内容；2. 打印控制，包括但不限于“页面设置、预览、打印”等操作；打印工具条我们可以采用IE的一款未公开的控件进行打印控制。控件 CLSID:8856F961-340A-11D0-A96B-00C04FD705A2网页打印本来就是很尴尬的解决方案，所以，我们的多浏览器兼容性也就不用考虑那么细致了，IE6/7即可，相信这个要求也不是很苛刻。而打印页面的内容理所当然使用css控制，对于页面中一些不想打印出来的内容，则使用css 的打印标签 @media print{}例如: @media print{.noprint {display:none;}}对于不想打印的段落，层，表格，我们设定其noprint样式即可。打印控制代码如下：&#60;script language=&#34;javascript&#34;&#62;&#160;&#160; function Print() { &#160;&#160;if(confirm(&#34;确认要打印吗?&#34;)) { &#160;&#160;&#160;&#160;document.all.wb.execwb(6,6); &#160;&#160;}&#160;&#160;}&#160;&#160; function PrintView() { &#160;&#160;document.all.wb.execwb(7,1); }function PrintSetUp() { &#160;&#160;document.all.wb.execwb(8,1);&#160;&#160;}&#160;&#160;&#160;&#160;&#160;&#160; function CloseWindow() { &#160;&#160;document.all.wb.execwb(45,1); &#160;&#160;window.close();&#160;&#160;}&#160;&#160;&#60;/script&#62;&#60;!&#8211;控件加载&#8211;&#62;&#60;script type=&#34;text/javascript&#34;&#62;&#160;&#160;AC_AX_RunContent( &#39;id&#39;,&#39;wb&#39;,&#39;height&#39;,&#39;2&#39;,&#39;width&#39;,&#39;3&#39;,&#39;classid&#39;,&#39;CLSID:8856F961-340A-11D0-A96B-00C04FD705A2&#39;,&#39;name&#39;,&#39;wb&#39;,&#39;viewastext&#39;,&#39;VIEWASTEXT&#39; ); //end AC code&#60;/script&#62;&#60;noscript&#62;&#60;OBJECT&#160;&#160;id=&#34;wb&#34; height=&#34;2&#34; width=&#34;3&#34; classid=&#34;CLSID:8856F961-340A-11D0-A96B-00C04FD705A2&#34; name=&#34;wb&#34; VIEWASTEXT&#62;&#60;/OBJECT&#62;&#60;/noscript&#62;关于 AC_AX_RunContent()函数的说明，该函数是DW的内置库，用于兼容浏览器的，该库文件我在附件中贴出。打印相关代码使用示例如下：&#60;a href=&#34;#&#34; title=&#34;页面设置&#34; onclick=&#34;PrintSetUp()&#34; /&#62;&#60;a href=&#34;#&#34; title=&#34;预览&#34; onclick=&#34;PrintView()&#34; /&#62;&#60;a href=&#34;#&#34; title=&#34;打印&#34; onclick=&#34;Print()&#34; /&#62;&#60;a href=&#34;#&#34; title=&#34;关闭&#34; onclick=&#34;CloseWindow();&#34; /&#62;综合以上几步，我们即可以生成完整滴打印界面。附件：AC_AX_RunContent() 需要引用两个js文件1、AC_RunActiveContent.js2、AC_ActiveX.js 点击下载此文件

]]></description>
			<content:encoded><![CDATA[<p>网页打印是很多BS系统都会碰到的问题，上一篇探讨了网页打印相对于A4纸的宽高，本篇来说说具体的打印页面应该由哪些基本要素构建&#8230;<br/><br/>首先，打印页面是为了将WEB页面中需要打印的内容输出到打印机，并保证打印效果符合用户预想。那么打印页面个人以为至少要符合以下要求：<br/>1、页面显示内容应该尽可能的与打印效果相符，如果因特殊原因只能放任显示的差异，那么至少要另外提供一个预览页面供用户查阅打印输出内容；<br/>2. 打印控制，包括但不限于“页面设置、预览、打印”等操作；<br/><br/>打印工具条我们可以采用IE的一款未公开的控件进行打印控制。控件 CLSID:8856F961-340A-11D0-A96B-00C04FD705A2<br/><br/>网页打印本来就是很尴尬的解决方案，所以，我们的多浏览器兼容性也就不用考虑那么细致了，IE6/7即可，相信这个要求也不是很苛刻。而打印页面的内容理所当然使用css控制，对于页面中一些不想打印出来的内容，则使用css 的打印标签 @media print{}<br/><br/>例如: <br/>@media print{<br/>.noprint {display:none;}<br/>}<br/><br/>对于不想打印的段落，层，表格，我们设定其noprint样式即可。<br/><br/>打印控制代码如下：<br/>&lt;script language=&#34;javascript&#34;&gt;&nbsp;&nbsp; <br/>function Print() { <br/>&nbsp;&nbsp;if(confirm(&#34;确认要打印吗?&#34;)) { <br/>&nbsp;&nbsp;&nbsp;&nbsp;document.all.wb.execwb(6,6); <br/>&nbsp;&nbsp;}&nbsp;&nbsp;<br/>}&nbsp;&nbsp; <br/>function PrintView() { <br/>&nbsp;&nbsp;document.all.wb.execwb(7,1); <br/>}<br/>function PrintSetUp() { <br/>&nbsp;&nbsp;document.all.wb.execwb(8,1);&nbsp;&nbsp;<br/>}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br/>function CloseWindow() { <br/>&nbsp;&nbsp;document.all.wb.execwb(45,1); <br/>&nbsp;&nbsp;window.close();&nbsp;&nbsp;<br/>}&nbsp;&nbsp;<br/>&lt;/script&gt;<br/>&lt;!&#8211;控件加载&#8211;&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>&nbsp;&nbsp;AC_AX_RunContent( &#39;id&#39;,&#39;wb&#39;,&#39;height&#39;,&#39;2&#39;,&#39;width&#39;,&#39;3&#39;,&#39;classid&#39;,&#39;CLSID:8856F961-340A-11D0-A96B-00C04FD705A2&#39;,&#39;name&#39;,&#39;wb&#39;,&#39;viewastext&#39;,&#39;VIEWASTEXT&#39; ); //end AC code<br/>&lt;/script&gt;<br/>&lt;noscript&gt;<br/>&lt;OBJECT&nbsp;&nbsp;id=&#34;wb&#34; height=&#34;2&#34; width=&#34;3&#34; classid=&#34;CLSID:8856F961-340A-11D0-A96B-00C04FD705A2&#34; name=&#34;wb&#34; VIEWASTEXT&gt;&lt;/OBJECT&gt;<br/>&lt;/noscript&gt;<br/><br/>关于 AC_AX_RunContent()函数的说明，该函数是DW的内置库，用于兼容浏览器的，该库文件我在附件中贴出。<br/><br/>打印相关代码使用示例如下：<br/><br/>&lt;a href=&#34;#&#34; title=&#34;页面设置&#34; onclick=&#34;PrintSetUp()&#34; /&gt;<br/>&lt;a href=&#34;#&#34; title=&#34;预览&#34; onclick=&#34;PrintView()&#34; /&gt;<br/>&lt;a href=&#34;#&#34; title=&#34;打印&#34; onclick=&#34;Print()&#34; /&gt;<br/>&lt;a href=&#34;#&#34; title=&#34;关闭&#34; onclick=&#34;CloseWindow();&#34; /&gt;<br/><br/>综合以上几步，我们即可以生成完整滴打印界面。<br/><br/>附件：AC_AX_RunContent() 需要引用两个js文件<br/>1、AC_RunActiveContent.js<br/>2、AC_ActiveX.js<br/><img src="images/download.gif" alt="下载文件" style="margin:0px 2px -4px 0px"/> <a href="attachments/month_0812/a20081224223215.zip" target="_blank">点击下载此文件</a><br/></p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/basic-elements-of-web-page-print.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网页打印宽度的设置</title>
		<link>http://www.vhuges.com/%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%ae%bd%e5%ba%a6%e7%9a%84%e8%ae%be%e7%bd%ae.html</link>
		<comments>http://www.vhuges.com/%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%ae%bd%e5%ba%a6%e7%9a%84%e8%ae%be%e7%bd%ae.html#comments</comments>
		<pubDate>Tue, 23 Dec 2008 04:41:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=73</guid>
		<description><![CDATA[在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。 经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸 所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。 但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。 以下是我测试的各种页边距下，A4纸对应的象素尺寸： 打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123 &#60;div style=&#34;width:794px;height:1123px;border:1px solid #000000;&#34;&#62; &#60;/div&#62; 打印页边距设定为 5mm 时，网页内最大元素的分辨率：756×1086 &#60;div style=&#34;width:756px;height:1086px;border:1px solid #000000;&#34;&#62; &#60;/div&#62; 打印页边距设定为 19.05mm 时，网页内最大元素的分辨率：649×978 &#60;div style=&#34;width:649px;height:978px;border:1px solid #000000;&#34;&#62; &#60;/div&#62;

]]></description>
			<content:encoded><![CDATA[<p>在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。 <br/>经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi <br/><br/>A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸 <br/><br/>所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。 <br/><br/>但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。 <br/><br/>以下是我测试的各种页边距下，A4纸对应的象素尺寸： <br/><br/>打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123 <br/>&lt;div style=&#34;width:794px;height:1123px;border:1px solid #000000;&#34;&gt; &lt;/div&gt; <br/><br/>打印页边距设定为 5mm 时，网页内最大元素的分辨率：756×1086 <br/>&lt;div style=&#34;width:756px;height:1086px;border:1px solid #000000;&#34;&gt; &lt;/div&gt; <br/><br/>打印页边距设定为 19.05mm 时，网页内最大元素的分辨率：649×978 <br/>&lt;div style=&#34;width:649px;height:978px;border:1px solid #000000;&#34;&gt; &lt;/div&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%ae%bd%e5%ba%a6%e7%9a%84%e8%ae%be%e7%bd%ae.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>收房所需费用明细计算器 Beta</title>
		<link>http://www.vhuges.com/shoufang-cost-calculator-beta-details.html</link>
		<comments>http://www.vhuges.com/shoufang-cost-calculator-beta-details.html#comments</comments>
		<pubDate>Fri, 14 Mar 2008 09:21:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[计算器]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=282</guid>
		<description><![CDATA[网上关于购房有很多各式各样的计算器，比如购房贷款计算器啦、贷款利息计算器啦……但是发现当你准备领房的时候却发觉不知道要缴纳哪些费用列。实在是一团雾水&#8230;：（前不久看到某网友转帖了一系列的领房费用明细，看看主要涉及无非就是购房总额，房屋面积等数据。弄个简单的计算器应该也行，反正也就是用来参考看看大致费用~觉得可以参考滴就拿去用吧^_^注：默认数据为估计数据，请根据开发商和物业及房屋所在当地的标准输入。计算器结果仅供参考，欢迎任何反馈以供完善。谢谢~【计算器地址】opus/wehouse.html

]]></description>
			<content:encoded><![CDATA[<div align="center"><img src="attachments/month_0803/o200831417122.jpg" border="0" alt=""/></div>
<p><br/><br/>网上关于购房有很多各式各样的计算器，比如购房贷款计算器啦、贷款利息计算器啦……但是发现当你准备领房的时候却发觉不知道要缴纳哪些费用列。实在是一团雾水&#8230;：（<br/><br/>前不久看到某网友转帖了一系列的领房费用明细，看看主要涉及无非就是购房总额，房屋面积等数据。弄个简单的计算器应该也行，反正也就是用来参考看看大致费用~<br/><br/>觉得可以参考滴就拿去用吧^_^<br/><br/>注：默认数据为估计数据，请根据开发商和物业及房屋所在当地的标准输入。计算器结果仅供参考，欢迎任何反馈以供完善。谢谢~<br/><br/>【计算器地址】<a href="opus/wehouse.html" target="_blank" rel="external">opus/wehouse.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/shoufang-cost-calculator-beta-details.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>javascript 目前颇为流行的图片切换效果（天极网首页）</title>
		<link>http://www.vhuges.com/javascript-is-currently-quite-popular-picture-switching-effects-new-york-home.html</link>
		<comments>http://www.vhuges.com/javascript-is-currently-quite-popular-picture-switching-effects-new-york-home.html#comments</comments>
		<pubDate>Thu, 01 Nov 2007 09:23:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=399</guid>
		<description><![CDATA[HTML代码





<span class="readmore"><a href="http://www.vhuges.com/javascript-is-currently-quite-popular-picture-switching-effects-new-york-home.html" title="javascript 目前颇为流行的图片切换效果（天极网首页）">阅读全文——共2009字</a></span>]]></description>
			<content:encoded><![CDATA[<div class="UBBPanel">
<div class="UBBTitle"><img src="images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div>
<div class="UBBContent"><textarea rows="8" id="temp63916"><br />
<script>
var widths=282;
var heights=164;
var counts=6;
img1=new Image ();img1.src='<a href="http://www.yesky.com/imagesnew/software/zhuanti/vista/282x164.jpg" target="_blank" rel="external">http://www.yesky.com/imagesnew/software/zhuanti/vista/282x164.jpg</a>';
img2=new Image ();img2.src='<a href="http://www.yesky.com/imagelist/2007/309/3j6qk84kib65.jpg" target="_blank" rel="external">http://www.yesky.com/imagelist/2007/309/3j6qk84kib65.jpg</a>';
img3=new Image ();img3.src='UploadFile/jscode/2007729214814549.jpg';
img4=new Image ();img4.src='UploadFile/jscode/2007729214814651.jpg';
img5=new Image ();img5.src='UploadFile/jscode/2007729214815914.jpg';
img6=new Image ();img6.src='UploadFile/jscode/2007729214816449.jpg';
url1=new Image ();url1.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
url2=new Image ();url2.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
url3=new Image ();url3.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
url4=new Image ();url4.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
url5=new Image ();url5.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
url6=new Image ();url6.src='<a href="http://www.vhuges.com" target="_blank" rel="external">http://www.vhuges.com</a>';
//天极伊永恒原创
var nn=1;
var key=0;
function change_img()
{if(key==0){key=1;}
else if(document.all)
{document.getElementById(&#34;pic&#34;).filters[0].Apply();document.getElementById(&#34;pic&#34;).filters[0].Play(duration=2);}
eval('document.getElementById(&#34;pic&#34;).src=img'+nn+'.src');
eval('document.getElementById(&#34;url&#34;).href=url'+nn+'.src');
for (var i=1;i<=counts;i++){document.getElementById(&#34;xxjdjj&#34;+i).className='axx';}
document.getElementById(&#34;xxjdjj&#34;+nn).className='bxx';
nn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',4000);}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('
<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>
<p>');
document.write('
<div style=&#34;width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;&#34;>');
document.write('
<div><a id=&#34;url&#34;><img id=&#34;pic&#34; style=&#34;border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)&#34; width='+widths+' height='+heights+' /></a></div>
<p>');
document.write('
<div style=&#34;filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;&#34;>');
for(var i=1;i<counts+1;i++){document.write('<a href=&#34;javascript:changeimg('+i+');&#34; id=&#34;xxjdjj'+i+'&#34; class=&#34;axx&#34; target=&#34;_self&#34;>'+i+'</a>');}
document.write('</div>
</div>
<p>');
change_img();
</script><br />
</textarea><br/><br />
<input onclick="runEx('temp63916')"  type="button" class="userbutton" value="运行此代码"/>
<input onclick="doCopy('temp63916')"  type="button" class="userbutton" value="复制此代码"/>
<input onclick="saveCode('temp63916')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/javascript-is-currently-quite-popular-picture-switching-effects-new-york-home.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tab 切换菜单</title>
		<link>http://www.vhuges.com/tab-switching-menu.html</link>
		<comments>http://www.vhuges.com/tab-switching-menu.html#comments</comments>
		<pubDate>Thu, 01 Nov 2007 09:10:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=400</guid>
		<description><![CDATA[HTML代码





<span class="readmore"><a href="http://www.vhuges.com/tab-switching-menu.html" title="Tab 切换菜单">阅读全文——共746字</a></span>]]></description>
			<content:encoded><![CDATA[<div class="UBBPanel">
<div class="UBBTitle"><img src="images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div>
<div class="UBBContent"><textarea rows="8" id="temp56872"></p>
<style type=&#34;text/css&#34;>
.menu_title2{background:red;}
.menu_title1{background:green;}
.box{width:400px;padding:10px;}
.hd{float:left;}
.hd a{clear:both;font-size:13px;text-decoration:none;padding:6px 20px;display:block;color:white;}
.hd a:hover{background:red;}
.bd{float:left;}
.bd div{width:200px;height:300px;background:#eee;border:1px solid #ccc;margin:0 6px;}
</style>
<p><script language=Javascript>
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
eval(&#34;document.getElementById('TabTitle&#34;+[tID]+&#34;').className='menu_title1';&#34;);
eval(&#34;document.getElementById('TabTitle&#34;+[ID]+&#34;').className='menu_title2';&#34;);
eval(&#34;document.getElementById('Tabs&#34;+[tID]+&#34;').style.display='none';&#34;);
eval(&#34;document.getElementById('Tabs&#34;+[ID]+&#34;').style.display='';&#34;);
tID=ID;
}
}
</script></p>
<div class=&#34;box&#34;>
<!-- 左边的菜单 [[ --></p>
<div class=&#34;hd&#34;>
<a class='menu_title2' id='TabTitle0' onclick='ShowTabs(0)' href=&#34;###&#34;>菜单11</a><br />
<a class='menu_title1' id='TabTitle1' onclick='ShowTabs(1)' href=&#34;###&#34;>菜单22</a><br />
<a class='menu_title1' id='TabTitle2' onclick='ShowTabs(2)' href=&#34;###&#34;>菜单33</a><br />
<a class='menu_title1' id='TabTitle3' onclick='ShowTabs(3)' href=&#34;###&#34;>菜单44</a><br />
<a class='menu_title1' id='TabTitle4' onclick='ShowTabs(4)' href=&#34;###&#34;>菜单55</a><br />
<a class='menu_title1' id='TabTitle5' onclick='ShowTabs(5)' href=&#34;###&#34;>菜单66</a>
</div>
<p><!-- 左边的菜单 ]] --><br />
<!-- 这里是右边的内容 可以放链接或者是其它内容 [[ --></p>
<div class=&#34;bd&#34;>
<div id='Tabs0'>111</div>
<div id='Tabs1' style='display: none;'>222</div>
<div id='Tabs2' style='display: none;'>333</div>
<div id='Tabs3' style='display: none;'>444</div>
<div id='Tabs4' style='display: none;'>555</div>
<div id='Tabs5' style='display: none;'>666</div>
</div>
<p><!-- 右边的内容 ]] -->
</div>
<p></textarea><br/><br />
<input onclick="runEx('temp56872')"  type="button" class="userbutton" value="运行此代码"/>
<input onclick="doCopy('temp56872')"  type="button" class="userbutton" value="复制此代码"/>
<input onclick="saveCode('temp56872')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/tab-switching-menu.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>15个很有创意的404错误页面</title>
		<link>http://www.vhuges.com/15-very-creative-404-error-page.html</link>
		<comments>http://www.vhuges.com/15-very-creative-404-error-page.html#comments</comments>
		<pubDate>Sat, 18 Aug 2007 12:55:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[404]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=495</guid>
		<description><![CDATA[404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。Smashing Magazine为我们挑选了40个有创意的404错误页面，在这个基础上进行筛选，选出了其中最有创意的15个放在这里让大家欣赏。简洁明了。这是可能吧最喜欢的一个。相当简洁。很鬼马。仿佛看到了win98。这个也是非常值得推荐的不得不说，有什么比简洁要好？我是在看电视吗？流程图式的404错误。选这个纯粹是因为觉得很漂亮。凭感觉喜欢这个。 这个也是非常不错的。要查看完整的40个创意404页面请点击这里查看原文。本文地址：http://www.kenengba.com/post/213.html

]]></description>
			<content:encoded><![CDATA[<p>404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。Smashing Magazine为我们挑选了40个有创意的404错误页面，在这个基础上进行筛选，选出了其中最有创意的15个放在这里让大家欣赏。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997077.jpg" border="0" alt=""/><br/></a><br/>简洁明了<br/><a target="_blank" href="http://www.kenengba.com/post/213.html" rel="external">。</a><br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997079.jpg" border="0" alt=""/><br/></a><br/>这是<br/><a target="_blank" href="http://www.kenengba.com/" rel="external">可能吧</a><br/>最喜欢的一个。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997084.jpg" border="0" alt=""/><br/></a><br/>相当简洁。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997085.jpg" border="0" alt=""/><br/></a><br/>很鬼马。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997091.jpg" border="0" alt=""/><br/></a><br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997088.jpg" border="0" alt=""/><br/></a><br/>仿佛看到了win98。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997094.jpg" border="0" alt=""/><br/></a><br/>这个也是非常值得推荐的<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997092.jpg" border="0" alt=""/><br/></a><br/>不得不说，有什么比简洁要好？<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997098.jpg" border="0" alt=""/><br/></a><br/>我是在看电视吗？<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997096.jpg" border="0" alt=""/><br/></a><br/>流程图式的404错误。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997102.jpg" border="0" alt=""/><br/></a><br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997100.jpg" border="0" alt=""/><br/></a><br/>选这个纯粹是因为觉得很漂亮。<br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997106.jpg" border="0" alt=""/><br/></a><br/>凭感觉喜欢这个。<br/> <br/><a target="_blank" href="http://www.kenengba.com/" rel="external"><br/><img src="http://www.panoramio.com/photos/original/3997107.jpg" border="0" alt=""/><br/></a><br/>这个也是非常不错的。<br/>要查看完整的40个创意404页面请<a target="_blank" href="http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/" rel="external">点击这里</a>查看原文。<br/><br/>本文地址：<a target="_blank" href="http://www.kenengba.com/post/213.html" rel="external">http://www.kenengba.com/post/213.html</a><br/></p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/15-very-creative-404-error-page.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>无限级联菜单 &#8211; javascript</title>
		<link>http://www.vhuges.com/unlimited-cascading-menu-javascript.html</link>
		<comments>http://www.vhuges.com/unlimited-cascading-menu-javascript.html#comments</comments>
		<pubDate>Sun, 24 Jun 2007 02:10:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=617</guid>
		<description><![CDATA[琥珀无限级联菜单&#8230;javascript版的，收藏列～===================================&#60;html&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34;&#62; &#60;title&#62;琥珀网 &#8211; javascript无限级联动菜单&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; body, td { font-family: 宋体; font-size: 12px; } &#60;/style&#62;&#60;script language=&#34;javascript&#34;&#62;/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\&#124; Subject: JavaScript三级联动菜单 &#124;&#124; Version: 1.0 &#124;&#124; Author: 琥珀【hopesoft】 &#124;&#124; FileName: HPMenu.js &#124;&#124; Cr&#101;ated: 2005-10-16 &#124;&#124; LastModified: 2005-10-16 &#124;&#124; Download: http://www.10090.com/Demo/hpmenu/HPMenu.rar &#124;&#124; Explain: http://www.10090.com/Demo/ &#124;&#124; Demo: http://www.10090.com/Demo/ &#124;&#124; &#124;&#124; You may use this code on your item &#124;&#124; this entire copyright notice appears unchanged &#124;&#124; and you clearly display a link to http://www.10090.com/ &#124;&#124; &#124;&#124;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;&#124;&#124; MSN: hopesoft@msn.com QQ: 11318729 http://www.10090.com &#124;&#124; Copyright (c) 2004-2005 HopeSoftStudio &#124;\*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/function Menu(theform,menuid) {/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\* 1.变量定义　　　　　　　　　　　　　　　　　　　　　　 */*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/　　　　　//定义菜单级别MenuClass,菜单长度数组MenuLenArr,//菜单名称数组MenuArr,下级菜单数组SubMenuArr，菜单ID数组MenuIdArrvar MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr//定义分隔符：splitchar1,splitchar2var splitchar1,splitchar2//定义临时数组,子数组,数组长度,var arr,subarr,arrlen/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\* 2.变量赋值　　　　　　　　　　　　　　　　　　　　　　 */*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/MenuArr=new Array()MenuLenArr=new Array()SubMenuArr=new Array()MenuIdArr=new Array()MenuArr[1]=&#34;欧洲&#124;&#124;&#124;亚洲&#124;&#124;&#124;非洲&#124;&#124;&#124;大洋洲&#124;&#124;&#124;北美洲&#124;&#124;&#124;南美洲&#34; //洲名&#124;&#124;&#124;&#8230;MenuArr[2]=&#34;欧洲###德国&#124;&#124;&#124;欧洲###法国&#124;&#124;&#124;北美洲###美国&#124;&#124;&#124;北美洲###加拿大&#124;&#124;&#124;亚洲###中国&#124;&#124;&#124;非洲###埃及&#124;&#124;&#124;大洋洲###澳大利亚&#124;&#124;&#124;南美洲###墨西哥&#34; //洲名###国名&#124;&#124;&#124;&#8230;MenuArr[3]=&#34;中国###北京&#124;&#124;&#124;中国###上海&#124;&#124;&#124;美国###华盛顿&#124;&#124;&#124;美国###纽约&#124;&#124;&#124;德国###柏林&#124;&#124;&#124;法国###巴黎&#124;&#124;&#124;加拿大###多伦多&#124;&#124;&#124;埃及###开罗&#124;&#124;&#124;澳大利亚###悉尼&#124;&#124;&#124;墨西哥###墨西哥城&#34; //国名###城市名&#124;&#124;&#124;&#8230;MenuArr[4]=&#34;北京###朝阳区&#124;&#124;&#124;上海###徐汇区&#124;&#124;&#124;广州###天河区&#124;&#124;&#124;纽约###曼哈顿区&#124;&#124;&#124;华盛顿###华盛顿区&#124;&#124;&#124;柏林###新柏林区&#124;&#124;&#124;巴黎###大巴黎区&#124;&#124;&#124;开罗###大开罗&#124;&#124;&#124;悉尼###悉尼市区&#124;&#124;&#124;墨西哥城###墨西哥城区&#34; //国名###城市名&#124;&#124;&#124;&#8230;MenuIdArr[1]=&#34;zhou&#34;MenuIdArr[2]=&#34;guo&#34;MenuIdArr[3]=&#34;shi&#34;MenuIdArr[4]=&#34;qu&#34;MenuClass=4 //4级菜单splitchar1=&#34;&#124;&#124;&#124;&#34;;splitchar2=&#34;###&#34;;/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\* 3.生成数组　　　　　　　　　　　　　　　　　　　　　　 */*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/for(iii=1;iii&#60;=MenuClass;iii++){arr=MenuArr[iii].split(splitchar1);len=arr.length;subarr=new Array()for (i=0;i&#60;len;i++){ subarr[i]=arr[i].split(splitchar2);}len=subarr.length;SubMenuArr[iii]=subarr MenuLenArr[iii]=len}//============更改下级菜单======================var self,submenu,thislen,thisarr&#160;&#160;//self本级菜单//submenu子菜单//theform:所在表单对象[type:object]//menuid:本级菜单级别ID，如1级菜单则为1&#160;&#160;self=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[menuid])&#160;&#160;&#160;&#160;submenu=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[menuid+1])&#160;&#160;&#160;&#160;thislen=MenuLenArr[menuid+1]&#160;&#160;thisarr=SubMenuArr[menuid+1]&#160;&#160;submenu.length=0&#160;&#160;submenu.options.add(new Option( &#34;&#8212;&#8211;请选择&#8212;&#8211;&#34;,&#34;&#34;)); &#160;&#160; for (i=0;i&#60;thislen;i++) &#160;&#160; { &#160;&#160; if (thisarr[i][0] == self.value) &#160;&#160;&#160;&#160;{&#160;&#160;&#160;&#160; submenu.options.add(new Option(thisarr[i][1], thisarr[i][1])); &#160;&#160; } &#160;&#160; } &#160;&#160; submenu.options[0].sel&#101;cted=true//============更改下级以下菜单==============var kkkfor(kkk=menuid+2;kkk&#60;=MenuClass;kkk++)&#160;&#160;{&#160;&#160;&#160;&#160;&#160;&#160;submenu=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[kkk])&#160;&#160;&#160;&#160;submenu.length=0&#160;&#160;submenu.options.add(new Option( &#34;&#8212;&#8211;请选择&#8212;&#8211;&#34;,&#34;&#34;));&#160;&#160; &#160;&#160;submenu.options[0].sel&#101;cted=true&#160;&#160;}}&#60;/script&#62; &#60;form name=&#34;form1&#34; method=&#34;post&#34; action=&#34;&#34;&#62; &#60;table width=&#34;90%&#34; border=&#34;0&#34; align=&#34;center&#34; cellpadding=&#34;2&#34; cellspacing=&#34;1&#34; bgcolor=&#34;#CCCCCC&#34;&#62; &#60;tr bgcolor=&#34;F1F1F1&#34;&#62; &#60;td height=&#34;24&#34; colspan=&#34;2&#34; align=&#34;center&#34;&#62;琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]&#60;/td&#62; &#60;/tr&#62; &#60;tr bgcolor=&#34;#FFFFFF&#34;&#62; &#60;td width=&#34;12%&#34; height=&#34;24&#34; align=&#34;center&#34;&#62;所 在 洲:&#60;/td&#62; &#60;td&#62;&#60;sel&#101;ct name=&#34;zhou&#34; id=&#34;zhou&#34; onChange=&#34;Menu(this.form,1);&#34;&#62; &#60;option value=&#34;&#34; sel&#101;cted&#62;&#8212;&#8211;请选择&#8212;&#8211;&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;欧洲&#39;&#62;欧洲&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;亚洲&#39;&#62;亚洲&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;非洲&#39;&#62;非洲&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;大洋洲&#39;&#62;大洋洲&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;北美洲&#39;&#62;北美洲&#60;/option&#62;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;option value=&#39;南美洲&#39;&#62;南美洲&#60;/option&#62; &#60;/sel&#101;ct&#62;&#60;/td&#62; &#60;/tr&#62; &#60;tr bgcolor=&#34;#FFFFFF&#34;&#62; &#60;td height=&#34;24&#34; align=&#34;center&#34;&#62;国　　家:&#60;/td&#62; &#60;td&#62;&#60;sel&#101;ct name=&#34;guo&#34; id=&#34;sel&#101;ct&#34; onChange=&#34;Menu(this.form,2);&#34;&#62; &#60;option value=&#34;&#34; sel&#101;cted&#62;&#8212;&#8211;请选择&#8212;&#8211;&#60;/option&#62; &#60;/sel&#101;ct&#62;&#60;/td&#62; &#60;/tr&#62; &#60;tr bgcolor=&#34;#FFFFFF&#34;&#62; &#60;td height=&#34;24&#34; align=&#34;center&#34;&#62;城　　市:&#60;/td&#62; &#60;td&#62;&#60;sel&#101;ct name=&#34;shi&#34; id=&#34;sel&#101;ct2&#34; onChange=&#34;Menu(this.form,3);&#34;&#62; &#60;option value=&#34;&#34; sel&#101;cted&#62;&#8212;&#8211;

]]></description>
			<content:encoded><![CDATA[<p>琥珀无限级联菜单&#8230;javascript版的，收藏列～<br/>===================================<br/><br/>&lt;html&gt;<br/> &lt;head&gt;<br/> &lt;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34;&gt;<br/> &lt;title&gt;琥珀网 &#8211; javascript无限级联动菜单&lt;/title&gt;<br/> &lt;style type=&#34;text/css&#34;&gt;<br/> body, td<br/> {<br/> font-family: 宋体;<br/> font-size: 12px;<br/> }<br/> &lt;/style&gt;<br/>&lt;script language=&#34;javascript&#34;&gt;<br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\<br/>| Subject: JavaScript三级联动菜单 |<br/>| Version: 1.0 |<br/>| Author: 琥珀【hopesoft】 |<br/>| FileName: HPMenu.js |<br/>| Cr&#101;ated: 2005-10-16 |<br/>| LastModified: 2005-10-16 |<br/>| Download: <a href="http://www.10090.com/Demo/hpmenu/HPMenu.rar" target="_blank" rel="external">http://www.10090.com/Demo/hpmenu/HPMenu.rar</a> |<br/>| Explain: <a href="http://www.10090.com/Demo/" target="_blank" rel="external">http://www.10090.com/Demo/</a> |<br/>| Demo: <a href="http://www.10090.com/Demo/" target="_blank" rel="external">http://www.10090.com/Demo/</a> |<br/>| |<br/>| You may use this code on your item |<br/>| this entire copyright notice appears unchanged |<br/>| and you clearly display a link to <a href="http://www.10090.com/" target="_blank" rel="external">http://www.10090.com/</a> |<br/>| |<br/>|&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;|<br/>| MSN: hopesoft@msn.com QQ: 11318729 <a href="http://www.10090.com" target="_blank" rel="external">http://www.10090.com</a> |<br/>| Copyright (c) 2004-2005 HopeSoftStudio |<br/>\*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/<br/><br/>function Menu(theform,menuid) {<br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\<br/>* 1.变量定义　　　　　　　　　　　　　　　　　　　　　　 *<br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/　　　　　<br/><br/>//定义菜单级别MenuClass,菜单长度数组MenuLenArr,<br/>//菜单名称数组MenuArr,下级菜单数组SubMenuArr，菜单ID数组MenuIdArr<br/>var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr<br/><br/>//定义分隔符：splitchar1,splitchar2<br/>var splitchar1,splitchar2<br/><br/>//定义临时数组,子数组,数组长度,<br/>var arr,subarr,arrlen<br/><br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\<br/>* 2.变量赋值　　　　　　　　　　　　　　　　　　　　　　 *<br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/<br/>MenuArr=new Array()<br/>MenuLenArr=new Array()<br/>SubMenuArr=new Array()<br/>MenuIdArr=new Array()<br/><br/>MenuArr[1]=&#34;欧洲|||亚洲|||非洲|||大洋洲|||北美洲|||南美洲&#34; //洲名|||&#8230;<br/>MenuArr[2]=&#34;欧洲###德国|||欧洲###法国|||北美洲###美国|||北美洲###加拿大|||亚洲###中国|||非洲###埃及|||大洋洲###澳大利亚|||南美洲###墨西哥&#34; //洲名###国名|||&#8230;<br/>MenuArr[3]=&#34;中国###北京|||中国###上海|||美国###华盛顿|||美国###纽约|||德国###柏林|||法国###巴黎|||加拿大###多伦多|||埃及###开罗|||澳大利亚###悉尼|||墨西哥###墨西哥城&#34; //国名###城市名|||&#8230;<br/>MenuArr[4]=&#34;北京###朝阳区|||上海###徐汇区|||广州###天河区|||纽约###曼哈顿区|||华盛顿###华盛顿区|||柏林###新柏林区|||巴黎###大巴黎区|||开罗###大开罗|||悉尼###悉尼市区|||墨西哥城###墨西哥城区&#34; //国名###城市名|||&#8230;<br/><br/>MenuIdArr[1]=&#34;zhou&#34;<br/>MenuIdArr[2]=&#34;guo&#34;<br/>MenuIdArr[3]=&#34;shi&#34;<br/>MenuIdArr[4]=&#34;qu&#34;<br/>MenuClass=4 //4级菜单<br/><br/>splitchar1=&#34;|||&#34;;<br/>splitchar2=&#34;###&#34;;<br/><br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*\<br/>* 3.生成数组　　　　　　　　　　　　　　　　　　　　　　 *<br/>/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;*/<br/>for(iii=1;iii&lt;=MenuClass;iii++)<br/>{<br/>arr=MenuArr[iii].split(splitchar1);<br/>len=arr.length;<br/>subarr=new Array()<br/>for (i=0;i&lt;len;i++)<br/>{<br/> subarr[i]=arr[i].split(splitchar2);<br/>}<br/>len=subarr.length;<br/>SubMenuArr[iii]=subarr <br/>MenuLenArr[iii]=len<br/>}<br/><br/>//============更改下级菜单======================<br/>var self,submenu,thislen,thisarr&nbsp;&nbsp;<br/>//self本级菜单<br/>//submenu子菜单<br/>//theform:所在表单对象[type:object]<br/>//menuid:本级菜单级别ID，如1级菜单则为1<br/>&nbsp;&nbsp;self=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[menuid])&nbsp;&nbsp;<br/>&nbsp;&nbsp;submenu=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[menuid+1])&nbsp;&nbsp;<br/>&nbsp;&nbsp;thislen=MenuLenArr[menuid+1]<br/>&nbsp;&nbsp;thisarr=SubMenuArr[menuid+1]<br/>&nbsp;&nbsp;submenu.length=0<br/>&nbsp;&nbsp;submenu.options.add(new Option( &#34;&#8212;&#8211;请选择&#8212;&#8211;&#34;,&#34;&#34;)); <br/>&nbsp;&nbsp; for (i=0;i&lt;thislen;i++) <br/>&nbsp;&nbsp; { <br/>&nbsp;&nbsp; if (thisarr[i][0] == self.value) <br/>&nbsp;&nbsp;&nbsp;&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp; submenu.options.add(new Option(thisarr[i][1], thisarr[i][1])); <br/>&nbsp;&nbsp; } <br/>&nbsp;&nbsp; } <br/>&nbsp;&nbsp; submenu.options[0].sel&#101;cted=true<br/><br/>//============更改下级以下菜单==============<br/>var kkk<br/>for(kkk=menuid+2;kkk&lt;=MenuClass;kkk++)<br/>&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;submenu=eval(&#34;document.&#34;+theform.name+&#34;.&#34;+MenuIdArr[kkk])&nbsp;&nbsp;<br/>&nbsp;&nbsp;submenu.length=0<br/>&nbsp;&nbsp;submenu.options.add(new Option( &#34;&#8212;&#8211;请选择&#8212;&#8211;&#34;,&#34;&#34;));&nbsp;&nbsp; <br/>&nbsp;&nbsp;submenu.options[0].sel&#101;cted=true<br/>&nbsp;&nbsp;}<br/>}<br/><br/>&lt;/script&gt;<br/> &lt;form name=&#34;form1&#34; method=&#34;post&#34; action=&#34;&#34;&gt;<br/> &lt;table width=&#34;90%&#34; border=&#34;0&#34; align=&#34;center&#34; cellpadding=&#34;2&#34; cellspacing=&#34;1&#34; bgcolor=&#34;#CCCCCC&#34;&gt;<br/> &lt;tr bgcolor=&#34;F1F1F1&#34;&gt;<br/> &lt;td height=&#34;24&#34; colspan=&#34;2&#34; align=&#34;center&#34;&gt;琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]&lt;/td&gt;<br/> &lt;/tr&gt;<br/> &lt;tr bgcolor=&#34;#FFFFFF&#34;&gt;<br/> &lt;td width=&#34;12%&#34; height=&#34;24&#34; align=&#34;center&#34;&gt;所 在 洲:&lt;/td&gt;<br/> &lt;td&gt;&lt;sel&#101;ct name=&#34;zhou&#34; id=&#34;zhou&#34; onChange=&#34;Menu(this.form,1);&#34;&gt;<br/> &lt;option value=&#34;&#34; sel&#101;cted&gt;&#8212;&#8211;请选择&#8212;&#8211;&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;欧洲&#39;&gt;欧洲&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;亚洲&#39;&gt;亚洲&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;非洲&#39;&gt;非洲&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;大洋洲&#39;&gt;大洋洲&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;北美洲&#39;&gt;北美洲&lt;/option&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&#39;南美洲&#39;&gt;南美洲&lt;/option&gt;<br/> &lt;/sel&#101;ct&gt;&lt;/td&gt;<br/> &lt;/tr&gt;<br/> &lt;tr bgcolor=&#34;#FFFFFF&#34;&gt;<br/> &lt;td height=&#34;24&#34; align=&#34;center&#34;&gt;国　　家:&lt;/td&gt;<br/> &lt;td&gt;&lt;sel&#101;ct name=&#34;guo&#34; id=&#34;sel&#101;ct&#34; onChange=&#34;Menu(this.form,2);&#34;&gt;<br/> &lt;option value=&#34;&#34; sel&#101;cted&gt;&#8212;&#8211;请选择&#8212;&#8211;&lt;/option&gt;<br/> &lt;/sel&#101;ct&gt;&lt;/td&gt;<br/> &lt;/tr&gt;<br/> &lt;tr bgcolor=&#34;#FFFFFF&#34;&gt;<br/> &lt;td height=&#34;24&#34; align=&#34;center&#34;&gt;城　　市:&lt;/td&gt;<br/> &lt;td&gt;&lt;sel&#101;ct name=&#34;shi&#34; id=&#34;sel&#101;ct2&#34; onChange=&#34;Menu(this.form,3);&#34;&gt;<br/> &lt;option value=&#34;&#34; sel&#101;cted&gt;&#8212;&#8211;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/unlimited-cascading-menu-javascript.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PNG图片通明背景的兼容性问题解决办法</title>
		<link>http://www.vhuges.com/png-image-brightly-lit-background-solution-to-the-question-of-compatibility.html</link>
		<comments>http://www.vhuges.com/png-image-brightly-lit-background-solution-to-the-question-of-compatibility.html#comments</comments>
		<pubDate>Tue, 05 Jun 2007 16:31:00 +0000</pubDate>
		<dc:creator>Hugo</dc:creator>
				<category><![CDATA[敲键动鼠]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://vhuges.com?p=654</guid>
		<description><![CDATA[PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。

但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界，PNG图片的重要性将会更加凸显。

但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。

<span class="readmore"><a href="http://www.vhuges.com/png-image-brightly-lit-background-solution-to-the-question-of-compatibility.html" title="PNG图片通明背景的兼容性问题解决办法">阅读全文——共2995字</a></span>]]></description>
			<content:encoded><![CDATA[<p>PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。</p>
<p>但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界，PNG图片的重要性将会更加凸显。</p>
<p>但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。</p>
<p>现在我们将通过Hack和AlphaImageLoader滤镜来实现IE6下的PNG透明背景图片。</p>
<p>先熟悉下滤镜的语法：</p>
<div class="quote">
<div class="quote-content">filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) </p>
<p>属性：<br />enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false <br />true : 默认值。滤镜激活。 <br />false : 滤镜被禁止。 </p>
<p>sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 <br />crop : 剪切图片以适应对象尺寸。 <br />image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 <br />scale : 缩放图片以适应对象的尺寸边界。 </p>
<p>src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 </p></div>
</div>
<p>Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（&gt;），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下</p>
<div class="code">html&gt;body #png {background: url(images/bg.png) repeat;}</div>
<p>而对于IE，我们都通过滤镜的方法来定义，或许有人问，IE7不是支持PNG透明图片吗？是的，不错，IE7是支持PNG透明图片，但IE7也支持AlphaImageLoader滤镜，为了避免使用PNG图片和滤镜冲突造成的不便，我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。如下：</p>
<div class="code">* html #png {<br />filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=&quot;images/bg.png&quot;);<br />background:none;<br />}</div>
<p>这样综合起来的决绝方法就是：</p>
<div class="code">html&gt;body #png {background: url(images/bg.png) repeat;}</p>
<p>* html #png {<br />filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=&quot;images/bg.png&quot;);<br />background:none;<br />}</div>
<p><b>不过需要注意的一个地方：</b></p>
<p>使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：</p>
<p>对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。</p>
<p>另外，ntlworld.com用Javascript来处理PNG图片的透明问题，但由于会引起其他的问题，故不是很推荐使用..</p>
<p>在这里下载<a href="http://homepage.ntlworld.com/bobosola/pngfix.js" target="_blank" rel="nofollow"><b>&nbsp;pngfix.js&nbsp;</b></a>，在页面head加入<br />&lt;!&#8211;[if&nbsp;lt&nbsp;IE&nbsp;7.]&gt;<br />&lt;script&nbsp;defer&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;pngfix.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]&#8211;&gt;</p>
<p>单页面可以直接加入<br />&lt;!&#8211;[if&nbsp;lt&nbsp;IE&nbsp;7]&gt;<br />&lt;script&nbsp;language=&quot;JavaScript&quot;&gt;<br />function&nbsp;correctPNG()&nbsp;//&nbsp;correctly&nbsp;handle&nbsp;PNG&nbsp;transparency&nbsp;in&nbsp;Win&nbsp;IE&nbsp;5.5&nbsp;&amp;&nbsp;6.<br />{<br />&nbsp;&nbsp;&nbsp;var&nbsp;arVersion&nbsp;=&nbsp;navigator.appVersion.split(&quot;MSIE&quot;)<br />&nbsp;&nbsp;&nbsp;var&nbsp;version&nbsp;=&nbsp;parseFloat(arVersion[1])<br />&nbsp;&nbsp;&nbsp;if&nbsp;((version&nbsp;&gt;=&nbsp;5.5)&nbsp;&amp;&amp;&nbsp;(document.body.filters))&nbsp;<br />&nbsp;&nbsp;&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;j=0;&nbsp;j&lt;document.images.length;&nbsp;j++)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;document.images[j]<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgName&nbsp;=&nbsp;img.src.toUpperCase()<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(imgName.substring(imgName.length-3,&nbsp;imgName.length)&nbsp;==&nbsp;&quot;PNG&quot;)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgID&nbsp;=&nbsp;(img.id)&nbsp;?&nbsp;&quot;id=&#8217;&quot;&nbsp;+&nbsp;img.id&nbsp;+&nbsp;&quot;&#8217;&nbsp;&quot;&nbsp;:&nbsp;&quot;&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgClass&nbsp;=&nbsp;(img.className)&nbsp;?&nbsp;&quot;class=&#8217;&quot;&nbsp;+&nbsp;img.className&nbsp;+&nbsp;&quot;&#8217;&nbsp;&quot;&nbsp;:&nbsp;&quot;&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgTitle&nbsp;=&nbsp;(img.title)&nbsp;?&nbsp;&quot;title=&#8217;&quot;&nbsp;+&nbsp;img.title&nbsp;+&nbsp;&quot;&#8217;&nbsp;&quot;&nbsp;:&nbsp;&quot;title=&#8217;&quot;&nbsp;+&nbsp;img.alt&nbsp;+&nbsp;&quot;&#8217;&nbsp;&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgStyle&nbsp;=&nbsp;&quot;display:inline-block;&quot;&nbsp;+&nbsp;img.style.cssText&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(img.align&nbsp;==&nbsp;&quot;left&quot;)&nbsp;imgStyle&nbsp;=&nbsp;&quot;float:left;&quot;&nbsp;+&nbsp;imgStyle<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(img.align&nbsp;==&nbsp;&quot;right&quot;)&nbsp;imgStyle&nbsp;=&nbsp;&quot;float:right;&quot;&nbsp;+&nbsp;imgStyle<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(img.parentElement.href)&nbsp;imgStyle&nbsp;=&nbsp;&quot;cursor:hand;&quot;&nbsp;+&nbsp;imgStyle<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;strNewHTML&nbsp;=&nbsp;&quot;&lt;span&nbsp;&quot;&nbsp;+&nbsp;imgID&nbsp;+&nbsp;imgClass&nbsp;+&nbsp;imgTitle<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&quot;&nbsp;style=\&quot;&quot;&nbsp;+&nbsp;&quot;width:&quot;&nbsp;+&nbsp;img.width&nbsp;+&nbsp;&quot;px;&nbsp;height:&quot;&nbsp;+&nbsp;img.height&nbsp;+&nbsp;&quot;px;&quot;&nbsp;+&nbsp;imgStyle&nbsp;+&nbsp;&quot;;&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&quot;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&quot;(src=\&#8217;&quot;&nbsp;+&nbsp;img.src&nbsp;+&nbsp;&quot;\&#8217;,&nbsp;sizingMethod=&#8217;scale&#8217;);\&quot;&gt;&lt;/span&gt;&quot;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.outerHTML&nbsp;=&nbsp;strNewHTML<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j&nbsp;=&nbsp;j-1<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;<br />}<br />window.attachEvent(&quot;onload&quot;,&nbsp;correctPNG);<br />&lt;/script&gt;<br />&lt;![endif]&#8211;&gt;</p>
<p>自:The&nbsp;PNG&nbsp;problem&nbsp;in&nbsp;Windows&nbsp;Internet&nbsp;Explorer<br /><a href="http://homepage.ntlworld.com/bobosola/index.htm" target="_blank" rel="nofollow">http://homepage.ntlworld.com/bobosola/index.htm</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.vhuges.com/png-image-brightly-lit-background-solution-to-the-question-of-compatibility.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
