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

<channel>
	<title>94smart&#039;s Blog &#187; Yahoo</title>
	<atom:link href="http://blog.94smart.com/cache/category/yahoo/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.94smart.com</link>
	<description>移动或移不动的互联网</description>
	<lastBuildDate>Sat, 11 Feb 2012 02:48:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>原来是CSS Sprites呀</title>
		<link>http://blog.94smart.com/cache/2007/1008_1200.html</link>
		<comments>http://blog.94smart.com/cache/2007/1008_1200.html#comments</comments>
		<pubDate>Mon, 08 Oct 2007 03:39:10 +0000</pubDate>
		<dc:creator>94smart</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[XHTML]]></category>
		<category><![CDATA[Yahoo]]></category>
		<category><![CDATA[网站设计]]></category>
		<category><![CDATA[随笔]]></category>
		<category><![CDATA[CSS Sprites]]></category>

		<guid isPermaLink="false">http://blog.94smart.com/2007/10/08/1200.html</guid>
		<description><![CDATA[最近一阵国内Blogger开始涉及CSS Sprites，是因为有人偶然发现Google搜索首页JS的秘密，之后我才知道去年Yahoo改版使用的技术原来就是这个，当时不知道怎么形容，只好套用软件资源图片的概念，看过Realazy的文章才大致理解，发现自己当时的理解还是太浅显，这是早在2005年就出现的技术呀。 不可否认，这种方法确实减少了CSS文件里的HTTP请求数，但是图片的更新和配置比较有难度，且半透明和不透明图片最好分开打包。 最后，也许是我胡思乱想，这种方法如果继续发展下去，完全可以省去前端操作人员（网页制作、编辑）用Photoshop切割图片的工序，会否变成引用原设计图直接作为资源图片呢？ Technorati : CSS, CSS Sprites, Google, XHTML, Yahoo<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="别紧张，只是CSS裸奔节又到了" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2008%2F0409_1232.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/05/12/8526827.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">别紧张，只是CSS裸奔节又到了</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="新版Yahoo首页：用软件的方式做网站" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2006%2F0721_821.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">新版Yahoo首页：用软件的方式做网站</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用XHTML+CSS实现文章列表标题时间对齐" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F0305_1096.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/29/7088198.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用XHTML+CSS实现文章列表标题时间对齐</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="关于网页设计和CSS+XHTML" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2006%2F0427_707.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于网页设计和CSS+XHTML</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="赶上CSS裸体节" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F0405_1137.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/29/7088196.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">赶上CSS裸体节</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>最近一阵国内Blogger开始涉及CSS Sprites，是因为有人偶然发现<a href="http://www.marchbox.com/blog/css-sprite-in-google-search/" target="_blank">Google搜索首页JS的秘密</a>，之后我才知道<a href="http://blog.94smart.com/2006/07/21/821.html" target="_blank">去年Yahoo改版使用的技术</a>原来就是这个，当时不知道怎么形容，只好套用软件资源图片的概念，看过<a href="http://realazy.org/blog/2007/10/08/css-sprites/" target="_blank">Realazy的文章</a>才大致理解，发现自己当时的理解还是太浅显，这是早在2005年就出现的技术呀。</p>
<p>不可否认，这种方法确实减少了CSS文件里的HTTP请求数，但是图片的更新和配置比较有难度，且半透明和不透明图片最好分开打包。</p>
<p>最后，也许是我胡思乱想，这种方法如果继续发展下去，完全可以省去前端操作人员（网页制作、编辑）用Photoshop切割图片的工序，会否变成引用原设计图直接作为资源图片呢？</p>
<p class="zoundry_bw_tags">   <!-- Tag links generated by Zoundry Blog Writer. Do not manually edit. <a href="http://www.zoundry.com" rel="nofollow">http://www.zoundry.com</a> --><br />
<span class="ztags"><span class="ztagspace">Technorati</span> : <a href="http://technorati.com/tag/CSS" class="ztag" rel="tag">CSS</a>, <a href="http://technorati.com/tag/CSS%20Sprites" class="ztag" rel="tag">CSS Sprites</a>, <a href="http://technorati.com/tag/Google" class="ztag" rel="tag">Google</a>, <a href="http://technorati.com/tag/XHTML" class="ztag" rel="tag">XHTML</a>, <a href="http://technorati.com/tag/Yahoo" class="ztag" rel="tag">Yahoo</a></span></p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="别紧张，只是CSS裸奔节又到了" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2008%2F0409_1232.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/05/12/8526827.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">别紧张，只是CSS裸奔节又到了</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="新版Yahoo首页：用软件的方式做网站" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2006%2F0721_821.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">新版Yahoo首页：用软件的方式做网站</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用XHTML+CSS实现文章列表标题时间对齐" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F0305_1096.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/29/7088198.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用XHTML+CSS实现文章列表标题时间对齐</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="关于网页设计和CSS+XHTML" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2006%2F0427_707.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于网页设计和CSS+XHTML</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="赶上CSS裸体节" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F0405_1137.html&from=http%3A%2F%2Fblog.94smart.com%2Fcache%2F2007%2F1008_1200.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/29/7088196.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">赶上CSS裸体节</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://blog.94smart.com/cache/2007/1008_1200.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

