<?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>交互设计中心&#124;72色</title>
	<atom:link href="http://www.72color.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.72color.com</link>
	<description>交互设计、用户体验</description>
	<lastBuildDate>Thu, 03 May 2012 01:44:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>访问google、google+等产品不用翻墙</title>
		<link>http://www.72color.com/interaction_design/112.html</link>
		<comments>http://www.72color.com/interaction_design/112.html#comments</comments>
		<pubDate>Thu, 03 May 2012 01:44:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[翻墙]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=112</guid>
		<description><![CDATA[通过添加hosts方式，享受谷歌产品，这样读图会快很多，gmail也能随时打开了，不会出现链接不上情况了，更不用翻墙了！！ windows下修改hosts文件，添加固定的DNS解析 打开系统目录：c:/windows/system32/drivers/etc找到hosts文件，打开hosts文件并在最后面添加以下记录： #forced Google DNS By:Raygd time:2011,10,09 203.208.46.30 www.google.com 203.208.46.30 picasaweb.google.com 203.208.46.30 lh1.ggpht.com 203.208.46.30 lh2.ggpht.com 203.208.46.30 lh3.ggpht.com 203.208.46.30 lh4.ggpht.com 203.208.46.30 lh5.ggpht.com 203.208.46.30 lh6.ggpht.com 203.208.46.30 lh6.googleusercontent.com 203.208.46.30 lh5.googleusercontent.com 203.208.46.30 lh4.googleusercontent.com 203.208.46.30 lh3.googleusercontent.com 203.208.46.30 lh2.googleusercontent.com 203.208.46.30 lh1.googleusercontent.com 203.208.46.30 images1-focus-opensocial.googleusercontent.com 203.208.46.30 images2-focus-opensocial.googleusercontent.com 203.208.46.30 images3-focus-opensocial.googleusercontent.com 203.208.46.30 images4-focus-opensocial.googleusercontent.com 203.208.46.30 images5-focus-opensocial.googleusercontent.com 203.208.46.30 images6-focus-opensocial.googleusercontent.com 203.208.46.30 s6.googleusercontent.com 203.208.46.30 s5.googleusercontent.com 203.208.46.30 s4.googleusercontent.com 203.208.46.30 [...]]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste">
<div id="_mcePaste">通过添加hosts方式，享受谷歌产品，这样读图会快很多，gmail也能随时打开了，不会出现链接不上情况了，更不用<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e7%bf%bb%e5%a2%99" title="查看 翻墙 中的全部文章" target="_blank">翻墙</a></span>了！！</div>
<div id="_mcePaste">windows下修改hosts文件，添加固定的DNS解析</div>
</div>
<p>打开系统目录：c:/windows/system32/drivers/etc找到hosts文件，打开hosts文件并在最后面添加以下记录：</p>
<blockquote><p>#forced Google DNS By:Raygd time:2011,10,09<br />
203.208.46.30 www.<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/google" title="查看 google 中的全部文章" target="_blank">google</a></span>.com<br />
203.208.46.30 picasaweb.<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/google" title="查看 google 中的全部文章" target="_blank">google</a></span>.com<br />
203.208.46.30 lh1.ggpht.com<br />
203.208.46.30 lh2.ggpht.com<br />
203.208.46.30 lh3.ggpht.com<br />
203.208.46.30 lh4.ggpht.com<br />
203.208.46.30 lh5.ggpht.com<br />
203.208.46.30 lh6.ggpht.com<br />
203.208.46.30 lh6.<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/google" title="查看 google 中的全部文章" target="_blank">google</a></span>usercontent.com<br />
203.208.46.30 lh5.googleusercontent.com<br />
203.208.46.30 lh4.googleusercontent.com<br />
203.208.46.30 lh3.googleusercontent.com<br />
203.208.46.30 lh2.googleusercontent.com<br />
203.208.46.30 lh1.googleusercontent.com<br />
203.208.46.30 images1-focus-opensocial.googleusercontent.com<br />
203.208.46.30 images2-focus-opensocial.googleusercontent.com<br />
203.208.46.30 images3-focus-opensocial.googleusercontent.com<br />
203.208.46.30 images4-focus-opensocial.googleusercontent.com<br />
203.208.46.30 images5-focus-opensocial.googleusercontent.com<br />
203.208.46.30 images6-focus-opensocial.googleusercontent.com<br />
203.208.46.30 s6.googleusercontent.com<br />
203.208.46.30 s5.googleusercontent.com<br />
203.208.46.30 s4.googleusercontent.com<br />
203.208.46.30 s3.googleusercontent.com<br />
203.208.46.30 s2.googleusercontent.com<br />
203.208.46.30 s1.googleusercontent.com<br />
203.208.46.30 plus.google.com<br />
203.208.46.30 talkgadget.google.com<br />
203.208.46.30 ditu.google.com<br />
203.208.46.30 maps-api-ssl.google.com<br />
203.208.46.30 mail.google.com<br />
203.208.46.30 docs.google.com<br />
203.208.46.30 pop.gmail.com<br />
203.208.46.30 scholar.l.google.com<br />
203.208.46.30 news.google.com<br />
203.208.46.30 video.google.com<br />
203.208.46.29 translate.google.com<br />
203.208.46.30 profiles.google.com<br />
203.208.46.29&#8212;-203.208.46.91</p>
<p><span id="more-112"></span><br />
#Search<br />
74.125.39.99 www.google.com<br />
74.125.39.103 www.google.com<br />
74.125.39.104 www.google.com<br />
74.125.39.105 www.l.google.com<br />
#Images<br />
74.125.39.99 images.google.com<br />
74.125.39.103 images.google.com<br />
74.125.39.104 images.google.com<br />
74.125.39.105 images.google.com<br />
74.125.39.106 images.google.com<br />
74.125.39.147 images.google.com<br />
74.125.77.99 tbn0.google.com<br />
74.125.77.99 tbn1.google.com<br />
74.125.77.103 tbn2.google.com<br />
74.125.77.104 tbn3.google.com<br />
74.125.77.105 tbn4.google.com<br />
74.125.77.106 tbn5.google.com<br />
74.125.77.147 tbn6.google.com<br />
#Shopping<br />
74.125.39.99 base0.googlehosted.com<br />
74.125.39.103 base1.googlehosted.com<br />
74.125.39.104 base2.googlehosted.com<br />
74.125.39.105 base3.googlehosted.com<br />
74.125.39.106 base4.googlehosted.com<br />
74.125.39.147 base5.googlehosted.com<br />
#Books<br />
74.125.39.100 books.google.com<br />
74.125.39.101 books.google.com<br />
74.125.39.102 books.google.com<br />
74.125.39.113 books.google.com<br />
74.125.39.138 books.google.com<br />
74.125.39.139 books.google.com<br />
74.125.39.100 bks0.books.google.com<br />
74.125.39.100 bks1.books.google.com<br />
74.125.39.101 bks2.books.google.com<br />
74.125.39.102 bks3.books.google.com<br />
74.125.39.113 bks4.books.google.com<br />
74.125.39.138 bks5.books.google.com<br />
74.125.39.139 bks6.books.google.com<br />
74.125.39.113 bks7.books.google.com<br />
74.125.39.138 bks8.books.google.com<br />
74.125.39.139 bks9.books.google.com<br />
#Video<br />
74.125.39.100 video.google.com<br />
74.125.39.101 video.google.com<br />
74.125.39.102 video.google.com<br />
74.125.39.113 video.google.com<br />
74.125.39.138 video.google.com<br />
74.125.39.139 video.google.com<br />
74.125.39.100 0.gvt0.com<br />
74.125.39.101 1.gvt0.com<br />
74.125.39.102 2.gvt0.com<br />
74.125.39.113 3.gvt0.com<br />
74.125.39.138 4.gvt0.com<br />
74.125.39.139 5.gvt0.com<br />
#Mail(POP3/SMTP)<br />
209.85.147.109 pop.gmail.com<br />
209.85.147.109 smtp.gmail.com<br />
#WebMail<br />
64.233.189.18 mail.google.com<br />
64.233.189.19 mail.google.com<br />
64.233.189.83 mail.google.com<br />
64.233.189.18 www.gmail.com<br />
64.233.189.19 www.gmail.com<br />
64.233.189.83 www.gmail.com<br />
64.233.189.19 googlemail.l.google.com<br />
#Docs<br />
64.233.189.101 writely-china.l.google.com<br />
64.233.189.101 writely.l.google.com<br />
64.233.189.102 docs.google.com<br />
64.233.189.101 docs.google.com<br />
64.233.189.100 docs.google.com<br />
#Map<br />
64.233.189.104 map.google.com<br />
64.233.189.99 map.google.com<br />
64.233.189.147 map.google.com<br />
64.233.189.104 maps.google.com<br />
64.233.189.99 maps.google.com<br />
64.233.189.147 maps.google.com<br />
64.233.189.99 maps.gstatic.com<br />
203.208.39.93 khm.google.com<br />
203.208.39.91 mt0.google.com<br />
203.208.39.93 mt1.google.com<br />
203.208.39.91 mt2.google.com<br />
203.208.39.91 mt.l.google.com<br />
64.233.189.99 maps.l.google.com<br />
#Scholar<br />
64.233.189.99 scholar.google.com<br />
64.233.189.104 scholar.google.com<br />
64.233.189.147 scholar.google.com<br />
64.233.189.104 scholar.l.google.com<br />
#Group<br />
64.233.189.102 groups.google.com<br />
64.233.189.100 groups.google.com<br />
64.233.189.101 groups.google.com<br />
64.233.189.101 groups.l.google.com<br />
#Picasa<br />
74.125.39.147 picasa.google.com<br />
74.125.39.91 photos.google.com<br />
74.125.39.91 picasaweb.google.com<br />
74.125.39.93 picasaweb.google.com<br />
74.125.39.136 picasaweb.google.com<br />
74.125.39.190 picasaweb.google.com<br />
74.125.39.91 lh0.ggpht.com<br />
74.125.39.93 lh1.ggpht.com<br />
74.125.39.136 lh2.ggpht.com<br />
74.125.39.190 lh3.ggpht.com<br />
74.125.39.91 lh4.ggpht.com<br />
74.125.39.93 lh5.ggpht.com<br />
74.125.39.136 lh6.ggpht.com<br />
74.125.39.190 lh7.ggpht.com<br />
#Translate<br />
74.125.39.100 translate.google.com<br />
74.125.39.101 translate.google.com<br />
74.125.39.102 translate.google.com<br />
74.125.39.113 translate.google.com<br />
74.125.39.138 translate.google.com<br />
74.125.39.139 translate.google.com<br />
#Reader<br />
74.125.39.99 reader.google.com<br />
74.125.39.103 reader.google.com<br />
74.125.39.104 reader.google.com<br />
74.125.39.105 reader.google.com<br />
74.125.39.106 reader.google.com<br />
#Sites<br />
64.233.161.9 sites.google.com<br />
74.125.53.9 sites.google.com<br />
74.125.39.102 sites.google.com<br />
74.125.39.139 sites.google.com<br />
74.125.45.9 sites.google.com<br />
74.125.39.139 sites.google.com<br />
#Code<br />
74.125.53.9 code.google.com<br />
74.125.45.9 code.google.com<br />
64.233.161.9 code.google.com<br />
74.125.39.102 code.google.com<br />
209.85.137.9 code.google.com<br />
74.125.39.139 code.l.google.com<br />
#Labs<br />
74.125.39.141 www.googlelabs.com<br />
74.125.39.141 appspot.l.google.com<br />
74.125.39.100 labs.google.com<br />
74.125.39.101 labs.google.com<br />
74.125.39.102 labs.google.com<br />
74.125.39.113 labs.google.com<br />
74.125.39.138 labs.google.com<br />
74.125.39.139 labs.google.com<br />
#Knol<br />
74.125.39.100 knol.google.com<br />
74.125.39.101 knol.google.com<br />
74.125.39.102 knol.google.com<br />
74.125.39.113 knol.google.com<br />
74.125.39.138 knol.google.com<br />
74.125.39.139 knol.google.com<br />
#Sketchup<br />
74.125.39.99 sketchup.google.com<br />
74.125.39.103 sketchup.google.com<br />
74.125.39.104 sketchup.google.com<br />
74.125.39.105 sketchup.google.com<br />
74.125.39.106 sketchup.google.com<br />
#Pack<br />
74.125.39.99 pack.google.com<br />
74.125.39.103 pack.google.com<br />
74.125.39.104 pack.google.com<br />
74.125.39.105 pack.google.com<br />
74.125.39.106 pack.google.com<br />
#News<br />
74.125.39.99 news.google.com<br />
74.125.39.103 news.google.com<br />
74.125.39.104 news.google.com<br />
74.125.39.105 news.google.com<br />
74.125.39.106 news.google.com<br />
74.125.39.147 news.google.com<br />
74.125.39.99 nt0.ggpht.com<br />
74.125.39.103 nt1.ggpht.com<br />
74.125.39.104 nt2.ggpht.com<br />
74.125.39.105 nt3.ggpht.com<br />
74.125.39.106 nt4.ggpht.com<br />
74.125.39.147 nt5.ggpht.com<br />
#Calendar<br />
74.125.39.100 calendar.google.com<br />
74.125.39.101 calendar.google.com<br />
74.125.39.102 calendar.google.com<br />
74.125.39.113 calendar.google.com<br />
74.125.39.138 calendar.google.com<br />
74.125.39.139 calendar.google.com<br />
#Blogger<br />
74.125.39.191 www.blogger.com<br />
74.125.39.191 blogger.l.google.com<br />
74.125.39.191 blogger.google.com<br />
#Orkut<br />
74.125.47.85 www.orkut.com<br />
74.125.47.86 www.orkut.com<br />
74.125.47.85 orkut.google.com<br />
74.125.47.86 orkut.l.google.com<br />
#Youtube<br />
74.125.39.100 www.youtube.com<br />
74.125.39.101 www.youtube.com<br />
74.125.39.102 www.youtube.com<br />
74.125.39.113 www.youtube.com<br />
#Toolbar<br />
74.125.39.100 toolbar.google.com<br />
74.125.39.101 toolbar.google.com<br />
74.125.39.102 toolbar.google.com<br />
74.125.39.113 toolbar.google.com<br />
#Apps<br />
74.125.39.99 apps.google.com<br />
74.125.39.103 apps.google.com<br />
74.125.39.104 apps.google.com<br />
74.125.39.115 apps.google.com<br />
#Chrome<br />
74.125.39.99 chrome.google.com<br />
74.125.39.103 chrome.google.com<br />
74.125.39.104 chrome.google.com<br />
74.125.39.115 chrome.google.com<br />
74.125.47.139 clients2.google.com<br />
#Finance<br />
74.125.39.99 finance.google.com<br />
74.125.39.103 finance.google.com<br />
74.125.39.104 finance.google.com<br />
74.125.39.115 finance.google.com<br />
#Desktop<br />
74.125.39.99 desktop.google.com<br />
74.125.39.103 desktop.google.com<br />
74.125.39.104 desktop.google.com<br />
74.125.39.115 desktop.google.com<br />
#Ajax<br />
74.125.53.9 ajax.googleapis.com<br />
74.125.45.9 ajax.googleapis.com<br />
64.233.161.9 ajax.googleapis.com<br />
209.85.137.9 ajax.googleapis.com<br />
72.14.203.9 googleapis-ajax.l.google.com<br />
#Modules<br />
74.125.39.132 1.ig.gmodules.com<br />
74.125.39.132 2.ig.gmodules.com<br />
74.125.39.132 3.ig.gmodules.com<br />
74.125.39.132 4.ig.gmodules.com<br />
74.125.39.132 5.ig.gmodules.com<br />
74.125.39.132 6.ig.gmodules.com<br />
#Misc<br />
64.233.189.101 id.google.com<br />
64.233.189.102 id.google.com<br />
64.233.189.100 id.google.com<br />
64.233.189.100 id.l.google.com<br />
74.125.39.132 skins.gmodules.com<br />
74.125.39.132 googlehosted.l.google.com<br />
74.125.39.132 img0.gmodules.com<br />
74.125.39.99 blogsearch.google.com<br />
74.125.39.99 www2.l.google.com<br />
74.125.39.99 www.gstatic.com<br />
74.125.39.100 www3.l.google.com<br />
74.125.39.99 buttons.googlesyndication.com</p>
<p>#Chrome plugin<br />
#Chrome官方扩展中心<br />
74.125.39.99 chrome.google.com<br />
74.125.39.99 clients2.google.com</p>
<p>#Chrome官方主题中心<br />
74.125.153.138 tools.google.com</p>
<p>#谷歌拼音同步：<br />
74.125.47.139 clients2.google.com<br />
74.125.39.99 clients4.google.com<br />
209.85.225.100 clients4.google.com<br />
64.233.183.139 clients4.google.com<br />
64.233.183.139 docs.google.com<br />
74.125.19.101 docs.google.com<br />
74.125.19.101 chrome.google.com<br />
74.125.47.139 clients2.google.com<br />
74.125.153.138 tools.google.com<br />
74.125.39.99 docs.google.com<br />
209.85.225.101 docs.google.com<br />
74.125.127.100 writely.google.com<br />
74.125.127.139 spreadsheets.google.com<br />
209.85.147.109 pop.gmail.com<br />
209.85.147.109 smtp.gmail.com<br />
66.102.7.19 mail.google.com<br />
209.85.225.102 groups.google.com<br />
74.125.127.100 services.google.com<br />
74.125.127.100 sites.google.com<br />
209.85.225.104 reader.google.com<br />
74.125.127.101 calendar.google.com</p></blockquote>
<p>添加完成後，保存文件，大概等待10秒左右的時間，重新刷新網頁即可，或直接重啟一下瀏览器。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/112.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery图片弹出插件popImage</title>
		<link>http://www.72color.com/interaction_design/109.html</link>
		<comments>http://www.72color.com/interaction_design/109.html#comments</comments>
		<pubDate>Thu, 12 Apr 2012 05:46:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[jQuery插件]]></category>
		<category><![CDATA[popImage]]></category>
		<category><![CDATA[图片插件]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=109</guid>
		<description><![CDATA[此插件的特点： 灰常小巧，未压缩2.2KB,mini压缩之后1.7KB 功能简单，但是比较漂亮~嘿嘿~ 即将要弹出的大图都会被插件预加载到页面中，以作弹出时候的准备 使用简单，配置参数很少 配置参数1：tagName=&#62;这个表示图片地址是取自DOM元素的什么属性，默认的是“href”， 配置参数2：timeOut=&#62;这个表示，弹出图片所用的时间。 就这么点特点~~哈哈~~大家赏脸的话，可以到下面的链接去瞅瞅DEMO演示，嘿嘿~~如果觉得效果还不错~~也可以打包拿走。]]></description>
			<content:encoded><![CDATA[<p>此插件的特点：</p>
<ol>
<li><strong>灰常小巧，未压缩2.2KB,mini压缩之后1.7KB</strong></li>
<li><strong>功能简单，但是比较漂亮~嘿嘿~</strong></li>
<li><strong>即将要弹出的大图都会被插件预加载到页面中，以作弹出时候的准备</strong></li>
<li><strong>使用简单，配置参数很少</strong>      <br />配置参数1：tagName=&gt;这个表示图片地址是取自DOM元素的什么属性，默认的是“href”，      <br />配置参数2：timeOut=&gt;这个表示，弹出图片所用的时间。</li>
</ol>
<p>就这么点特点~~哈哈~~大家赏脸的话，可以到下面的链接去瞅瞅DEMO演示，嘿嘿~~如果觉得效果还不错~~也可以打包拿走。</p>
<p><a href="http://skygq.com/demo/jquery.popImage/index.html"><img src="http://www.skygq.com/wp-includes/images/button-demo.png" /></a><a href="http://skygq.com/demo/jquery.popImage.rar"><img src="http://www.skygq.com/wp-includes/images/button-download.png" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/109.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jquery绑定回车键发送（登录）</title>
		<link>http://www.72color.com/interaction_design/104.html</link>
		<comments>http://www.72color.com/interaction_design/104.html#comments</comments>
		<pubDate>Thu, 29 Mar 2012 08:24:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[绑定回车键]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=104</guid>
		<description><![CDATA[按回车键就可以出发发送按钮，这个在一般登录页面比较常用。 代码如下： $(document).keydown(function(e){ if(e.keyCode == 13) { $('#login').submit(); } }); $(document)意思是说，获取整个网页文档对象（类似的于window.document）， $(document).ready意思就是说，获取文档对象就绪的时候。 上面这段代码的意思是检查文档对象直到它能够允许被操作。 （这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）]]></description>
			<content:encoded><![CDATA[<p>按回车键就可以出发发送按钮，这个在一般登录页面比较常用。</p>
<p>代码如下：<br />
<code><br />
$(document).keydown(function(e){<br />
if(e.keyCode == 13) {<br />
$('#login').submit();<br />
}<br />
});<br />
</code><br />
$(document)意思是说，获取整个网页文档对象（类似的于window.document），<br />
$(document).ready意思就是说，获取文档对象就绪的时候。<br />
上面这段代码的意思是检查文档对象直到它能够允许被操作。<br />
（这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/104.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css3文字颜色渐变、动画特效效果</title>
		<link>http://www.72color.com/html5/95.html</link>
		<comments>http://www.72color.com/html5/95.html#comments</comments>
		<pubDate>Thu, 12 Jan 2012 14:04:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[动画特效]]></category>
		<category><![CDATA[颜色渐变]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=95</guid>
		<description><![CDATA[css3颜色渐变、动画特效效果演示： 72色 72COLOR.COM CSS3颜色渐变的文字特效,利用css3的animation属性还能做出动感十足的特效。上面的效果大家看到了把，那就是用下面的css3代码实现的，很简单的几行代码就能实现文字颜色渐变和动态效果，以前不是flash就是要用javascript脚本语言。 &#60;code&#62; &#60;style type=”text/css”&#62; p.color_shine { font-size: 3em; margin: 0 auto; padding:20px 0; } .color_shine { background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat; -webkit-background-size: 125px; color: rgba(255, 255, 255, 0.1); -webkit-background-clip: text; -webkit-animation-name: color_shine; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes color_shine { 0% { background-position: [...]]]></description>
			<content:encoded><![CDATA[<p><strong><span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span><span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e9%a2%9c%e8%89%b2%e6%b8%90%e5%8f%98" title="查看 颜色渐变 中的全部文章" target="_blank">颜色渐变</a></span>、<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e5%8a%a8%e7%94%bb%e7%89%b9%e6%95%88" title="查看 动画特效 中的全部文章" target="_blank">动画特效</a></span>效果演示：</strong></p>
<style type="text/css"> p.colorshine{    font-size: 3em;    margin: 0 auto;    padding:20px 0;}.colorshine{    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;    -webkit-background-size: 125px;        color: rgba(255, 255, 255, 0.1);    -webkit-background-clip: text;        -webkit-animation-name: colorshine;    -webkit-animation-duration: 2s;    -webkit-animation-iteration-count: infinite;}@-webkit-keyframes colorshine{    0%    {        background-position: top left;    }    100%    {        background: top right;    }}</style>
<div style="background-color: #333;">
<p class="colorshine">72色 72COLOR.COM</p>
</div>
<p>CSS3<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e9%a2%9c%e8%89%b2%e6%b8%90%e5%8f%98" title="查看 颜色渐变 中的全部文章" target="_blank">颜色渐变</a></span>的文字特效,利用<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>的animation属性还能做出动感十足的特效。上面的效果大家看到了把，那就是用下面的css3代码实现的，很简单的几行代码就能实现文字颜色渐变和动态效果，以前不是flash就是要用javascript脚本语言。</p>
<p>&lt;code&gt;<br />
&lt;style type=”text/css”&gt;<br />
p.color_shine<br />
{<br />
font-size: 3em;<br />
margin: 0 auto;<br />
padding:20px 0;<br />
}</p>
<p>.color_shine<br />
{<br />
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;<br />
-webkit-background-size: 125px;</p>
<p>color: rgba(255, 255, 255, 0.1);<br />
-webkit-background-clip: text;</p>
<p>-webkit-animation-name: color_shine;<br />
-webkit-animation-duration: 2s;<br />
-webkit-animation-iteration-count: infinite;<br />
}</p>
<p>@-webkit-keyframes color_shine<br />
{<br />
0%<br />
{<br />
background-position: top left;<br />
}<br />
100%<br />
{<br />
background: top right;<br />
}<br />
}<br />
&lt;/style&gt;<br />
&lt;!&#8211; HTML &#8211;&gt;<br />
&lt;p class=”color_shine”&gt;交互设计中心-72色 72COLOR.COM&lt;/p&gt;<br />
&lt;/code&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/html5/95.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery切割图片插件生成缩略图</title>
		<link>http://www.72color.com/interaction_design/88.html</link>
		<comments>http://www.72color.com/interaction_design/88.html#comments</comments>
		<pubDate>Tue, 10 Jan 2012 14:33:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery插件]]></category>
		<category><![CDATA[切割图片]]></category>
		<category><![CDATA[生成缩略图]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=88</guid>
		<description><![CDATA[堪比流行flash切割头像的插件一样方便一样酷，自由选择图片任意部分任意大小。 还可以得到及时反馈所需要的鼠标滑动时的信息，同样可以生成缩略图。 插件的使用起来特别方便，具体使用法请看传送门： 插件演示 下载地址]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.72color.com/interaction_design/88.html/attachment/jquery-qiege-tupian001" rel="attachment wp-att-90"><img class="alignnone size-full wp-image-90" title="jQuery切割图片插件生成缩略图" src="http://www.72color.com/wp-content/uploads/2012/01/jquery-qiege-tupian001.png" alt="jQuery切割图片插件生成缩略图" width="606" height="237" /></a></p>
<p>堪比流行flash切割头像的插件一样方便一样酷，自由选择图片任意部分任意大小。</p>
<p><a href="http://www.72color.com/interaction_design/88.html/attachment/jquery-qiege-tupian002" rel="attachment wp-att-89"><img class="alignnone size-full wp-image-89" title="jQuery切割图片插件生成缩略图" src="http://www.72color.com/wp-content/uploads/2012/01/jquery-qiege-tupian002.png" alt="jQuery切割图片插件生成缩略图" width="501" height="270" /></a></p>
<p>还可以得到及时反馈所需要的鼠标滑动时的信息，同样可以<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e7%94%9f%e6%88%90%e7%bc%a9%e7%95%a5%e5%9b%be" title="查看 生成缩略图 中的全部文章" target="_blank">生成缩略图</a></span>。</p>
<p>插件的使用起来特别方便，具体使用法请看传送门：</p>
<p><a title="juery切割插件演示" href="http://deepliquid.com/projects/Jcrop/demos.php" target="_blank">插件演示</a></p>
<p><a href="http://deepliquid.com/content/Jcrop_Download.html" target="_blank">下载地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/88.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>用css3做漂亮的水晶按钮</title>
		<link>http://www.72color.com/interaction_design/75.html</link>
		<comments>http://www.72color.com/interaction_design/75.html#comments</comments>
		<pubDate>Thu, 15 Dec 2011 01:50:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[按钮]]></category>
		<category><![CDATA[水晶按钮]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=75</guid>
		<description><![CDATA[以前还用Photoshop制作透明水晶按钮的时候都要跟着网上教程学，就是现在用photoshop做水晶按钮也不是很简单就能做出很漂亮的按钮，现在有了css3，只要几行css代码就可以了，想怎么调试就怎么调试，想要什么颜色就要什么颜色，赶紧试试吧！ HTML结构： &#60;div class="button aqua"&#62; &#60;div class="glare"&#62;&#60;/div&#62; Button Label &#60;/div&#62; css 代码： .button{ width: 120px; height: 24px; padding: 5px 16px 3px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border: 2px solid #ccc; position: relative; /* Label */ font-family: Lucida Sans, Helvetica, sans-serif; font-weight: 800; color: #fff; text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px; text-align: center; vertical-align: middle; [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.72color.com/interaction_design/75.html/attachment/shuijinganniu001" rel="attachment wp-att-76"><img class="size-full wp-image-76 alignleft" title="水晶按钮" src="http://www.72color.com/wp-content/uploads/2011/12/shuijinganniu001.png" alt="" width="224" height="135" /></a><a href="http://www.72color.com/interaction_design/75.html/attachment/shuijinganniu002" rel="attachment wp-att-77"><img class="alignnone size-full wp-image-77" title="水晶按钮css3制作" src="http://www.72color.com/wp-content/uploads/2011/12/shuijinganniu002.png" alt="css3制作水晶按钮" width="224" height="135" /></a></p>
<p>以前还用Photoshop制作透明<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%b0%b4%e6%99%b6%e6%8c%89%e9%92%ae" title="查看 水晶按钮 中的全部文章" target="_blank">水晶按钮</a></span>的时候都要跟着网上教程学，就是现在用photoshop做<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%b0%b4%e6%99%b6%e6%8c%89%e9%92%ae" title="查看 水晶按钮 中的全部文章" target="_blank">水晶按钮</a></span>也不是很简单就能做出很漂亮的<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%8c%89%e9%92%ae" title="查看 按钮 中的全部文章" target="_blank">按钮</a></span>，现在有了<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>，只要几行css代码就可以了，想怎么调试就怎么调试，想要什么颜色就要什么颜色，赶紧试试吧！</p>
<p><strong>HTML结构：</strong></p>
<pre>&lt;div class="button aqua"&gt;
  &lt;div class="glare"&gt;&lt;/div&gt;
  Button Label
&lt;/div&gt;</pre>
<p><strong>css 代码：</strong></p>
<p><code><br />
.button{<br />
width: 120px;<br />
height: 24px;<br />
padding: 5px 16px 3px;<br />
-webkit-border-radius: 16px;<br />
-moz-border-radius: 16px;<br />
border: 2px solid #ccc;<br />
position: relative;</code></p>
<p>/* Label */<br />
font-family: Lucida Sans, Helvetica, sans-serif;<br />
font-weight: 800;<br />
color: #fff;<br />
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;<br />
text-align: center;<br />
vertical-align: middle;<br />
white-space: nowrap;<br />
text-overflow: ellipsis;<br />
overflow: hidden;<br />
}<br />
.aqua{<br />
background-color: rgba(60, 132, 198, 0.8);<br />
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));<br />
border-top-color: #8ba2c1;<br />
border-right-color: #5890bf;<br />
border-bottom-color: #4f93ca;<br />
border-left-color: #768fa5;<br />
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;<br />
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */<br />
}<br />
.button .glare {<br />
position: absolute;<br />
top: 0;<br />
left: 5px;<br />
-webkit-border-radius: 8px;<br />
-moz-border-radius: 8px;<br />
height: 1px;<br />
width: 142px;<br />
padding: 8px 0;<br />
background-color: rgba(255, 255, 255, 0.25);<br />
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));<br />
}</p>
<p>预览地址：http://girliemac.com/sandbox/button.html<br />
原文地址：http://girliemac.com/blog/2009/04/30/<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>-gradients-no-image-aqua-button/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/75.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2011年12月Godaddy优惠码域名1美元</title>
		<link>http://www.72color.com/interaction_design/72.html</link>
		<comments>http://www.72color.com/interaction_design/72.html#comments</comments>
		<pubDate>Thu, 01 Dec 2011 09:32:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[Godaddy优惠码]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=72</guid>
		<description><![CDATA[2011年12月Godaddy域名活动，1美元。 每个用户好像只能买一个域名，貌似还限定了一个信用卡。（本次活动只能用信用卡付款） SPECIAL OFFER! $1.00 DOMAIN NAME! Register any available .COM, .US, .MOBI, .BIZ, .NET, .ORG, .CA, .CO.UK and .IN domain for just $1.00!* 优惠码：getfit 10000个或者1月31日前 注册地址：godaddy.com Godaddy域名注册优惠码 优惠码: cjc695dom   cjc749dom    cjc749chp cjc749IDC 说明: $7.49 .COM 注册 有效期: N/A 优惠码： cjc749b004 注册com域名 $7.49美元 优惠码: cjcPRIVATE 说明: 域名隐私保护 有效期: 2011年12月 优惠码: cjctld749  说明: $7.49 .NET 注册 有效期: N/A 优惠码: cjctld749  说明: $7.49 [...]]]></description>
			<content:encoded><![CDATA[<p><strong>2011年12月Godaddy域名活动，1美元。</strong></p>
<p><strong></strong>每个用户好像只能买一个域名，貌似还限定了一个信用卡。（本次活动只能用信用卡付款）</p>
<p>SPECIAL OFFER! $1.00 DOMAIN NAME! Register any available .COM, .US, .MOBI, .BIZ, .NET, .ORG, .CA, .CO.UK and .IN domain for just $1.00!*<br />
优惠码：getfit<br />
10000个或者1月31日前<br />
注册地址：<a href="http://www.godaddy.com/default.aspx?isc=IAPtno138" target="_blank">godaddy.com</a></p>
<p><strong>Godaddy域名注册优惠码</strong></p>
<p>优惠码: <strong><span style="color: blue;">cjc695dom  </span></strong> <span style="color: blue;"><strong>cjc749dom</strong></span>    <strong>cjc749chp</strong><br />
<strong>cjc749IDC</strong><br />
说明: $7.49 .COM 注册<br />
有效期: N/A</p>
<p>优惠码： <strong><span style="color: blue;">cjc749b004</span></strong><br />
注册com域名 $7.49美元</p>
<p>优惠码: <span style="color: blue;">cjcPRIVATE</span><br />
说明: 域名隐私保护<br />
有效期: 2011年12月</p>
<p>优惠码: <strong><span style="color: blue;">cjctld749 </span></strong><br />
说明: $7.49 .NET 注册<br />
有效期: N/A</p>
<p>优惠码: <strong><span style="color: blue;">cjctld749 </span></strong><br />
说明: $7.49 .ORG 注册<br />
有效期: N/A</p>
<p>优惠码: <strong><span style="color: blue;">cjcUS349 </span></strong><br />
说明: $3.49 .US 注册<br />
有效期: N/A</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/72.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>只用css3制作漂亮的滚动条</title>
		<link>http://www.72color.com/interaction_design/67.html</link>
		<comments>http://www.72color.com/interaction_design/67.html#comments</comments>
		<pubDate>Wed, 30 Nov 2011 13:34:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[滚动条]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=67</guid>
		<description><![CDATA[只用css3就能做出来上图这么漂亮的滚动条，是不是很感叹，是不是想让css2、不支持css3的IE版本赶快死去，我们这些苦逼的IT民工们的好日子快来了。 点击这里预览效果吧 下载源代码 制作详细页面]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.72color.com/interaction_design/67.html/attachment/gundongtiao-css3" rel="attachment wp-att-68"><img class="alignnone size-medium wp-image-68" title="只用css3制作漂亮的滚动条" src="http://www.72color.com/wp-content/uploads/2011/11/gundongtiao-css3-300x131.png" alt="只用css3制作漂亮的滚动条" width="300" height="131" /></a></p>
<p>只用<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>就能做出来上图这么漂亮的<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%bb%9a%e5%8a%a8%e6%9d%a1" title="查看 滚动条 中的全部文章" target="_blank">滚动条</a></span>，是不是很感叹，是不是想让css2、不支持<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>的IE版本赶快死去，我们这些苦逼的IT民工们的好日子快来了。</p>
<p><a title="css3制作漂亮的滚动条" href="http://css-tricks.com/examples/ProgressBars/" target="_blank">点击这里预览效果吧</a></p>
<p><a title="滚动条" href="http://css-tricks.com/examples/ProgressBars.zip" target="_blank">下载源代码</a></p>
<p><a href="http://css-tricks.com/8518-css3-progress-bars/" target="_blank">制作详细页面</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/67.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>针对IE6的最大宽度最小宽度及高度的css、js的写法</title>
		<link>http://www.72color.com/interaction_design/64.html</link>
		<comments>http://www.72color.com/interaction_design/64.html#comments</comments>
		<pubDate>Tue, 22 Nov 2011 13:28:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[最大宽度]]></category>
		<category><![CDATA[最大高度]]></category>
		<category><![CDATA[最小宽度]]></category>
		<category><![CDATA[最小高度]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=64</guid>
		<description><![CDATA[众所周知IE6早晚要死，可是它现在还在还在好死不或着，我们还要面对显示，还是要对IE6做下特殊的处理，下面就看看最大宽度和最小宽度的解决方法把： 先说说大家常用的css里面写一些js的方法,后面再说说纯js的方式，因为有的时候由于站点的框架问题不能用css里面的方法，就要用到纯js的方法。 1、IE6支持最大宽度，解决CSS代码： .yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#60;1000?"1000px":"");overflow:hidden;} 说明：max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#60;1000?"1000px":"");overflow:hidden; 则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。 让所有浏览器都支持max-width的CSS样式代码，完整： max-width:1000px;_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#60;1000?"1000px":"");overflow:hidden; 这里的1000和1000px是你需要的数值，注意3个数值的相同。 设置最大max-width的时候别忘记加上overflow:hidden; 2、IE6支持min-width解决方法 IE6支持最小宽度，解决CSS代码： .yangshi{min-width:1000px;_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#62;1000?"1000px":"");} 说明：min-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#62;1000?"1000px":""); 则是让IE6支持min-width替代CSS代码，但效果和其它版本浏览器相同效果。 让所有浏览器都支持min-width的CSS样式代码，完整： min-width:1000px;_width:expression((document.documentElement.clientWidth&#124;&#124;document.body.clientWidth)&#62;1000?"1000px":""); 这里的1000和1000px是你需要的数值，注意3个数值的相同。 3、让IE6支持min-width同时又支持max-width解决方法 让IE6即支持最小宽度又支持最大宽度限制设置。这种情况我们常常碰到对图片控制，让不确定大小的图片，如果太宽，不能超出一定范围值，小的时候不控制他的方法，用到CSS代码： _width:expression(this.scrollWidth &#62; 620 ? "620px" : (this.scrollWidth &#60; 1? "1px" : "auto")); 对图片控制CSS完整代码： img{max-width:620px;_width:expression(this.scrollWidth &#62; 620 ? "620px" : (this.scrollWidth &#60; 1? "1px" : "auto"));} 这里说明：图片不能超出大于620px的宽度，又不小于1像素的宽度。 让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIV CSS代码： .yangshi{max-width:620px;min-width:1px;_width:expression(this.scrollWidth &#62; 620 ? "620px" [...]]]></description>
			<content:encoded><![CDATA[<p>众所周知<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/ie6" title="查看 IE6 中的全部文章" target="_blank">IE6</a></span>早晚要死，可是它现在还在还在好死不或着，我们还要面对显示，还是要对<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/ie6" title="查看 IE6 中的全部文章" target="_blank">IE6</a></span>做下特殊的处理，下面就看看<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%a4%a7%e5%ae%bd%e5%ba%a6" title="查看 最大宽度 中的全部文章" target="_blank">最大宽度</a></span>和<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%b0%8f%e5%ae%bd%e5%ba%a6" title="查看 最小宽度 中的全部文章" target="_blank">最小宽度</a></span>的解决方法把：<br />
先说说大家常用的css里面写一些js的方法,后面再说说纯js的方式，因为有的时候由于站点的框架问题不能用css里面的方法，就要用到纯js的方法。</p>
<p><strong>1、IE6支持<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%a4%a7%e5%ae%bd%e5%ba%a6" title="查看 最大宽度 中的全部文章" target="_blank">最大宽度</a></span>，解决CSS代码：</strong><br />
<code>.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&lt;1000?"1000px":"");overflow:hidden;}</code></p>
<p>说明：max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而<code>_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&lt;1000?"1000px":"");overflow:hidden;</code><br />
则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。</p>
<p>让所有浏览器都支持max-width的CSS样式代码，完整：<br />
<code>max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&lt;1000?"1000px":"");overflow:hidden; </code><br />
这里的1000和1000px是你需要的数值，注意3个数值的相同。</p>
<p>设置最大max-width的时候别忘记加上overflow:hidden;<br />
<span id="more-64"></span><br />
<strong>2、IE6支持min-width解决方法</strong><br />
IE6支持<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%b0%8f%e5%ae%bd%e5%ba%a6" title="查看 最小宽度 中的全部文章" target="_blank">最小宽度</a></span>，解决CSS代码：<br />
<code>.yangshi{min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&gt;1000?"1000px":"");}</code></p>
<p>说明：min-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而<code>_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&gt;1000?"1000px":"");</code><br />
则是让IE6支持min-width替代CSS代码，但效果和其它版本浏览器相同效果。</p>
<p>让所有浏览器都支持min-width的CSS样式代码，完整：<br />
<code>min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)&gt;1000?"1000px":"");</code><br />
这里的1000和1000px是你需要的数值，注意3个数值的相同。</p>
<p><strong>3、让IE6支持min-width同时又支持max-width解决方法</strong><br />
让IE6即支持<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%b0%8f%e5%ae%bd%e5%ba%a6" title="查看 最小宽度 中的全部文章" target="_blank">最小宽度</a></span>又支持最大宽度限制设置。这种情况我们常常碰到对图片控制，让不确定大小的图片，如果太宽，不能超出一定范围值，小的时候不控制他的方法，用到CSS代码：</p>
<p><code>_width:expression(this.scrollWidth &gt; 620 ? "620px" : (this.scrollWidth &lt; 1? "1px" : "auto"));</code><br />
对图片控制CSS完整代码：</p>
<p><code>img{max-width:620px;_width:expression(this.scrollWidth &gt; 620 ? "620px" : (this.scrollWidth &lt; 1? "1px" : "auto"));}</code></p>
<p>这里说明：图片不能超出大于620px的宽度，又不小于1像素的宽度。</p>
<p>让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIV CSS代码：<br />
<code>.yangshi{max-width:620px;min-width:1px;_width:expression(this.scrollWidth &gt; 620 ? "620px" : (this.scrollWidth &lt; 1? "1px" : "auto"));}</code></p>
<p><strong>4、再看看纯js的方法：</strong></p>
<p>   <strong>4.1、<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%a4%a7%e9%ab%98%e5%ba%a6" title="查看 最大高度 中的全部文章" target="_blank">最大高度</a></span></strong><br />
<code><br />
//直接使用ID来改变元素的<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%a4%a7%e9%ab%98%e5%ba%a6" title="查看 最大高度 中的全部文章" target="_blank">最大高度</a></span><br />
var container = document.getElementByIdx_x(‘container’);<br />
container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”;<br />
//写成函数来运行<br />
function setMaxHeight(elementId, height){<br />
var container = document.getElementByIdx_x(elementId);<br />
container.style.height = (container.scrollHeight > (height – 1)) ? height + “px” : “auto”;<br />
}<br />
//函数示例<br />
setMaxHeight(‘container1′, 200);<br />
setMaxHeight(‘container2′, 500);<br />
</code></p>
<p>    <strong>4.2、最大宽度</strong></p>
<p><code><br />
//直接使用ID来改变元素的最大宽度<br />
var container = document.getElementByIdx_x(elementId);<br />
container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;<br />
//写成函数来运行<br />
function setMaxWidth(elementId, width){<br />
var container = document.getElementByIdx_x(elementId);<br />
container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;<br />
}<br />
//函数示例<br />
setMaxWidth(‘container1′, 200);<br />
setMaxWidth(‘container2′, 500);<br />
</code></p>
<p>至于 最小宽度、<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e6%9c%80%e5%b0%8f%e9%ab%98%e5%ba%a6" title="查看 最小高度 中的全部文章" target="_blank">最小高度</a></span>的js方式，大家就迷糊画瓢把，这个相信大家都能搞定的。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/64.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css3可以让背景、边框透明文字内容不透明</title>
		<link>http://www.72color.com/interaction_design/59.html</link>
		<comments>http://www.72color.com/interaction_design/59.html#comments</comments>
		<pubDate>Fri, 01 Jul 2011 08:07:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[透明]]></category>

		<guid isPermaLink="false">http://www.72color.com/?p=59</guid>
		<description><![CDATA[用css3的RGBA属性能单独控制div的背景、边框、内容透明目前支持的浏览器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+ RGBA允许你控制某个特性填充颜色的不透明度，无论是文本、背景、边框还是背景颜色。 设置颜色透明度的时候，你需要使用RGB颜色值，不可以再使用十六进制值，而那个”A”则代表透明度，你可以设置从0(透明)到1(不透明)之间的数值。 1 rgba(0-255,0-255,0-255,0-1) 你还可以单独使用RGB值: 1 2 3 4 5 6 7 8 .topbox { color: rgb(235,235,235); color: rgba(255,255,255,0.75); background-color: rgb(153,153,153); background-color: rgba(0,0,0,0.5); border-color: rgb(235,235,235); border-color: rgba(255,255,255,0.65); } 如果想让DIV背景透明，文字不透明，再也不用对DIV透明以后，还要把内容飘起来。现在直接写DIV的背景颜色透明“background-color: rgba(0,0,0,0.5);”就OK啦。 &#160;]]></description>
			<content:encoded><![CDATA[<p><strong>用<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/css3" title="查看 css3 中的全部文章" target="_blank">css3</a></span>的RGBA属性能单独控制div的背景、边框、内容<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e9%80%8f%e6%98%8e" title="查看 透明 中的全部文章" target="_blank">透明</a></span>目前支持的浏览器</strong>:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+</p>
<p>RGBA允许你控制某个特性填充颜色的不<span class='wp_keywordlink_affiliate'><a href="http://www.72color.com/tag/%e9%80%8f%e6%98%8e" title="查看 透明 中的全部文章" target="_blank">透明</a></span>度，无论是文本、背景、边框还是背景颜色。</p>
<p>设置颜色透明度的时候，你需要使用RGB颜色值，不可以再使用十六进制值，而那个”A”则代表透明度，你可以设置从0(透明)到1(不透明)之间的数值。</p>
<div>
<table border="0" cellspacing="0" cellpadding="0" width="610">
<tbody>
<tr>
<td width="20">
<div>1</div>
</td>
<td>
<div>rgba(0-255,0-255,0-255,0-1)</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>你还可以单独使用RGB值:</p>
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="20">
<div>1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8</div>
</td>
<td>
<div>.topbox {<br />
color: rgb(235,235,235);<br />
color: rgba(255,255,255,0.75);<br />
background-color: rgb(153,153,153);<br />
background-color: rgba(0,0,0,0.5);<br />
border-color: rgb(235,235,235);<br />
border-color: rgba(255,255,255,0.65);<br />
}</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果想让DIV背景透明，文字不透明，再也不用对DIV透明以后，还要把内容飘起来。现在直接写DIV的背景颜色透明“background-color: rgba(0,0,0,0.5);”就OK啦。</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.72color.com/interaction_design/59.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

