<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>三原色创意科技 - 常用Html代码</title><link>http://www.syscy.com/blog/</link><description>创意先锋专业制作－北京网站、平面、三维影像 - </description><generator>RainbowSoft Studio Z-Blog 1.8 Spirit Build 80710</generator><language>zh-CN</language><copyright>Copyright  三原色创意 SYSCY.COM. Some Rights Reserved.</copyright><pubDate>Thu, 09 Sep 2010 18:00:22 +0800</pubDate><item><title>一个常见的FLV播放器代码下载</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/flvplayer1.html</link><pubDate>Mon, 06 Apr 2009 15:59:15 +0800</pubDate><guid>http://www.syscy.com/blog/post/flvplayer1.html</guid><description><![CDATA[<p>下面这是一个常见的FLV播放器代码.</p><p>FLV 是FLASH VIDEO 的简称，相比较SWF 文件体积庞，FLV 流媒体格式文件极小、加载速度极快，目前各在线视频网站均FLV视频格式，如新浪播客、56、优酷、土豆、酷6、Youtube 等，FLV 已经成为当前视频文件的主流格式，是目前增长最快、最为广泛的视频传播格式。</p><p>FLV 是在sorenson 公司的压缩算法的基础上开发出来的，FLV格式不仅可以轻松的导入Flash 中，速度极快，而且能起到保护版权的作用，并且可以不通过本地的微软或者REAL 播放器播放视频。</p><p>想要在网页中播放FLV 格式的文件，首先需要一个FLV 播放器，然后就是添加一段实现FLV 播放的代码。</p><p style="text-align: center;"><object width="240" height="192" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf" name="movie" /><param value="high" name="quality" /><param value="true" name="allowFullScreen" /><param value="vcastr_file=#&amp;LogoText=syscy.com&amp;BufferTime=3" name="FlashVars" />     <embed width="240" height="192" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" flashvars="vcastr_file=#&amp;LogoText=syscy.com" allowfullscreen="true" src="http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf"></embed>   </object></p><p>[<a target="_blank" href="http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf">下载</a>此播放器, swf格式,请用右键另存为下载]</p><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol class="dp-xml" start="1">    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">object</span><span>&nbsp;</span><span class="attribute">classid</span><span>=</span><span class="attribute-value">&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot;</span><span>&nbsp;</span><span class="attribute">codebase</span><span>=</span><span class="attribute-value">&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&quot;</span><span>&nbsp;</span><span class="attribute">width</span><span>=</span><span class="attribute-value">&quot;240&quot;</span><span>&nbsp;</span><span class="attribute">height</span><span>=</span><span class="attribute-value">&quot;192&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;movie&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;quality&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;high&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;allowFullScreen&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;true&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;FlashVars&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;vcastr_file=#&amp;LogoText=syscy.com&amp;BufferTime=3&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">embed</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">&quot;http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf&quot;</span><span>&nbsp;</span><span class="attribute">allowfullscreen</span><span>=</span><span class="attribute-value">&quot;true&quot;</span><span>&nbsp;</span><span class="attribute">flashvars</span><span>=</span><span class="attribute-value">&quot;vcastr_file=#&amp;LogoText=syscy.com&quot;</span><span>&nbsp;</span><span class="attribute">quality</span><span>=</span><span class="attribute-value">&quot;high&quot;</span><span>&nbsp;</span><span class="attribute">pluginspage</span><span>=</span><span class="attribute-value">&quot;http://www.macromedia.com/go/getflashplayer&quot;</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;application/x-shockwave-flash&quot;</span><span>&nbsp;</span><span class="attribute">width</span><span>=</span><span class="attribute-value">&quot;240&quot;</span><span>&nbsp;</span><span class="attribute">height</span><span>=</span><span class="attribute-value">&quot;192&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">embed</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">object</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p>用法讲解:</p><p>240 ：播放器的宽度。</p><p>192：播放器的高度。</p><p>Flvplayer.swf ：播放器文件地址，如果大家没空间放，请直接用<span><span class="attribute-value">http://www.syscy.com/sys-tool/flvplayer/flvplayer1.swf</span></span>。</p><p><span><span class="attribute-value">vcastr_file=# </span></span>：flv文件地址。这里你可以把#换成实际的FLV文件的地址.</p><p><span><span class="attribute-value">LogoText=syscy.com</span></span>：播放器顶部标志，可缺省。目前是syscy.com</p><p>Flvplayer.swf&nbsp; 这是FLV播放器，也就是上面下载的播放文件，很重要，路径一定要对，否则播放错误，可以放其他目录，如果放在 img目录就是：img/Flvplayer.swf&nbsp;&nbsp; ，前面不带&ldquo;/&rdquo;。</p><p>这个播放器支持不在同一个网域下flv的播放,也就是说,你只要知道flv的绝对路径,你就可以播放. 比如,你播放新浪网的视频...</p><p>&nbsp;</p><p>本文来自网络:</p><p>http://free.cnzz.cc/4064.html</p><p>http://www.sinoblog.org/2009/01/flv-code.html</p><p>&nbsp;</p><p>&nbsp;</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/flvplayer1.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=170</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=170&amp;key=f86164fd</trackback:ping></item><item><title>在线视频音乐播放代码</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/RM.html</link><pubDate>Sun, 01 Feb 2009 00:45:54 +0800</pubDate><guid>http://www.syscy.com/blog/post/RM.html</guid><description><![CDATA[<p>1.极简MP3,音乐播放格式</p><div><object width="290" height="24" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="http://cn.yimg.com/nab/music/musicplay.swf?soundFile=http://www.aq14.com/zy/24/05.mp3&amp;bg=0xCDDFF3&amp;leftbg=0x357DCE&amp;lefticon=0xF2F2F2&amp;rightbg=0x357DCE&amp;rightbghover=0x4499EE&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0x357DCE&amp;slider=0x357DCE&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0x8EC2F4&amp;autostart=no&amp;loop=no" name="movie" /><param value="high" name="quality" /><param name="wmode" value="transparent" /><embed width="290" height="24" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="transparent" src="http://cn.yimg.com/nab/music/musicplay.swf?soundFile=http://www.aq14.com/zy/24/05.mp3&amp;bg=0xCDDFF3&amp;leftbg=0x357DCE&amp;lefticon=0xF2F2F2&amp;rightbg=0x357DCE&amp;rightbghover=0x4499EE&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0x357DCE&amp;slider=0x357DCE&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0x8EC2F4&amp;autostart=no&amp;loop=no"></embed></object></div><p>&nbsp;</p><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">object</span><span>&nbsp;</span><span class="attribute">classid</span><span>=</span><span class="attribute-value">&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot;</span><span>&nbsp;</span><span class="attribute">codebase</span><span>=</span><span class="attribute-value">&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&quot;</span><span>&nbsp;</span><span class="attribute">height</span><span>=</span><span class="attribute-value">&quot;24&quot;</span><span>&nbsp;</span><span class="attribute">width</span><span>=</span><span class="attribute-value">&quot;290&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;movie&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;http://cn.yimg.com/nab/music/musicplay.swf?soundFile=http://www.aq14.com/zy/24/05.mp3&amp;bg=0xCDDFF3&amp;leftbg=0x357DCE&amp;lefticon=0xF2F2F2&amp;rightbg=0x357DCE&amp;rightbghover=0x4499EE&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0x357DCE&amp;slider=0x357DCE&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0x8EC2F4&amp;autostart=no&amp;loop=no&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;quality&quot;</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;high&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">param</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">&quot;transparent&quot;</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">&quot;wmode&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">embed</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">&quot;http://cn.yimg.com/nab/music/musicplay.swf?soundFile=http://www.aq14.com/zy/24/05.mp3&amp;bg=0xCDDFF3&amp;leftbg=0x357DCE&amp;lefticon=0xF2F2F2&amp;rightbg=0x357DCE&amp;rightbghover=0x4499EE&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0x357DCE&amp;slider=0x357DCE&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0x8EC2F4&amp;autostart=no&amp;loop=no&quot;</span><span>&nbsp;</span><span class="attribute">wmode</span><span>=</span><span class="attribute-value">&quot;transparent&quot;</span><span>&nbsp;</span><span class="attribute">quality</span><span>=</span><span class="attribute-value">&quot;high&quot;</span><span>&nbsp;</span><span class="attribute">pluginspage</span><span>=</span><span class="attribute-value">&quot;http://www.macromedia.com/go/getflashplayer&quot;</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;application/x-shockwave-flash&quot;</span><span>&nbsp;</span><span class="attribute">height</span><span>=</span><span class="attribute-value">&quot;24&quot;</span><span>&nbsp;</span><span class="attribute">width</span><span>=</span><span class="attribute-value">&quot;290&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">object</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p>&nbsp;</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/RM.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=160</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=160&amp;key=032b0845</trackback:ping></item><item><title>CSS中背景图片定位（转）</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/background-position.html</link><pubDate>Sat, 31 Jan 2009 00:47:36 +0800</pubDate><guid>http://www.syscy.com/blog/post/background-position.html</guid><description><![CDATA[<div class="entry-content"><div class="entry-body"><p>这篇笔记很专业，对制作网页不感兴趣的朋友就不用看了。</p></div><div class="entry-more" id="more"><p>我总觉得，CSS中背景图片的定位有些似是而非，这个问题困扰我很久了，今天总算搞懂了，一定要记下来，防止忘记。</p><p>在CSS中，背景图片的定位方位有3种：</p><blockquote><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>1）关键字：</span><span class="keyword">background-position</span><span>:&nbsp;</span><span class="string">top</span><span>&nbsp;</span><span class="keyword">right</span><span class="string">right</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>2）像素：<span class="keyword">background-position</span><span>:&nbsp;</span><span class="string">0px</span><span>&nbsp;</span><span class="string">0px</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>3）百分比：<span class="keyword">background-position</span><span>:&nbsp;0%&nbsp;0%;&nbsp;&nbsp;</span></span></li></ol></div><div>&nbsp;</div></blockquote><p>上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。</p><p>前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是&ldquo;20px 10px&rdquo;和&quot;60px  50px&quot;，都是图片的原点在那个位置上，图中用X表示。</p><p><img width="288" height="300" alt="bg2008050701.png" src="http://www.syscy.com/blog/upload/2009/1/200901310050221226.png" /></p><p>但是第三种定位，也就是百分比定位，不是这样。<strong>它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。</strong>比如，如果放置位置是&ldquo;20%  10%&rdquo;，实际结果如下图，可以看到这个点是在图片本身的&ldquo;20% 10%&rdquo;的位置上。</p><p><img width="500" height="300" alt="bg2008050702.gif" src="http://www.syscy.com/blog/upload/2009/1/200901310050227257.gif" /></p><p>下面是一个有趣的例子。</p><p>背景图片是四个边长为100px的方块叠在一起：</p><p><img width="100" height="400" alt="bg2008050703.png" src="http://www.syscy.com/blog/upload/2009/1/200901310050224141.png" /></p><p>请问怎样才能将其横过来：</p><p><img width="400" height="100" alt="bg2008050704.png" src="http://www.syscy.com/blog/upload/2009/1/200901310050225354.png" /></p><p>答案是，在网页中先设置四个div区域：</p><blockquote><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;box1&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;box2&quot;</span><span>&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;box3&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;box4&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><div>&nbsp;</div></blockquote><p>然后，这样编写CSS：</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>.box1,&nbsp;.box2,&nbsp;.box3,&nbsp;.box4&nbsp;{&nbsp;&nbsp;</span></span></li>    <li><span><span class="keyword">float</span><span>:</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="keyword">width</span><span>:</span><span class="string">100px</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span><span class="keyword">height</span><span>:</span><span class="string">100px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="keyword">position</span><span>:</span><span class="string">relative</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span><span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#F3F2E2</span><span>&nbsp;</span><span class="string">url</span><span>(1234.png)&nbsp;</span><span class="string">no-repeat</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>.box1&nbsp;{&nbsp;&nbsp;</span></li>    <li><span><span class="keyword">background-position</span><span>:0%&nbsp;0%;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>.box2&nbsp;{&nbsp;&nbsp;</span></li>    <li><span><span class="keyword">background-position</span><span>:0%&nbsp;33.33333%;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>.box3&nbsp;{&nbsp;&nbsp;</span></li>    <li><span><span class="keyword">background-position</span><span>:0%&nbsp;66.66666%;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>.box4&nbsp;{&nbsp;&nbsp;</span></li>    <li><span><span class="keyword">background-position</span><span>:0%&nbsp;100%;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><p>点击<a href="http://www.sitepoint.com/examples/jquery/test.php" target="_blank">这里</a>查看最后的效果。可以看到第二和第三个方块的设置，并不是一般想象中的&ldquo;0% 25%&rdquo;和&ldquo;0% 75%&rdquo;。</p><p>不过说实话，这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于，当页面缩放的时候，背景图片也会跟着一起缩放，具体请参考下面&ldquo;延伸阅读&rdquo;中的第二篇文章。</p><p>[延伸阅读]</p><p>1. <a href="http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/" target="_blank">CSS: Using Percentages in Background-Image</a></p><p>2. <a href="http://www.communitymx.com/content/article.cfm?cid=afc58" target="_blank">Creating Liquid Faux Columns</a></p><p>（完）</p><p>(转自<a href="http://www.ruanyifeng.com/blog" target="_blank">阮一峰个人博客</a>：http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html)</p></div></div>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/background-position.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=159</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=159&amp;key=dbaecc78</trackback:ping></item><item><title>CSS设计：百分比进行背景图片定位（转）</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/background-100.html</link><pubDate>Sat, 31 Jan 2009 00:36:50 +0800</pubDate><guid>http://www.syscy.com/blog/post/background-100.html</guid><description><![CDATA[<p>　　大部分人应该习惯于使用描述性词语（left、top、center&hellip;）或者数值（20px、1em&hellip;）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用  </p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;50%&nbsp;</span><span class="string">20px</span><span>;&nbsp;&nbsp;&nbsp;</span></span></li></ol></div><p>之所以不使用  </p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;</span><span class="string">center</span><span>&nbsp;</span><span class="string">20px</span><span>;&nbsp;&nbsp;&nbsp;</span></span></li></ol></div><p>是因为类似这种描述性词语和数值混用的形式不被W3C推荐。（单纯的描述性词语组合使用是没有问题的，例如：background-position:  right bottom;）<br /><br />使用百分比进行定位的好处是可以利用CSS的计算功能，达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中，使用  </p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;</span><span class="string">150px</span><span>&nbsp;</span><span class="string">150px</span><span>;&nbsp;&nbsp;&nbsp;</span></span></li></ol></div><p>可以看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。 <br /><img border="0" alt="css" src="http://www.syscy.com/blog/upload/2009/1/200901310042144546.jpg" /></p><p>&nbsp;</p><p>　　而把150px替换为50%，使用</p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;50%&nbsp;50%;&nbsp;&nbsp;</span></span></li></ol></div><p>　　看到的并不是如下的效果</p><center><img border="0" alt="css" src="http://www.syscy.com/blog/upload/2009/1/200901310042147834.jpg" /></center><p>　　而是这样　</p><center><img border="0" alt="css" src="http://www.syscy.com/blog/upload/2009/1/200901310042144074.jpg" /></center><p>&nbsp;</p><p>　　可见，CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用</p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;100%&nbsp;100%;&nbsp;&nbsp;</span></span></li></ol></div><p>　　定位的时候，图片被放置在容器的右下角，而并没有跑出容器。（如果使用 background-position: 300px 300px;  的话，背景图片会被移出容器）</p><p>　　同样，如果使用</p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="keyword">background-position</span><span>:&nbsp;20%&nbsp;20%;&nbsp;&nbsp;</span></span></li></ol></div><p>　　会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。</p><p>&nbsp;</p><p>(原文来自硅谷动力：http://www.enet.com.cn/article/2008/1024/A20081024378127.shtml)</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/background-100.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=158</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=158&amp;key=be16a11b</trackback:ping></item><item><title>CSS来控制网页背景</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/homepage-background.html</link><pubDate>Fri, 30 Jan 2009 21:24:56 +0800</pubDate><guid>http://www.syscy.com/blog/post/homepage-background.html</guid><description><![CDATA[<p>以前我们做网页背景是利用大背景图来做，现在利用CSS样式可以更好的定义控制网页的背景．特别是现在宽屏和传统的17&quot;显示屏并用的情况下，我们好好利用CSS设计网页就更容易啦．</p><p><strong>背景颜色 background-color</strong>&nbsp;</p><p>这个的默认值是transparent(透明色)。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span>body{</span><span class="keyword">background-color</span><span>:</span><span class="string">yellow</span><span>}&nbsp;&nbsp;</span></span></li>    <li><span>H1{<span class="keyword">background-color</span><span>:</span><span class="colors">#000000</span><span>}&nbsp;&nbsp;</span></span></li></ol></div><p><strong>&nbsp;背景图片 background-image</strong></p><p>背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，所指的并非是用这种方法，我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片，如果需要显示图片的话，那么只要在后面加上url(图片的地址)就可以了，不显示嘛，那是最简单不过的了，什么也不要就行了，因为这个默认的就是none，而要加的话，就是在后面加上这个 none就可以了。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>body{</span><span class="keyword">background-image</span><span>:</span><span class="string">url</span><span>(</span><span class="string">'file&amp;:///C:/WINDOWS/BACKGRND.GIF'</span><span>)}&nbsp;&nbsp;&nbsp;</span></span></li>    <li><span>　　h1{<span class="keyword">background-image</span><span>:</span><span class="string">url</span><span>(</span><span class="string">'none'</span><span>)}&nbsp;&nbsp;</span></span></li></ol></div><p><strong>图片是否重复显示 background-repeat</strong></p><p>有时候重复显示是需要的，可是有时候重复显示则是让人头痛的，现在这个可以很好的帮助你了，而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复)，而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然，它可以控制图片的重复，也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片，而不是重复出现的，这个可不是默认的哟，默认的是重复显示背景图片(repeat)。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>body{</span><span class="keyword">background-image</span><span>:</span><span class="string">url</span><span>(</span><span class="string">'file&amp;:///C:/WINDOWS/BACKGRND.GIF'</span><span>);</span></span><span><span class="keyword">background-repeat</span><span>:</span><span class="string">no-repeat</span><span>}&nbsp;&nbsp;</span></span></li></ol></div><p><strong>定位图片显示位置 background-position</strong></p><p>一张背景图片经过上面的设置后往往还不够的，因为当你使用上面的不重复显示设置后，图片只显示在页面的左上角，而不会在其它地方，可是如果要在中间或者其它地方出现这张背景图片的话，那么background-position这个就可以帮你了，因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%)，由两个值来设定，中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom，也可以用百分数值指定相对位置或用一个值来指定绝对位置，如50%表示的位置是在中心，而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是，1当你设置值的时候只提供一个值，则相当于只指定水平位置，垂直自动设置为50%;2当你设置的值是负数的时候，则表示背景图片超出边界。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>body{</span><span class="keyword">background-image</span><span>:</span><span class="string">url</span><span>(</span><span class="string">'file&amp;:///C:/WINDOWS&nbsp;/BACKGRND.GIF'</span><span>);</span><span class="keyword">background-repeat</span><span>:</span><span class="string">no-repeat</span><span>;</span><span class="keyword">background-position</span><span>:</span><span class="string">100px</span><span>&nbsp;</span><span class="string">10px</span><span>}&nbsp;&nbsp;</span></span></li></ol></div><p><strong>控制图片是否滚动 background-attachment</strong></p><p>上面的两步可以帮你完成图像的定位，可是这样做好以后还不是完美的，因为如果你的页面有滚动条的时候，那么你这张背景图片就不会永远定位在那个位置了，如果想要图片永远定位在那个位置，就只有让这张图片随着页面的内容的滚动而滚动，这时background- attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的，毕竟scroll是默认的，也就是不让图片随页面的内容而滚动的。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>body{</span><span class="keyword">background-image</span><span>:</span><span class="string">url</span><span>(</span><span class="string">'file&amp;:///C:/WINDOWS/BACKGRND.GIF'</span><span>);</span><span class="keyword">background-repeat</span><span>:</span><span class="string">no-repeat</span><span>;</span><span class="keyword">background-attachment</span><span>:</span><span class="string">fixed</span><span>}&nbsp;&nbsp;</span></span></li></ol></div><p><strong>采用滤镜拉伸背景图</strong></p><p>现在用宽屏和大分辨率的人都多了,而一般网页还是按照1024*768的分辨率来做的,这时候设置背景图片就出问题了,默认情况下是平铺的,如果需要改为拉伸的话,利用滤镜就可以啦.</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>table1{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(<span class="keyword">src</span><span>=</span><span class="string">'../images/counter_bg.jpg'</span><span>,&nbsp;sizingMethod=</span><span class="string">'scale'</span><span>)&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><p><strong>背景图居中</strong>(宽屏中比较适用)</p><p>网页背景在宽屏中怎么居中</p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span>body{</span><span class="keyword">background-position</span><span>:&nbsp;</span><span class="string">center</span><span>&nbsp;50%;}&nbsp;&nbsp;</span></span></li></ol></div><p>可以不写上面的50%</p><p>background-position: center 50% top;&nbsp; 顶部为居中</p><p><strong>CSS综合简化写法：</strong></p><p>可以把以上的代码全部加在一起使用，也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开，而且不要把背景颜色的代码放在背景图片的URL后面，以免图片显示不出来。</p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span>body{</span><span class="keyword">background</span><span>:</span><span class="string">green</span><span>&nbsp;</span><span class="string">url</span><span>(</span><span class="string">'file&amp;:///C:/WINDOWS/BACKGRND.GIF'</span><span>)&nbsp;</span><span class="string">fixed</span><span>&nbsp;</span><span class="string">100px</span><span>&nbsp;</span><span class="string">50px</span><span>&nbsp;</span><span class="string">no-repeat</span><span>}&nbsp;&nbsp;</span></span></li></ol></div><p>&nbsp;</p><p>以上信息整理理于以下网页：</p><p>&nbsp;http://www.it.oaod.com/PcTech-7231.html</p><p>http://blog.csdn.net/unclefat/archive/2007/07/13/1688723.aspx</p><p>http://wenda.tianya.cn/wenda/thread?tid=55008e430d8029ae&amp;clk=wttpcts</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/homepage-background.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=157</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=157&amp;key=1aed419f</trackback:ping></item><item><title>CSS高度自适应,CSS背景自动延伸(2)</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/Css-height-fix2.html</link><pubDate>Tue, 27 Jan 2009 00:03:12 +0800</pubDate><guid>http://www.syscy.com/blog/post/Css-height-fix2.html</guid><description><![CDATA[<p>这是转自网络的文章，原文地址如下：upload/2009/1/200901310056030657.gif) repeat-y 300px;}</li>    <li>#column1{ float:left; width:300px;}</li>    <li>#column2{ float:right; width:476px;}</li>    <li>.clear{ clear:both;}</li></ol></div><em onclick="copycode($('code1'));">复制代码</em></div><p><strong>2 JS脚本法：</strong></p><p>代码的原理基本就是：读取高度，判断高度，高度相等。</p><p>&nbsp;</p><p>代码如下</p><div class="blockcode"><div id="code2"><ol>    <li>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</li>    <li>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</li>    <li>&lt;head&gt;</li>    <li>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;</li>    <li>&lt;title&gt;练习文档01&lt;/title&gt;</li>    <li>&lt;style type=&quot;text/css&quot;&gt;</li>    <li>&lt;!--</li>    <li>body{</li>    <li>&nbsp; &nbsp; margin:0px;padding:0px;</li>    <li>}</li>    <li>.Div_top{</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width:100%;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background:#93beff;</li>    <li>}</li>    <li>.Div_bottom{</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width:100%;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background:#ff00fc;</li>    <li>}</li>    <li>.Div_Left{</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;position:absolute;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width:200px;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background:#ff6000;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;left:0px;</li>    <li>}</li>    <li>.Div_Right{</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;margin-left: 200px;</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background:#00c17b;</li>    <li>}</li>    <li>--&gt;</li>    <li>&lt;/style&gt;</li>    <li>&lt;script&gt;</li>    <li>function SameH(leftDiv,rightDiv)</li>    <li>{</li>    <li>var a=document.getElementById(leftDiv);</li>    <li>var b=document.getElementById(rightDiv);</li>    <li>document.write(a.clientHeight+'--');</li>    <li>document.write(b.clientHeight+'--');</li>    <li>document.write(a.scrollHeight+'--');</li>    <li>document.write(b.scrollHeight+'--');</li>    <li>if (a.scrollHeight &lt; b.scrollHeight)</li>    <li>{</li>    <li>a.style.height= b.scrollHeight+&quot;px&quot;;</li>    <li>}</li>    <li>else</li>    <li>{</li>    <li>b.style.height= a.scrollHeight+&quot;px&quot;;</li>    <li>}</li>    <li>}</li>    <li>&lt;/script&gt;</li>    <li>&lt;/head&gt;</li>    <li>&lt;body&gt;</li>    <li>&lt;div class=&quot;Div_top&quot;&gt;这是顶部的div&lt;/div&gt;</li>    <li>&lt;div id=&quot;Div1&quot; class=&quot;Div_Left&quot;&gt;11111&lt;br&gt;222222&lt;br&gt;33333333&lt;br&gt;444444444&lt;br&gt;555555555&lt;/div&gt;</li>    <li>&lt;div id=&quot;Div2&quot; class=&quot;Div_Right&quot;&gt;22222&lt;br&gt;dsaf&lt;/div&gt;</li>    <li>&lt;div class=&quot;Div_bottom&quot;&gt;---------------------------------这是底部的DIV，在左中右中DIV 不等高的情况下会跑上去重叠了&lt;br&gt;----------------------------------------我现在想用一个 JavaScript代码来令左右两半的Div等高&lt;br&gt;&lt;br&gt;(注意:中左中右两个DIV的高度是无法事先确定 的)&lt;/div&gt;</li>    <li>&lt;script&gt;</li>    <li>SameH(&quot;Div1&quot;,&quot;Div2&quot;);</li>    <li>&lt;/script&gt;</li>    <li>&lt;/body&gt;</li></ol></div><em onclick="copycode($('code2'));">复制代码</em></div><p><strong>3 容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法</strong></p><p>原作者:Alex Robinson</p><p>&nbsp;</p><p>原文标题:Equal Height Columns</p><p>&nbsp;</p><p>这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本 的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。</p><p>&nbsp;</p><p>代码</p><div class="blockcode"><div id="code3"><ol>    <li>#wrap{</li>    <li>overflow: hidden;</li>    <li>}</li>    <li>&nbsp;</li>    <li>&nbsp;</li>    <li>#sideleft, #sideright{</li>    <li>padding-bottom: 32767px;</li>    <li>margin-bottom: -32767px;</li>    <li>}</li></ol></div><em onclick="copycode($('code3'));">复制代码</em></div><p><strong>实现原理：</strong></p><p>块元素必须包含在一个容器里。</p><p>&nbsp;</p><p>应用overflow: hidden 到容器里的元素。</p><p>&nbsp;</p><p>应用 padding-bottom（足够大的值）到列的块元素 。</p><p>&nbsp;</p><p>应用margin-bottom（足够大的值）到列的块元素。</p><p>&nbsp;</p><p>padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。</p><p>&nbsp;</p><p>兼容各浏览器</p><p>&nbsp;</p><p>IE Mac 5</p><p>&nbsp;</p><p>得到高度正确，所以要过滤掉上面的代码。</p><div class="blockcode"><div id="code4"><ol>    <li>/*\*/</li>    <li>#sideleft, #sideright{</li>    <li>padding-bottom: 32767px;</li>    <li>margin-bottom: -32767px;</li>    <li>}</li>    <li>/**/</li></ol></div><em onclick="copycode($('code4'));">复制代码</em></div><p>Opera</p><p>&nbsp;</p><p>1. Opera7.0-7.2不能正确清除溢出部分，所以要加：</p><div class="blockcode"><div id="code5"><ol>    <li>/* easy clearing */</li>    <li>#wrap:after</li>    <li>{</li>    <li>content: '[DO NOT LEAVE IT IS NOT REAL]';</li>    <li>display: block;</li>    <li>height: 0;</li>    <li>clear: both;</li>    <li>visibility: hidden;</li>    <li>}</li>    <li>#wrap</li>    <li>{</li>    <li>display: inline-block;</li>    <li>}</li>    <li>/*\*/</li>    <li>#wrap</li>    <li>{</li>    <li>display: block;</li>    <li>}</li>    <li>/* end easy clearing */</li>    <li>/*\*/</li></ol></div><em onclick="copycode($('code5'));">复制代码</em></div><p>2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：</p><div class="blockcode"><div id="code6"><ol>    <li>/*\*/</li>    <li>#sideleft, #sideright</li>    <li>{</li>    <li>padding-bottom: 32767px !important;</li>    <li>margin-bottom: -32767px !important;</li>    <li>}</li>    <li>@media all and (min-width: 0px) {</li>    <li>#sideleft, #sideright</li>    <li>{</li>    <li>padding-bottom: 0 !important;</li>    <li>margin-bottom: 0 !important;</li>    <li>}</li>    <li>#sideleft:before, #sideright:before</li>    <li>{</li>    <li>content: '[DO NOT LEAVE IT IS NOT REAL]';</li>    <li>display: block;</li>    <li>background: inherit;</li>    <li>padding-top: 32767px !important;</li>    <li>margin-bottom: -32767px !important;</li>    <li>height: 0;</li>    <li>}</li>    <li>}</li>    <li>/**/</li></ol></div><em onclick="copycode($('code6'));">复制代码</em></div><p>3.Opera9的B2在修正8的bug.</p><p>&nbsp;</p><p>测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。</p><p><br />&nbsp;</p><p>最终效果:</p><div id="code7"><ol>    <li>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</li>    <li>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</li>    <li>&lt;head&gt;</li>    <li>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;</li>    <li>&lt;title&gt;Equal height(DIV+CSS布局中自适应高度的解决方法)&lt;/title&gt;</li>    <li>&lt;style type=&quot;text/css&quot;&gt;</li>    <li>body{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; font-size: 12px;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; line-height: 140%;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background:#E7DFD3;</li>    <li>}</li>    <li>#wrap{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; width: 750px;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;</li>    <li>}</li>    <li>#header{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background: #E8E8E8;</li>    <li>}</li>    <li>#sideleft{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; width: 580px;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background: #FFF;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;</li>    <li>}</li>    <li>#sideright{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; width: 170px;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; float: left;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background: #F0F0F0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;</li>    <li>}</li>    <li>/* easy clearing */</li>    <li>#wrap:after</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; content: '[DO NOT LEAVE IT IS NOT REAL]';</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; display: block;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; height: 0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; clear: both;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; visibility: hidden;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>#wrap</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>/*\*/</li>    <li>#wrap</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; display: block;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>/* end easy clearing */</li>    <li>/*\*/</li>    <li>#sideleft, #sideright</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 32767px !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: -32767px !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>@media all and (min-width: 0px) {</li>    <li>#sideleft, #sideright</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 0 !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 0 !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>#sideleft:before, #sideright:before</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; {</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; content: '[DO NOT LEAVE IT IS NOT REAL]';</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; display: block;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background: inherit;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 32767px !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: -32767px !important;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; height: 0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; }</li>    <li>}</li>    <li>/**/</li>    <li>#footer{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; background: #E8E8E8;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; float: left;</li>    <li>}</li>    <li>h1,h2,address,p{</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; padding: .8em;</li>    <li>}</li>    <li>h1,h2{font-size: 20px;}</li>    <li>&lt;/style&gt;</li>    <li>&lt;/head&gt;</li>    <li>&lt;body&gt;</li>    <li>&lt;div id=&quot;wrap&quot;&gt;</li>    <li>&nbsp;&nbsp;&lt;div id=&quot;header&quot;&gt;</li>    <li>&nbsp; &nbsp; &lt;h1&gt;Head&lt;/h1&gt;</li>    <li>&nbsp;&nbsp;&lt;/div&gt;</li>    <li>&nbsp;&nbsp;&lt;div id=&quot;sideleft&quot;&gt;</li>    <li>&nbsp;&nbsp;&lt;h2&gt;sideleft&lt;/h2&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 像素是计算机屏幕上的不可缩放的点，而一个</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;h3 就是一个字大小的方块。由于字体大小的变化， h3</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;代表用户喜欢的文字大小的相对单位。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 像素是计算机屏幕上的不可缩放的点，而一个</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;h3 就是一个字大小的方块。由于字体大小的变化， h3</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;代表用户喜欢的文字大小的相对单位。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp;</li>    <li>&nbsp;&nbsp;&lt;/div&gt;</li>    <li>&nbsp;&nbsp;&lt;div id=&quot;sideright&quot;&gt;</li>    <li>&nbsp;&nbsp;&lt;h2&gt;sideright&lt;/h2&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 像素是计算机屏幕上的不可缩放的点，而一个</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;h3 就是一个字大小的方块。由于字体大小的变化， h3</li>    <li>&nbsp; &nbsp;&nbsp; &nbsp;代表用户喜欢的文字大小的相对单位。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 &lt;/p&gt;</li>    <li>&nbsp; &nbsp; &lt;p&gt; 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 &lt;/p&gt;</li>    <li>&nbsp;&nbsp;&lt;/div&gt;</li>    <li>&nbsp;&nbsp;&lt;div id=&quot;footer&quot;&gt;</li>    <li>&nbsp; &nbsp; &lt;address&gt;</li>    <li>&nbsp; &nbsp; Footer</li>    <li>&nbsp; &nbsp; &lt;/address&gt;</li>    <li>&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;制作：&lt;a href=&quot;http://www.forest53.com&quot;&gt;forestgan&lt;/a&gt;&lt;/p&gt;</li>    <li>&nbsp;&nbsp;&lt;/div&gt;</li>    <li>&lt;/div&gt;</li>    <li>&lt;/body&gt;</li>    <li>&lt;/html&gt;</li></ol></div><hr /><p>以上文章还可参考：<a target="_blank" href="http://www.syscy.com/blog/post/Css-height-fix.html">CSS高度自适应,CSS背景自动延伸</a></p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/Css-height-fix2.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=156</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=156&amp;key=8df0e121</trackback:ping></item><item><title>CSS高度自适应,CSS背景自动延伸</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/Css-height-fix.html</link><pubDate>Mon, 26 Jan 2009 23:20:49 +0800</pubDate><guid>http://www.syscy.com/blog/post/Css-height-fix.html</guid><description><![CDATA[<p>高度自适应的问题，确切的说应该是背景自适应的问题，因为许多布局中，需要将背景随着高度的自动变化而平铺，现在长江VS长征总结一下网上常见的处理方法．</p><p>大致有三种思路：<br />1.背景图<br />2.CSS控制：因为当前浏览器软件众多，版本不一（IE6,IE7,...firefox2,firefox3,opera 8...opear9）解决起来需要用很多的hack<br />3.JS控制：需要用户端支持javascript（现在还有不支持的吗？呵呵）．另外，就是编写者也需要注重代码的实现程度．</p><p>以下部分参考整理于如下网页来源：</p><p>天极：http://homepage.yesky.com/226/2405726.shtml</p><p>p7演示:http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm</p><p>effect.cn博客：http://www.effect.cn/_v3/post/123.html</p><p>网站：http://ajax.cnrui.cn/article/47/49/2006/20060809540.shtml</p><p><span style="color: rgb(255, 0, 0);"><strong>高度自适应方法一背景图：</strong></span></p><hr /><p><font face="Verdana"><strong>背景图填充<br /></strong>这是使用最广泛的一种做法，无hacks，推荐使用．<br /></font></p><hr /><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol class="dp-xml" start="1">    <li class="alt"><span><span>&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">html</span><span>&nbsp;</span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">meta</span><span>&nbsp;</span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">&quot;Content-Type&quot;</span><span>&nbsp;</span><span class="attribute">content</span><span>=</span><span class="attribute-value">&quot;text/html;&nbsp;charset=utf-8&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>Equal&nbsp;height(列高度相同的方法)</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">style</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/css&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>body{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;font-size:&nbsp;12px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;font-family:&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;line-height:&nbsp;140%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:#E7DFD3;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#middle{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;580px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;float:left;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:#FFFFFF;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;text-align:left;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;</span></li>    <li><span>#header,#footer{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;750px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;text-align:center;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#sideleft{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;580px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;position:relative;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-left:-580px;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#sideright{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;170px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;float:&nbsp;right;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;position:relative;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0&nbsp;-170px&nbsp;0&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:&nbsp;#F0F0F0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>#footer{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;clear:both;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2,address,p{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;padding:&nbsp;.8em;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2{font-size:&nbsp;20px;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">style</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/javascript&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>//&nbsp;<span class="cdata">&lt;![CDATA[</span>&nbsp;</span></li>    <li><span>&nbsp;</span></li>    <li class="alt"><span><span class="cdata">function&nbsp;toggleContent(name,n)&nbsp;{</span>&nbsp;</span></li>    <li><span><span class="cdata">&nbsp;var&nbsp;i,t='',el&nbsp;=&nbsp;document.getElementById(name);</span>&nbsp;</span></li>    <li class="alt"><span><span class="cdata">&nbsp;if&nbsp;(!el.origCont)&nbsp;el.origCont&nbsp;=&nbsp;el.innerHTML;</span>&nbsp;</span></li>    <li><span><span class="cdata">&nbsp;</span>&nbsp;</span></li>    <li class="alt"><span><span class="cdata">&nbsp;for&nbsp;(i=0;i&lt;n;i++)&nbsp;t&nbsp;+=&nbsp;el.origCont;</span>&nbsp;</span></li>    <li><span><span class="cdata">&nbsp;el.innerHTML&nbsp;=&nbsp;t;</span>&nbsp;</span></li>    <li class="alt"><span><span class="cdata">&nbsp;}</span>&nbsp;</span></li>    <li><span>&nbsp;</span></li>    <li class="alt"><span><span class="cdata">//&nbsp;]]&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>Head</span><span class="tag">&lt;/</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;middle&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideleft</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;javascript:toggleContent('sideleft',1)&quot;</span><span class="tag">&gt;</span><span>默认长度</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span>&amp;&nbsp;nbsp;&nbsp;</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;javascript:toggleContent('sideleft',2)&quot;</span><span class="tag">&gt;</span><span>加长页面</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span>&amp;&nbsp;gt;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideright</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;footer&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Footer&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>制作：</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;http://homepage.yesky.com&quot;</span><span class="tag">&gt;</span><span>网页陶吧</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span><span><span><br />    </span></span></li></ol></div><p><font face="Verdana"><br /></font></p><hr /><p><span style="color: rgb(255, 0, 0);"><strong>高度自适应方法二CSS控制：</strong></span></p><hr /><p><font face="Verdana"><strong>采用负的外边界和内补丁相结合<br /></strong>不需要事先知道哪列的高度。</font><br /><font face="Verdana">hacks比较多（主要是opera的），但容易使用，推荐：</font></p><hr /><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol class="dp-xml" start="1">    <li class="alt"><span><span>&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">html</span><span>&nbsp;</span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">meta</span><span>&nbsp;</span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">&quot;Content-Type&quot;</span><span>&nbsp;</span><span class="attribute">content</span><span>=</span><span class="attribute-value">&quot;text/html;&nbsp;charset=utf-8&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>Equal&nbsp;height(DIV+CSS布局中自适应高度的解决方法)</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">style</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/css&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>body{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;font-size:&nbsp;12px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;font-family:&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;line-height:&nbsp;140%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:#E7DFD3;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#wrap{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;750px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0&nbsp;auto;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;overflow:&nbsp;hidden;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#header{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideleft{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;580px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#FFF;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideright{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;170px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#F0F0F0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>/*&nbsp;easy&nbsp;clearing&nbsp;*/&nbsp;&nbsp;</span></li>    <li class="alt"><span>#wrap:after&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;content:&nbsp;'[DO&nbsp;NOT&nbsp;LEAVE&nbsp;IT&nbsp;IS&nbsp;NOT&nbsp;REAL]';&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;height:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;clear:&nbsp;both;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;visibility:&nbsp;hidden;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#wrap&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>/*\*/&nbsp;&nbsp;</span></li>    <li><span>#wrap&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>/*&nbsp;end&nbsp;easy&nbsp;clearing&nbsp;*/&nbsp;&nbsp;</span></li>    <li class="alt"><span>/*\*/&nbsp;&nbsp;</span></li>    <li><span>#sideleft,&nbsp;#sideright&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-bottom:&nbsp;32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;-32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>@media&nbsp;all&nbsp;and&nbsp;(min-width:&nbsp;0px)&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>#sideleft,&nbsp;#sideright&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-bottom:&nbsp;0&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;0&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#sideleft:before,&nbsp;#sideright:before&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;content:&nbsp;'[DO&nbsp;NOT&nbsp;LEAVE&nbsp;IT&nbsp;IS&nbsp;NOT&nbsp;REAL]';&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;inherit;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-top:&nbsp;32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;-32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;height:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>/**/&nbsp;&nbsp;</span></li>    <li><span>#footer{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;100%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2,address,p{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;padding:&nbsp;.8em;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2{font-size:&nbsp;20px;}&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">style</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;wrap&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>Head</span><span class="tag">&lt;/</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideleft</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideright</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;footer&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;Footer&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>制作：</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;http://homepage.yesky.com&quot;</span><span class="tag">&gt;</span><span>网页陶吧</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp; <br />    </span></span></li></ol></div><p>&nbsp;</p><hr /><p>随着Opera 9.0 正式版的推出，原先在 8.x版本中存在的BUG得到了彻底的解决。Equal Height Columns --DIV+CSS布局中自适应高度的解决方法一文中对8.x版本的hacks在9.0 正式版中已可以不用了，相信使用Opera的用户会经常更新升级至最新版本的。</p><h4>现在的代码：</h4><p>随着Opera 9.0 正式版的推出，原先在 8.x版本中存在的BUG得到了彻底的解决。Equal Height Columns --DIV+CSS布局中自适应高度的解决方法一文中对8.x版本的hacks在9.0 正式版中已可以不用了，相信使用Opera的用户会经常更新升级至最新版本的。</p><p>&nbsp;</p><p>现在的代码：</p><p>&nbsp;</p><p><strong>xhtml</strong></p><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol class="dp-xml" start="1">    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;wrap&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span>......</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>......</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>......</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;foot&quot;</span><span class="tag">&gt;</span><span>......</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp; <br />    </span></span></li></ol></div><p>&nbsp;</p><p><strong>CSS</strong></p><div class="codeText"><div class="codeHead">CSS代码</div><ol class="dp-css" start="1">    <li class="alt"><span><span class="colors">#wrap</span><span>{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">750px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">margin</span><span>:&nbsp;0&nbsp;</span><span class="string">auto</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">overflow</span><span>:&nbsp;</span><span class="string">hidden</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span><span class="colors">#header</span><span>{&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#E8E8E8</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="colors">#sidele</span><span>ft{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">580px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#F7F7F7</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">text-align</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="colors">#sideri</span><span>ght{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">170px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#F0F0F0</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">text-align</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="comment">/*&nbsp;easy&nbsp;clearing&nbsp;*/</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="colors">#wrap</span><span>:after&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">content</span><span>:&nbsp;</span><span class="string">'[DO&nbsp;NOT&nbsp;LEAVE&nbsp;IT&nbsp;IS&nbsp;NOT&nbsp;REAL]'</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">display</span><span>:&nbsp;</span><span class="string">block</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">height</span><span>:&nbsp;0;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">clear</span><span>:&nbsp;</span><span class="string">both</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">visibility</span><span>:&nbsp;</span><span class="string">hidden</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>    <li><span><span class="colors">#wrap</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">display</span><span>:&nbsp;</span><span class="string">inline</span><span>-</span><span class="string">block</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>    <li><span><span class="comment">/*\*/</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="colors">#wrap</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">display</span><span>:&nbsp;</span><span class="string">block</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="comment">/*&nbsp;end&nbsp;easy&nbsp;clearing&nbsp;*/</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="comment">/*\*/</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="colors">#sidele</span><span>ft,&nbsp;</span><span class="colors">#sideri</span><span>ght&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">padding-bottom</span><span>:&nbsp;</span><span class="string">32767px</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">margin-bottom</span><span>:&nbsp;-</span><span class="string">32767px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>    <li><span><span class="comment">/**/</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="colors">#footer</span><span>{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#E8E8E8</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">width</span><span>:&nbsp;100%;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><p>&nbsp;</p><p><strong>测试环境</strong></p><p>&nbsp;</p><p>Firefox 1.5 、Opera 9.0、IE 6.0 sp2、IE 5.0</p><p>&nbsp;</p><hr /><p><font face="Verdana"><strong>采用负的左右边界和相对定位<br /></strong>下面的例子能较好地解决列高度相同的问题。</font></p><p><font face="Verdana">三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。</font></p><p><font face="Verdana">&nbsp;&nbsp; </font></p><div class="codeText"><div class="codeHead">CSS代码</div><ol start="1" class="dp-css">    <li class="alt"><span><span class="colors">#middle</span><span>{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">580px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">float</span><span>:</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">background</span><span>:</span><span class="colors">#FFFFFF</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">text-align</span><span>:</span><span class="string">left</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="colors">#sidele</span><span>ft{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">580px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="string">left</span><span>;&nbsp;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">position</span><span>:</span><span class="string">relative</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">margin-left</span><span>:-</span><span class="string">580px</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="colors">#sideri</span><span>ght{&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">width</span><span>:&nbsp;</span><span class="string">170px</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="keyword">right</span><span class="string">right</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">position</span><span>:</span><span class="string">relative</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="keyword">margin</span><span>:&nbsp;0&nbsp;-</span><span class="string">170px</span><span>&nbsp;0&nbsp;0;&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="keyword">background</span><span>:&nbsp;</span><span class="colors">#F0F0F0</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><p>XHML </p><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;middle&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p>&nbsp;</p><p>从<font face="Verdana">结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里 一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着 middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580， 相当于在sideright左边580px，此时sideleft和middle位置重合。</font></p><p><font face="Verdana">优点：不需要背景图片，无hacks，完全的自适应高度。</font></p><p><font face="Verdana">缺点：现在的代码只能左对齐。</font></p><p><font face="Verdana">代码：</font></p><hr /><p><font face="Verdana"><br /><br /></font></p><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span>&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">html</span><span>&nbsp;</span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">meta</span><span>&nbsp;</span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">&quot;Content-Type&quot;</span><span>&nbsp;</span><span class="attribute">content</span><span>=</span><span class="attribute-value">&quot;text/html;&nbsp;charset=utf-8&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>Equal&nbsp;height(DIV+CSS布局中自适应高度的解决方法)</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">style</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/css&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>body{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;font-size:&nbsp;12px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;font-family:&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;line-height:&nbsp;140%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:#E7DFD3;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#wrap{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;750px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0&nbsp;auto;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;overflow:&nbsp;hidden;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#header{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideleft{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;580px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#FFF;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideright{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;170px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#F0F0F0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>/*&nbsp;easy&nbsp;clearing&nbsp;*/&nbsp;&nbsp;</span></li>    <li class="alt"><span>#wrap:after&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;content:&nbsp;'[DO&nbsp;NOT&nbsp;LEAVE&nbsp;IT&nbsp;IS&nbsp;NOT&nbsp;REAL]';&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;height:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;clear:&nbsp;both;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;visibility:&nbsp;hidden;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#wrap&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>/*\*/&nbsp;&nbsp;</span></li>    <li><span>#wrap&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>/*&nbsp;end&nbsp;easy&nbsp;clearing&nbsp;*/&nbsp;&nbsp;</span></li>    <li class="alt"><span>/*\*/&nbsp;&nbsp;</span></li>    <li><span>#sideleft,&nbsp;#sideright&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-bottom:&nbsp;32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;-32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>@media&nbsp;all&nbsp;and&nbsp;(min-width:&nbsp;0px)&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>#sideleft,&nbsp;#sideright&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-bottom:&nbsp;0&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;0&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#sideleft:before,&nbsp;#sideright:before&nbsp;&nbsp;</span></li>    <li><span>&nbsp;{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;content:&nbsp;'[DO&nbsp;NOT&nbsp;LEAVE&nbsp;IT&nbsp;IS&nbsp;NOT&nbsp;REAL]';&nbsp;&nbsp;</span></li>    <li><span>&nbsp;display:&nbsp;block;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;inherit;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding-top:&nbsp;32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin-bottom:&nbsp;-32767px&nbsp;!important;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;height:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>/**/&nbsp;&nbsp;</span></li>    <li><span>#footer{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;width:&nbsp;100%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2,address,p{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;padding:&nbsp;.8em;&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>h1,h2{font-size:&nbsp;20px;}&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">style</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;wrap&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>Head</span><span class="tag">&lt;/</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideleft</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideright</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;footer&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;Footer&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>制作：</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;http://homepage.yesky.com&quot;</span><span class="tag">&gt;</span><span>网页陶吧</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><hr /><p><span style="color: rgb(255, 0, 0);"><strong>高度自适应方法三JS：</strong></span></p><p><font face="Verdana"><strong>采用脚本控制列的高度（一）<br /></strong>需要事先知道哪列的高度，以此为基准用脚本控制。</font></p><p><font face="Verdana">document.getElementById(&quot;sideleft&quot;).style.height=document.getElementById(&quot;sideright&quot;).scrollHeight+&quot;px&quot;<br />上面的代码是以sideright的基准高度来控制sideleft的高度。</font></p><p><font face="Verdana">代码简单，但比较被动：</font></p><hr /><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span>&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">html</span><span>&nbsp;</span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">meta</span><span>&nbsp;</span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">&quot;Content-Type&quot;</span><span>&nbsp;</span><span class="attribute">content</span><span>=</span><span class="attribute-value">&quot;text/html;&nbsp;charset=utf-8&quot;</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>Equal&nbsp;height(使用JS实现列高度相同的方法)</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">style</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/css&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>body{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding:&nbsp;0;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;font-size:&nbsp;12px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;font-family:&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;line-height:&nbsp;140%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:#E7DFD3;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#wrap{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;750px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;margin:&nbsp;0&nbsp;auto;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;/*overflow:&nbsp;hidden;*/&nbsp;&nbsp;</span></li>    <li><span>}&nbsp;&nbsp;</span></li>    <li class="alt"><span>#header{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideleft{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;580px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#FFF;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>#sideright{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;170px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;background:&nbsp;#F0F0F0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;</span></li>    <li class="alt"><span>#footer{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;background:&nbsp;#E8E8E8;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;width:&nbsp;100%;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>h1,h2,address,p{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;margin:&nbsp;0;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;padding:&nbsp;.8em;&nbsp;&nbsp;</span></li>    <li class="alt"><span>}&nbsp;&nbsp;</span></li>    <li><span>h1,h2{font-size:&nbsp;20px;}&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">style</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;wrap&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>Head</span><span class="tag">&lt;/</span><span class="tag-name">h1</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideleft&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideleft</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sideright&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>sideright</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;像素是计算机屏幕上的不可缩放的点，而一个&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;就是一个字大小的方块。由于字体大小的变化，&nbsp;h3&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代表用户喜欢的文字大小的相对单位。&nbsp;<span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/javascript&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>document.getElementById(&quot;sideleft&quot;)<span class="attribute">.style.height</span><span>=</span><span class="attribute-value">document</span><span>.getElementById(&quot;sideright&quot;).scrollHeight+&quot;px&quot;&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;footer&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Footer&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">address</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>制作：</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;http://homepage.yesky.com&quot;</span><span class="tag">&gt;</span><span>网页陶吧</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p><font face="Verdana"><br /></font></p><hr /><p><font face="Verdana"><strong>采用脚本控制列的高度（二）</strong><br />不需要事先知道哪列的高度，脚本自动判断。</font></p><p><font face="Verdana">代码较复杂，有点延时：</font></p><hr /><div class="codeText"><div class="codeHead">XML/HTML代码</div><ol start="1" class="dp-xml">    <li class="alt"><span><span>&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">html</span><span>&nbsp;</span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">&quot;http://www.w3.org/1999/xhtml&quot;</span><span>&nbsp;</span><span class="attribute">xml:lang</span><span>=</span><span class="attribute-value">&quot;en&quot;</span><span>&nbsp;</span><span class="attribute">lang</span><span>=</span><span class="attribute-value">&quot;en&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>脚本控制三行三列自适应高度DIV布局</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">&quot;../js/eqCols.js&quot;</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/javascript&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="tag">&lt;</span><span class="tag-name">style</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">&quot;text/css&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>&nbsp;&lt;!--&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;body{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;font-size:&nbsp;75%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;font-family:&nbsp;Verdana,&nbsp;Geneva,&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;line-height:&nbsp;100%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;margin:&nbsp;5px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;padding:&nbsp;0px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;#header,#mid,#footer{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;width:&nbsp;760px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;margin:&nbsp;0px&nbsp;auto;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;padding:&nbsp;0px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;#header{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;background:&nbsp;#F4F4F4;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;height:&nbsp;60px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;margin-bottom:&nbsp;5px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;h3,h5{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;padding-top:&nbsp;25px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;color:&nbsp;#708090;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;margin:&nbsp;0;&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;#fbox{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;background:&nbsp;#F1F1F1;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;width:&nbsp;195px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;#mbox{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;background:&nbsp;#DFF7FF;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;margin:&nbsp;0px&nbsp;5px&nbsp;0px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;padding:&nbsp;0px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;width:&nbsp;360px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;#sbox{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;background:&nbsp;#FFEBCC;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;width:&nbsp;195px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;float:&nbsp;right;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;p{&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;margin:&nbsp;0px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;padding:&nbsp;10px;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;text-indent:&nbsp;2em;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;line-height:&nbsp;130%;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;#footer{&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;background:&nbsp;#CDDBED;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;border-top:&nbsp;solid&nbsp;5px&nbsp;#FFFFFF;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;&nbsp;height:&nbsp;60px;&nbsp;&nbsp;</span></li>    <li><span>&nbsp;&nbsp;clear:&nbsp;both;&nbsp;&nbsp;</span></li>    <li class="alt"><span>&nbsp;}&nbsp;&nbsp;</span></li>    <li><span>&nbsp;--<span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;<span class="tag">&lt;/</span><span class="tag-name">style</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">body</span><span>&nbsp;</span><span class="attribute">onload</span><span>=</span><span class="attribute-value">&quot;P7_equalCols('fbox','mbox','sbox')&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;header&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span>脚本控制三行三列自适应高度DIV布局</span><span class="tag">&lt;/</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;mid&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;fbox&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍&nbsp;-&nbsp;你我变老时就会成为他们的一员。&nbsp;&nbsp;</span></li>    <li class="alt"><span>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍&nbsp;-&nbsp;你我变老时就会成为他们的一员。&nbsp;&nbsp;</span></li>    <li><span>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;mbox&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍&nbsp;-&nbsp;你我变老时就会成为他们的一员。&nbsp;&nbsp;</span></li>    <li><span>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为&nbsp;Internet&nbsp;Explorer&nbsp;改变文字大小的方式与别的浏览器不同。Mozilla&nbsp;和&nbsp;Opera&nbsp;可以缩放已经设定像素大小的文字，而Windows&nbsp;下的IE却不能。&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍&nbsp;-&nbsp;你我变老时就会成为他们的一员。&nbsp;&nbsp;</span></li>    <li class="alt"><span>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。&nbsp;&nbsp;</span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为&nbsp;Internet&nbsp;Explorer&nbsp;改变文字大小的方式与别的浏览器不同。Mozilla&nbsp;和&nbsp;Opera&nbsp;可以缩放已经设定像素大小的文字，而Windows&nbsp;下的IE却不能。&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;sbox&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍&nbsp;-&nbsp;你我变老时就会成为他们的一员。&nbsp;&nbsp;</span></li>    <li><span>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。&nbsp;&nbsp;</span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">p</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;footer&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">h5</span><span class="tag">&gt;</span><span>仅供演示</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">&quot;http://homepage.yesky.com&quot;</span><span class="tag">&gt;</span><span>网页陶吧</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">h5</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;&nbsp;</span></span></li></ol></div><p>&nbsp;</p><hr /><p><strong>网上常见的js控制代码如下：</strong></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c">    <li class="alt"><span><span>&lt;script&nbsp;language=</span><span class="string">&quot;javascript&quot;</span><span>&nbsp;type=</span><span class="string">&quot;text/javascript&quot;</span><span>&gt;&nbsp;&nbsp;</span></span></li>    <li><span><span class="keyword">var</span><span>&nbsp;sidebar=document.getElementById(</span><span class="string">&quot;divSidebar&quot;</span><span>).scrollHeight;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span><span class="keyword">var</span><span>&nbsp;main=document.getElementById(</span><span class="string">&quot;divMain&quot;</span><span>).scrollHeight;&nbsp;&nbsp;</span></span></li>    <li><span>layoutHeight=Math.max(sidebar,main);&nbsp;&nbsp;</span></li>    <li class="alt"><span>document.getElementById(<span class="string">&quot;divSidebar&quot;</span><span>).style.height=layoutHeight+</span><span class="string">&quot;px&quot;</span><span>;&nbsp;&nbsp;</span></span></li>    <li><span>document.getElementById(<span class="string">&quot;divMain&quot;</span><span>).style.height=layoutHeight+</span><span class="string">&quot;px&quot;</span><span>;&nbsp;&nbsp;</span></span></li>    <li class="alt"><span>&lt;/script&gt;&nbsp;&nbsp;</span></li></ol></div><p class="code">&nbsp;</p><p>上 面的方法可以解决高度自适应问题，但其兼容性较差，在我的站点上使用时经常会失效。（例如：页面使用了图片自动缩小效果后，由于图片加载的延迟，上面的 js往往会以大图时的div高度为准，而不是以图片缩小之后的div高度为最终适应高度。另外，本站内页侧栏内容列表的加载延迟也会引起类似问题）<br /><br />关键的是，它没有解决背景图自适应的问题。</p><p><span style="color: rgb(0, 0, 255);"><strong>来自国外同行p7 Projectseven.com<strong> 的完美解决方案：</strong></strong></span></p><p>说它完美，是因为它有以下特点：<br />1、高度自适应<br />2、各列背景图自适应平铺<br />3、无论是一列、两列、还是三列。。。都可以轻松控制它们自适应（即各列等高）<br />4、可以动画显示高度及背景自动填充的过程。当然，你也可以关闭动画功能。<br />5、它提供了标签级的定义对各列高度填充的方法进行弹性控制。例如，我们可以控制补充的高度位于当前列中最后一个标签之后。</p><p>- <a href="http://www.projectseven.com/tutorials/css/pvii_columns/p7_eqCols2_10.js" target="_blank">Download the script file (p7_eqCols2_10.js)</a> <br /><br />- Place the script file in your web site folder.<br /><br />- Place a link to the script file in the  region of any page on which you wish to use the script:<br />&nbsp;</p><p class="code">&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;p7_eqCols2_10.js&quot;&gt;&lt;/script&gt;</p><p><br /><font color="Red">Make sure you adjust the path to reflect the actual location of the script file relative to your document. </font><br /><br />- Place an onLoad call on your page's  tag:</p><p class="code">&lt;body&nbsp;onLoad=&quot;P7_equalCols2(1,'c1','P','c2','P')&quot;&gt;</p><p><br />The script arguments: <br /><br />The first argument of the P7_equalCols2() function controls the animation. Set it to a value of 1 if you want the column heights animated when the page loads, set it to 0 (zero) if you do not want animation.<br /><br />The next series of arguments tell the script which columns you wish to have the script act on. These are listed in pairs:<br /><br />A. The id of the column element, in this case 'c1', that you wish to be part of the Equal Columns processing <br /><br />B. The tag name of the element inside the column where you want the added vertical space to be inserted. This would usually be the last element in the column but it can be any of the elements inside the column. For example, specifying a 'P' tag would tell the script to look for the last  tag inside the column, and then apply vertical space, as needed, just below it. This approach allows for more complex outer column structures, since the added space is actually applied inside of one of the column's elements, in effect, pushing the bottom border of the column down as needed.<br /><br /><font color="Red">Note: You must always specify the tag name in capital letters, like 'P' or 'LI' or 'H4', etc. </font><br /><br />Column ids and tag name pairs must be enclosed in single quotes, and separated by a commas. <br /><br />完整的原文见<a href="http://www.projectseven.com/tutorials/css/pvii_columns/index.htm" target="_blank">这里</a>。</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/Css-height-fix.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=155</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=155&amp;key=632a3c55</trackback:ping></item><item><title>SqlServer转换Access的自动编号字段问题</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/Sql2Access.html</link><pubDate>Mon, 08 Dec 2008 20:26:48 +0800</pubDate><guid>http://www.syscy.com/blog/post/Sql2Access.html</guid><description><![CDATA[<p>长江在解决一个用户由sqlserver数据库变成Access数据库时碰到的问题，主要是解决SQL Server转ACCESS自动编号问题。</p><p>以下的文章来自：http://www.cnblogs.com/lizhennehzil/archive/2008/03/12/1101608.html　不过请注意最后长江VS长征碰到的一点小问题。</p><p>1.打开SQL server enterprise mananger &quot;企业管理器&quot; <br />在你要导出的SQL数据库上鼠标右键菜单：所有任务-》导出数据</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/05b3de05b9.jpg" /></p><p>2.回出现一个导出向导窗口。<br />选择被导出的数据源，为你刚才所选择的数据库，如果发现不对应自行修改。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/1d90ef39ba.jpg" /></p><p>3.进入导出到目标数据源的选择，这里我们要转成ACCESS的数据库。注意选择数据源类型为&ldquo;Microsoft Access。点 &ldquo;文件名(F)&rdquo; 后面的按钮选择目标.MDB文件。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/e3ce1b3e84.jpg" /></p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/47d1135e85.jpg" /></p><p>4.选择&ldquo;从数据库复制表和视图&rdquo;。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/d4bc3e1e86.jpg" /></p><p>5.我们注意这里选表的时候右边有一个&ldquo;转换&rdquo;列。SQL导出只转换数据类型并不考虑其他脚本所以我们遇到的自动编号问题也就出在这里。有自动编号的一定要点选&ldquo;转换&rdquo;。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/97033bf680.jpg" /></p><p>6.我们回看到一个&ldquo;列映射和转换&rdquo;对话框。有注意到自增的employeeid int 自增这里变成了Access里的long这肯定不对，long并不是自动编号，只好修改建表脚本，图片上那个红圈里的按钮&ldquo;编辑SQL&rdquo;。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/1ec8fc7a80.jpg" /></p><p>开一个小窗create talbe</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/1f63279881.jpg" /></p><p>红圈中的脚本就是employeeid 的 Access建表脚本，在 &quot;NOT NULL&quot; 前面加上 &quot;IDENTITY (1, 1)&quot;。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/8d800a1881.jpg" /></p><p>7.立即执行。</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/e08a139982.jpg" /></p><p>下图表示建表复制已成功</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/38970a1682.jpg" /></p><p>8.我们打开MDB文件看看是不是如我们所愿？</p><p align="center"><img alt="" twffan="done" src="/Blog/Upload/FtpUP/200812/c236d3ca83.jpg" /></p><p style="text-align: left;">至此已成功。</p><hr /><p style="text-align: left;">不过长江在实际过程中需要提醒的是，要转化成Access自动编号的字段，一定要声明为：Long , 再加上　IDENTITY (1, 1)。如果是numeric (18,0) 等要改成Long转换才可以啊。</p><p style="text-align: left;">&nbsp;</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/Sql2Access.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=140</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=140&amp;key=39e59f37</trackback:ping></item><item><title>asp中去除内容HTML标签的三个function函数</title><author>unovo@126.com (长江VS长征)</author><link>http://www.syscy.com/blog/post/Asp-Remove-html.html</link><pubDate>Sun, 07 Dec 2008 15:56:52 +0800</pubDate><guid>http://www.syscy.com/blog/post/Asp-Remove-html.html</guid><description><![CDATA[<p>去除HTML标签，从网上找了三段代码。百度一下，很多啊。</p><p><strong>代码一：</strong></p><p>'==============================<br />'功能描述： 除去HTML标记<br />'不能保留&lt;b&gt;&lt;strong&gt;，并且可以去除Font<br />'==============================<br /><span style="background-color: rgb(255, 204, 153);">Function Remove_HTML(Str)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dim ilen1, ilen2<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do While InStr(1, Str, &quot;&lt;&quot;, 1) &gt;0<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ilen1 = InStr(1, Str, &quot;&lt;&quot;, 1)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ilen2 = InStr(1, Str, &quot;&gt;&quot;, 1)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Str = Left(Str, ilen1 -1) &amp; Mid(Str, ilen2 + 1)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Loop<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Remove_HTML = Str<br />End Function </span></p><p>三原色试用：此段较好地去除。</p><p><strong>代码二：</strong></p><p>'==============================<br />'功能描述： 用正则除去HTML标记<br />'不能保留&lt;b&gt;&lt;strong&gt;等以及用户自定义的&lt;和&gt;<br />'==============================<br /><span style="background-color: rgb(255, 204, 153);">Function RemoveHTMLTag(fString)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dim re<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Set re = New RegExp<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;re.IgnoreCase = True<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;re.Pattern = &quot;&lt;(.[^&gt;]*)&gt;&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fString = re.Replace(fString, &quot;&quot;)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Set re = Nothing<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RemoveHTMLTag = fString<br />End Function </span></p><p>三原色试用：此脚本无法去除&lt;font&gt;标签，至少是这样。</p><p><strong>代码三：</strong></p><p>'==============================<br />'功能描述： 除去HTML标记<br />'去除自定义的标记,速度可能有点慢<br />'==============================<br /><span style="background-color: rgb(255, 204, 153);">Function RemoveHTML(strText)<br />Dim TAGLIST<br />TAGLIST = &quot;;!--;!DOCTYPE;A;ACRONYM;ADDRESS;APPLET;AREA;B;BASE;BASEFONT;&quot; &amp;_<br />&quot;BGSOUND;BIG;BLOCKQUOTE;BODY;BR;BUTTON;CAPTION;CENTER;CITE;CODE;&quot; &amp;_<br />&quot;COL;COLGROUP;COMMENT;DD;DEL;DFN;DIR;DIV;DL;DT;EM;EMBED;FIELDSET;&quot; &amp;_<br />&quot;FONT;FORM;FRAME;FRAMESET;HEAD;H1;H2;H3;H4;H5;H6;HR;HTML;I;IFRAME;IMG;&quot; &amp;_<br />&quot;INPUT;INS;ISINDEX;KBD;LABEL;LAYER;LAGEND;LI;LINK;LISTING;MAP;MARQUEE;&quot; &amp;_<br />&quot;MENU;META;NOBR;NOFRAMES;NOSCRIPT;OBJECT;OL;OPTION;P;PARAM;PLAINTEXT;&quot; &amp;_<br />&quot;PRE;Q;S;SAMP;SCRIPT;Select;SMALL;SPAN;STRIKE;STRONG;STYLE;SUB;SUP;&quot; &amp;_<br />&quot;TABLE;TBODY;TD;TEXTAREA;TFOOT;TH;THEAD;TITLE;TR;TT;U;UL;VAR;WBR;XMP;&quot;<br />Const BLOCKTAGLIST = &quot;;APPLET;EMBED;FRAMESET;HEAD;NOFRAMES;NOSCRIPT;OBJECT;SCRIPT;STYLE;&quot;<br />Dim nPos1<br />Dim nPos2<br />Dim nPos3<br />Dim strResult<br />Dim strTagName<br />Dim bRemove<br />Dim bSearchForBlock<br />nPos1 = InStr(strText, &quot;&lt;&quot;)<br />Do While nPos1 &gt; 0<br />nPos2 = InStr(nPos1 + 1, strText, &quot;&gt;&quot;)<br />If nPos2 &gt; 0 Then<br />strTagName = Mid(strText, nPos1 + 1, nPos2 - nPos1 - 1)<br />strTagName = Replace(Replace(strTagName, vbCr, &quot; &quot;), vbLf, &quot; &quot;)<br />nPos3 = InStr(strTagName, &quot; &quot;)<br />If nPos3 &gt; 0 Then<br />strTagName = Left(strTagName, nPos3 - 1)<br />End If<br /><br />If Left(strTagName, 1) = &quot;/&quot; Then<br />strTagName = Mid(strTagName, 2)<br />bSearchForBlock = False<br />Else<br />bSearchForBlock = True<br />End If<br />If InStr(1, TAGLIST, &quot;;&quot; &amp; strTagName &amp; &quot;;&quot;, vbTextCompare) &gt; 0 Then<br />bRemove = True<br />If bSearchForBlock Then<br />If InStr(1, BLOCKTAGLIST, &quot;;&quot; &amp; strTagName &amp; &quot;;&quot;, vbTextCompare) &gt; 0 Then<br />nPos2 = Len(strText)<br />nPos3 = InStr(nPos1 + 1, strText, &quot;&lt;/&quot; &amp; strTagName, vbTextCompare)<br />If nPos3 &gt; 0 Then<br />nPos3 = InStr(nPos3 + 1, strText, &quot;&gt;&quot;)<br />End If<br />If nPos3 &gt; 0 Then<br />nPos2 = nPos3<br />End If<br />End If<br />End If<br />Else<br />bRemove = False<br />End If<br />If bRemove Then<br />strResult = strResult &amp; Left(strText, nPos1 - 1)<br />strText = Mid(strText, nPos2 + 1)<br />Else<br />strResult = strResult &amp; Left(strText, nPos1)<br />strText = Mid(strText, nPos1 + 1)<br />End If<br />Else<br />strResult = strResult &amp; strText<br />strText = &quot;&quot;<br />End If<br />nPos1 = InStr(strText, &quot;&lt;&quot;)<br />Loop<br />strResult = strResult &amp; strText<br />strResult = Replace(strResult, Chr(9), &quot;&quot;)<br />strResult = Replace(strResult, Chr(32), &quot;&quot;)<br />strResult = Replace(strResult, Chr(13), &quot;&quot;)<br />strResult = Replace(strResult, Chr(10), &quot;&quot;)<br />strResult = Replace(strResult, vbCrLf, &quot;&quot;)<br />RemoveHTML = strResult<br />End Function</span></p><p>三原色试用：没有试用，看到有点慢就没有试，不过，应该是过滤得比较全一些。</p><p>原文转自：http://www.jb51.net/article/8654.htm</p>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/Asp-Remove-html.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=138</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=138&amp;key=48cd9628</trackback:ping></item><item><title>在线视频播放方法－Windows Media Player</title><author>syscy.com@163.com (三原色)</author><link>http://www.syscy.com/blog/post/PlayMedia-WMV.html</link><pubDate>Fri, 16 Nov 2007 05:14:01 +0800</pubDate><guid>http://www.syscy.com/blog/post/PlayMedia-WMV.html</guid><description><![CDATA[<p><style type="text/css"><!--.f_gray {	font-size: 9pt;	color: #999999;}.STYLE1 {color: #FF0000}.STYLE3 {color: #666666}--></style></p><p>&nbsp;</p><p><span class="Title">最简单的media格式的播放器。。自动识别有无图像，但是版本是你机器的！</span></p><p><span class="Code">&lt;embed src=mms://61.175.132.221/tv/mtv/f4/makeawish.wmv width=200 height=200 autostart=true loop=true&gt;&lt;/embed&gt;</span></p><p>示例</p><div><embed height="200" width="200" src="mms://61.175.132.221/tv/mtv/f4/makeawish.wmv" autostart="true" loop="true"></embed></div><table width="90%" cellspacing="1" cellpadding="5" border="0" align="center">    <tbody>        <tr>            <td class="tdTilte0">提示</td>        </tr>        <tr class="tdTitle1">            <td>            <p>红色表示可变量，可以进行相关设置。<br />            灰色表示注释，可以删除，也可以不用删，它不会出现在网页上。</p>            <p>方法：<br />            1.把代码粘到记事本里，进行相应修改。[注意：不要粘在Word里。]<br />            2.修改好后，在网页编辑器内，选中相应位置，选择源代码，然后复制粘贴。</p>            <p>更多播放代码[<a target="_blank" href="http://www.syscy.com/blog/catalog.asp?tags=%E5%9C%A8%E7%BA%BF%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E4%BB%A3%E7%A0%81">查看</a>]</p>            </td>        </tr>    </tbody></table><table width="90%" cellspacing="1" cellpadding="5" border="0" bgcolor="#666666" align="center">    <tbody>        <tr>            <td bgcolor="#f2f2f2" class="tdTilte0" colspan="2">WMV播放器代码[1]：</td>        </tr>        <tr>            <td bgcolor="#ffffff" colspan="2"><object height="196" width="196" align="middle" id="MediaPlayer" class="OBJECT" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">            <param value="0" name="ShowStatusBar" />            <param value="&lt;%=strWebURL%&gt;Images/i/piantou.wmv" name="Filename" />  <embed codebase="http://activex.microsoft.com/activex/con ... n/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject"></embed>    </object></td>        </tr>        <tr>            <td width="76%" bgcolor="#ffffff" align="left" class="tdguide">&lt;object           align=middle classid=&quot;CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95&quot; class=OBJECT           id=MediaPlayer width=<span class="STYLE1">[宽度值]</span> height=<span class="STYLE1">[高度值]</span>&gt; <br />            &lt;param name=ShowStatusBar value=0&gt; <br />            &lt;param name=Filename value=&quot;<span class="STYLE1">[视频位置]</span>&quot;&gt; <br />            &lt;embed type=application/x-oleobject codebase=&quot;http://activex.microsoft.com/activex/con           ... n/nsmp2inf.cab#Version=5,1,52,701&quot; &gt; <br />            &lt;/embed&gt; <br />            &lt;/object&gt;</td>            <td width="24%" valign="top" bgcolor="#ffffff" align="left">            <p>简洁播放器：Windows             Media Player 6.4版本！<br />            <br />            请将文中的[]连同里面的说明替换成相应的值即可。</p>            </td>        </tr>    </tbody></table><p>&nbsp;</p><table width="90%" cellspacing="1" cellpadding="5" border="0" bgcolor="#666666" align="center">    <tbody>        <tr>            <td bgcolor="#f2f2f2" class="tdTilte0" colspan="2">WMV播放器代码[2]：</td>        </tr>        <tr>            <td bgcolor="#ffffff" colspan="2"><object hspace="5" height="160" width="180" align="right" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player components..." codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="NSPlay">            <param value="-1" name="AutoStart" />  <!--是否自动播放-->            <param value="0" name="Balance" />  <!--调整左右声道平衡,同上面旧播放器代码-->            <param value="-1" name="enabled" />  <!--播放器是否可人为控制-->            <param value="-1" name="EnableContextMenu" />  <!--是否启用上下文菜单-->            <param value="&lt;%=strWebURL%&gt;Images/i/piantou.wmv" name="FileName" /> <!--播放的文件地址-->            <param value="1" name="PlayCount" />  <!--播放次数控制,为整数-->            <param value="1" name="rate" />  <!--播放速率控制,1为正常,允许小数,1.0-2.0-->            <param value="0" name="currentPosition" />  <!--控件设置:当前位置-->            <param value="0" name="currentMarker" />  <!--控件设置:当前标记-->            <param value="" name="defaultFrame" />  <!--显示默认框架-->            <param value="0" name="invokeURLs" />  <!--脚本命令设置:是否调用URL-->            <param value="" name="baseURL" />  <!--脚本命令设置:被调用的URL-->            <param value="0" name="stretchToFit" />  <!--是否按比例伸展-->            <param value="50" name="volume" />  <!--默认声音大小0%-100%,50则为50%-->            <param value="0" name="mute" />  <!--是否静音-->            <param value="mini" name="uiMode" />  <!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->            <param value="0" name="windowlessVideo" />  <!--如果是0可以允许全屏,否则只能在窗口中查看-->            <param value="0" name="fullScreen" />  <!--开始播放是否自动全屏-->            <param value="-1" name="enableErrorDialogs" />  <!--是否启用错误提示报告-->            <param value="" name="SAMIStyle" />  <!--SAMI样式-->            <param value="" name="SAMILang" />  <!--SAMI语言-->            <param value="" name="SAMIFilename" /> <embed height="100" width="120" samifilename="value" samilang="value" samistyle="value" enableerrordialogs="-1" fullscreen="0" windowlessvideo="0" uimode="mini" mute="0" volume="50" stretchtofit="0" baseurl="" invokeurls="0" defaultframe="" currentmarker="0" currentposition="0" rate="1" playcount="1" url="&lt;%=strWebURL%&gt;Images/i/piantou.wma" enablecontextmenu="-1" enabled="-1" balance="0" autostart="-1" src="-1"></embed>  <!--字幕ID-->  </object></td>        </tr>        <tr>            <td width="76%" bgcolor="#ffffff" align="left" class="tdguide">            <p>&lt;object       id=&quot;player&quot; height=&quot;<span class="STYLE1">196</span>&quot; width=&quot;<span class="STYLE1">196</span>&quot;   classid=&quot;CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6&quot;&gt;<br />            <span class="f_gray">&lt;!--height后面是高度，width是宽度--&gt;</span><br />            &lt;param NAME=&quot;Filename&quot; value=&quot;<span class="STYLE1">&lt;%=strWebURL%&gt;Images/i/piantou.wma</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--播放的文件地址，将value后面的值更换一下即可以。--&gt;</span><br />            &lt;param NAME=&quot;AutoStart&quot; VALUE=&quot;<span class="STYLE1">-1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--是否自动播放--&gt; </span><br />            &lt;param NAME=&quot;Balance&quot; VALUE=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--调整左右声道平衡,同上面旧播放器代码--&gt; </span><br />            &lt;param name=&quot;enabled&quot; value=&quot;<span class="STYLE1">-1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--播放器是否可人为控制--&gt;</span> <br />            &lt;param NAME=&quot;EnableContextMenu&quot; VALUE=&quot;<span class="STYLE1">-1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--是否启用上下文菜单--&gt; </span><br />            &lt;param NAME=&quot;PlayCount&quot; VALUE=&quot;<span class="STYLE1">1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--播放次数控制,为整数--&gt;</span> <br />            &lt;param name=&quot;rate&quot; value=&quot;<span class="STYLE1">1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--播放速率控制,1为正常,允许小数,1.0-2.0--&gt;</span> <br />            &lt;param name=&quot;currentPosition&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--控件设置:当前位置--&gt;</span> <br />            &lt;param name=&quot;currentMarker&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--控件设置:当前标记--&gt; </span><br />            &lt;param name=&quot;defaultFrame&quot; value=&quot;&quot;&gt; <br />            <span class="f_gray">&lt;!--显示默认框架--&gt; </span><br />            &lt;param name=&quot;invokeURLs&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--脚本命令设置:是否调用URL--&gt;</span> <br />            &lt;param name=&quot;baseURL&quot; value=&quot;&quot;&gt; <br />            <span class="f_gray">&lt;!--脚本命令设置:被调用的URL--&gt; </span><br />            &lt;param name=&quot;stretchToFit&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--是否按比例伸展--&gt; </span><br />            &lt;param name=&quot;volume&quot; value=&quot;<span class="STYLE1">50</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--默认声音大小0%-100%,50则为50%--&gt; </span><br />            &lt;param name=&quot;mute&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--是否静音--&gt; </span><br />            &lt;param name=&quot;uiMode&quot; value=&quot;<span class="STYLE1">mini</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--&gt; </span><br />            &lt;param name=&quot;windowlessVideo&quot; value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--如果是0可以允许全屏,否则只能在窗口中查看--&gt; </span><br />            &lt;param name=&quot;fullScreen&quot;   value=&quot;<span class="STYLE1">0</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--开始播放是否自动全屏--&gt; </span><br />            &lt;param name=&quot;enableErrorDialogs&quot; value=&quot;<span class="STYLE1">-1</span>&quot;&gt; <br />            <span class="f_gray">&lt;!--是否启用错误提示报告--&gt; </span><br />            &lt;param name=&quot;SAMIStyle&quot; value&gt; <br />            <span class="f_gray">&lt;!--SAMI样式--&gt; </span><br />            &lt;param name=&quot;SAMILang&quot; value&gt; <br />            <span class="f_gray">&lt;!--SAMI语言--&gt; </span><br />            &lt;param name=&quot;SAMIFilename&quot; value&gt; <br />            <span class="f_gray">&lt;!--字幕ID--&gt; </span><br />            &lt;/object&gt;</p>            </td>            <td width="24%" valign="top" bgcolor="#ffffff">新式标准播放器:客户需安装Windows     Media Player 9及以下。<br />            可以定制页面。</td>        </tr>    </tbody></table>]]></description><category>常用Html代码</category><comments>http://www.syscy.com/blog/post/PlayMedia-WMV.html#comment</comments><wfw:comment>http://www.syscy.com/blog/</wfw:comment><wfw:commentRss>http://www.syscy.com/blog/feed.asp?cmt=4</wfw:commentRss><trackback:ping>http://www.syscy.com/blog/cmd.asp?act=tb&amp;id=4&amp;key=eed8b8fe</trackback:ping></item></channel></rss>
