<?xml version="1.0" encoding="UTF-8"?><!-- generator="WordPress/2.9.2" -->
<rss version="0.92">
<channel>
	<title>花茶花茶 Think</title>
	<link>http://www.huachahuacha.com</link>
	<description>又一个 WordPress 博客</description>
	<lastBuildDate>Sun, 11 Jul 2010 00:30:42 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	
	<item>
		<title>Javascript 实现可拖动的日历控件</title>
		<description><![CDATA[
　　上图是默认css的显示效果，这个日历控件已经在 Safari, Firefox, Opera 和 Internet Explorer 测试过，均可使用。
　　关键代码下载地址：
　　calendar.js(15k)
　　calendar.rc4.js(33k)
　　calendar.compat.js
　　mootools.js(43k)
　　使用方法： 关键代码
&#60;head&#62;
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;mootools.js&#8221;&#62;&#60;/script&#62;
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;calendar.js&#8221;&#62;&#60;/script&#62;
&#60;script type=&#8221;text/javascript&#8221;&#62;
    window.addEvent(&#8216;domready&#8217;, function() { myCal = new Calendar({ date: &#8216;d/m/Y&#8217; }); });
&#60;/script&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;input id=&#8221;date&#8221; name=&#8221;date&#8221; type=&#8221;text&#8221; /&#62;
&#60;/body&#62;
　　CSS 文件可自定义修改，默认CSS文件：stylesheet
　　官网地址：electricprism
　　
]]></description>
		<link>http://www.huachahuacha.com/index.php/archives/68</link>
			</item>
	<item>
		<title>Hover 时，图片背景的集中处理</title>
		<description><![CDATA[
　　CSS 基础知识，高手请绕边。如上所示，要实现图片的鼠标 hover 事件，一般是为图片链接添加hover后的图片。如上图的 YouTube 标志效果。在图片的制作中一般要为每个图片链接添加两张图片，5个链接就要10张图片，这不仅细微的拖慢了页面的加载速度，在制作过程中也会有诸多不便，如图片的对齐问题，而将图片背景的集中处理是个很好的解决方案。
　　以上的效果背景图片为：
　　
　　关键性的代码：
　　icon a{width:20px; height:20px; padding:0; background:url(social-icons.png) no-repeat;text-indent:-9999px; overflow:hidden;}
　　icon a:hover{background-position:0 -22px;}
　　twitter a{background-position:-20px 0;}
　　twitter a:hover{background-position:-20px -22px;}
　　flickr a{background-position:-40px 0;}
　　flickr a:hover{background-position:-40px -22px;}
　　facebook a{background-position:-60px 0;}
　　facebook a:hover{background-position:-60px -22px;}
　　. . . . . .
　　
　　关键的代码在于对 background-position 这个属性的操作，每个按钮对应不同的背景图片相应位置。
　　网站地址： Android and Me
　　
]]></description>
		<link>http://www.huachahuacha.com/index.php/archives/56</link>
			</item>
	<item>
		<title>Ars Technica 网站tab页</title>
		<description><![CDATA[
　　这次收集的是一个网站的tab内容页，来自于 Ars Technica 这个tab特色在于它用特色的图片代替了生硬的文字，而且每张图片极具特色，唯一不足的地方时它没有使用 AJAX 技术实现无刷新实现内容的转换，不然的话会有更好的用户体验。
　　这种设计非常适合于web2.0的系统，用于对内容的分类显示，给用户更好的用户体验，但是对图片的选择也十分重要，要对应用户群设计相应的图片，这个tab页明显是对应对网络非常了解的用户。Apple公司的logo，微软公司的logo等等。对于普通可能不会了解，这个时候可能要添加相应的提示文字。
　　网站地址： Ars Technica
]]></description>
		<link>http://www.huachahuacha.com/index.php/archives/41</link>
			</item>
	<item>
		<title>Android and Me 网站登录界面设计</title>
		<description><![CDATA[
　　Android and Me这个是属于关注Android设计及周边的新闻网站，确切的说是一个博客，虽然说博客使用登录系统并不是多，但是它的这个设计于网页最顶端的登录web part十分有新意：
　　首先，是那个Android机器人的头像，在每次登录时，它都会发生变化，这是PHP实现的一个功能，让用户感觉很有新意，很有web2.0的设计概念。记得日本的一个视频网站 ニコニコ動画(9)  也有这个功能，面向年轻用户的网站可以考虑这个设计。
　　其次，文本输入框的设计，将文字嵌入了文本输入框内，看起来十分简洁，可能是只有一个字母的关系，中文实现起来就可能是两个词了：“用户”、“密码”。
　　其余的设计也以简洁为主，save实现了记住密码的功能。整个设计中，那个Android机器人头像是点睛之笔。
　　　　
　　网站地址： Android and Me
　　DEMO下载： uushare
]]></description>
		<link>http://www.huachahuacha.com/index.php/archives/7</link>
			</item>
	<item>
		<title>Hello world！</title>
		<description><![CDATA[
　　欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！
　　IT界不成文的约定，一项新技术的第一个demo都是用“Hello world！”来实现，这篇文章留作纪念。
]]></description>
		<link>http://www.huachahuacha.com/index.php/archives/1</link>
			</item>
</channel>
</rss>
