<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>耗子么</title>
	<link>http://haozi.me</link>
	<description>又一个 WordPress 站点</description>
	<lastBuildDate>Fri, 02 Sep 2011 11:23:41 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	

	<item>
		<title>前端开发人员必须熟悉的10个CSS3属性</title>
		<description><![CDATA[随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的就来说说前端开发应该掌握的10个Css3属性。 对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。 1. Border-radius Border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 注意：请在Safari 5和IE9浏览器中执行“border-radius”语法。 圆 许多读者也许不会意识到我们可以用这个属性来做一个圆。 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; 如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。 display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; /* the default, so not really necessary here */ -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; [...]]]></description>
		<link>http://haozi.me/post/718.html</link>
			</item>
	<item>
		<title>axure导出chm文件出现乱码的解决方法</title>
		<description><![CDATA[1 将生成html文档目录下的后缀为hhc的文件,通过文本文件打开,选择ascii编码的格式另存； 2 将同目录下的hhp文件,用文本文件打开.将Language键值改为:中文(RPC)； 3下载并安装Htmlhelp.exe 4 打开cmd窗口,然后定位到C:Program FilesHTML Help Workshophhc.exe. （默认安装路径） hhc.exe命令后带的参数是:hhp文件的路径. 生成的chm文件,导航页的乱码可以解决.]]></description>
		<link>http://haozi.me/post/716.html</link>
			</item>
	<item>
		<title>定义表格的指定列的属性</title>
		<description><![CDATA[首先我们先看看css3中的实现方式： 1.1 CSS3中表格行的选择： css3中有很多很不错的伪类，比如以前很头疼的表格隔行换色问题，只需要用 table tr:nth-child&#40;odd&#41;&#123;background:#CCC&#125;/*定义奇数行的背景色为灰*/ table tr:nth-child&#40;even&#41;&#123;background:#F00&#125;/*定义偶数行的背景色为红*/ 另外，css3中，伪类可以连写，比如我们要设定鼠标hover时，奇数行背景色变成蓝色，可以这样写 table tr:hover:nth-child&#40;odd&#41;&#123;background:#00F&#125;/*鼠标滑过时，第奇数行背景色变成蓝*/ 除了定义奇偶性，我们也可以使用css3强大的nth-child()选择器，定义指定行： table tr:nth-child&#40;2&#41;&#123;background:orange&#125;/*第2行定义为桔色*/ 是不是非常简单？ 查看实例（需要在支持css3属性的浏览器中才能看到效果） 1.2 CSS3中表格列的选择： 列的定义在css3中同样非常简单，唯一不同的不是定义tr而是定义td table td:nth-child&#40;odd&#41;&#123;background:#CCC&#125;/*定义奇数列的背景色为灰*/ table td:nth-child&#40;4&#41;&#123;background:#F00&#125;/*定义第4列背景色为红*/ 查看实例（需要在支持css3属性的浏览器中才能看到效果） =================华丽的分割线===================================== 虽然CSS3的强大选择器相当牛B,可是万恶的IE6不支持，不光IE6不支持，连IE8都不支持。所以在实际应用中，还是要寻求javascript还解决。下面来讲下在jquery中的解决方法： 2.1 jQuery中表格行的选择： $&#40;&#34;table tr:even&#34;&#41;.css&#40;&#34;background&#34;,&#34;#CCC&#34;&#41;;/*定义奇数行的背景色为灰*/ $&#40;&#34;table tr:eq(3)&#34;&#41;.css&#40;&#34;background&#34;,&#34;#F00&#34;&#41;;/*定义第4行的背景色为红*/ 查看实例(这回兼容该死的IE6了) 2.2 jQuery中表格列的选择： javascript里对列的选择要麻烦一点，没有像CSS3里那样现成的定义。可以试下jQuery里的table td:even，效果是与css3里的table td:nth-child(even)不一样的。但我们知道原理也不难。 首先要知道表格的总列数，那么第1列就是td的序数除以列总数余数为0的（jquery数数从0数起的）。 var tdNum = $&#40;&#34;table tr:first td&#34;&#41;.length;//得到表格的列数，即为第一个tr里td的个数。 &#160; &#160; $&#40;&#34;table td&#34;&#41;.each&#40;function&#40;i&#41;&#123; &#160; &#160; &#160; &#160; if &#40;i%tdNum [...]]]></description>
		<link>http://haozi.me/post/690.html</link>
			</item>
	<item>
		<title>jquery捕捉ctrl+enter(回车)事件</title>
		<description><![CDATA[网页设置快捷键对提高用户体验很有好处。jQuery中对键盘事件进行了修正 调用函数的时候传入事件即可。 通过事件的which可以找到键码 不过当有组合键的时候还需要注意一下 如ctrl+enter键，虽然都是用e.ctrlKey但是 enter键的键码不是始终为13了 在标准浏览器中 判断 ctrl+enter 是 e.ctrlKey &#038;&#038; e.which ==13 在万恶的ie6中 判断ctrl+enter 是 e.ctrlKey &#038;&#038; e.which ==10 $&#40;document&#41;.keypress&#40;function&#40;e&#41;&#123; &#160; &#160; &#160; &#160; if&#40;e.ctrlKey &#38;&#38; e.witch ==13 &#124;&#124; e.which == 10&#41;&#123; &#160; &#160; &#160; &#160; &#160; &#160; alert&#40;&#34;你按的是ctrl+回车&#34;&#41;; &#160; &#160; &#160; &#160; &#125;else if&#40;e.shiftKey &#38;&#38; e.which==13 &#124;&#124; e.which == 10&#41;&#123; &#160; &#160; [...]]]></description>
		<link>http://haozi.me/post/593.html</link>
			</item>
	<item>
		<title>jquery准确判断ie6</title>
		<description><![CDATA[jquery提供的$.brower方法只能判断浏览器的种类，而不能具体到版本。日常工作中我们最为头疼的就是IE6，有时候要专门为ie6写hack。 以前我的判断方法一直是版本+版本号。 if($.browser.msie&#038;&#038;($.browser.version==6.0))。、 但最近发现一个惊天bug。 jquery是根据userAgent的version值正则判断的，但是如果在windows2008k中，会把windows NT 6.0误认为是ie6.0，导致将ie8误认成ie6。 $.browser方法jquery官方已经不赞成使用了。建议的方法是$.support,但我把所有的属性值都测试完毕后发现没有一个能只检测出IE6的，最后发现$.support.style在IE6和IE7中返回值为false。 那么取他们属性的交集便可以准确判断IE6了。 所以 if($.brower.msie&#038;&#038;($.browser.version==6.0)&#038;&#038;!$.support.style) 虽然很长，但效果还是不错的。]]></description>
		<link>http://haozi.me/post/581.html</link>
			</item>
	<item>
		<title>jquery图片过大则等比例缩放，图片过小保持原状</title>
		<description><![CDATA[图片宽高不能自适应一直是IE6令人头疼的bug。对于一些内容不可控的容器，如论坛帖子正文，必需事先对容器做好设置，防止过大宽图片冲破容器。首先帖出html和css: &#60;div class=&#34;contain&#34;&#62; &#60;p&#62;&#60;img src=&#34;images/VW.jpg&#34; alt=&#34;大众&#34; /&#62;&#60;/p&#62; &#60;p&#62;&#60;img src=&#34;images/BMW.jpg&#34; alt=&#34;宝马&#34; /&#62;&#60;p&#62; &#60;p&#62;&#60;img src=&#34;images/Audi.jpg&#34; alt=&#34;奥迪&#34; /&#62;&#60;/p&#62; 在所有ie6以外的浏览器，只要定义好图片的max-width值，并将height设成auto，即可实现图片的等比例缩放了。 .contain&#123;width:400px; border:1px solid #F00;overflow:hidden&#125; img&#123;border:none;height:auto;max-width:400px&#125; 用js实现图片等比例自适应的原理是: 公式： 图片真实宽度（imgWidth） 图片允许的最大宽度（maxWidth） ——————————— = ——————————————————————— 图片真实高度（imgHeight） 图片允许的最大宽度此时图片的高度（maxHeight） 所以推导出: maxHeight =maxWidth * imgHeight / imgWidth 所以js部分应该这么写： $&#40;document&#41;.ready&#40;function&#40;&#41;&#123; &#160; &#160; var maxWidth = $&#40;&#34;.contain&#34;&#41;.width&#40;&#41;;//找到容器的宽度，图片的最大宽度不能比这大，否则就撑破了 &#160; &#160; $&#40;&#34;img&#34;&#41;.each&#40;function&#40;&#41;&#123; &#160; &#160; &#160; &#160; if&#40;!$.support.style&#38;&#38;$.browser.msie&#38;&#38;&#40;$.browser.version==6.0&#41;&#41;&#123;//为了提高效率，代码只在ie6下才运行js判断。 &#160; &#160; [...]]]></description>
		<link>http://haozi.me/post/578.html</link>
			</item>
	<item>
		<title>纯css横向下拉菜单</title>
		<description><![CDATA[&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;style type=&#34;text/css&#34;&#62; #menu{ margin:0; &#160;padding:0; &#160;list-style:none; &#160;font:14px Arial; &#160;} #menu li{ float:left;margin:0 1px 0 0;} #menu li dl{width:150px; padding:0 0 10px 0; background:#cb6 url(http://www.zishu.cn/attachments/month_0804/62008414231638.jpg) no-repeat bottom left;} #menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00; background:#ed8 url(http://www.zishu.cn/attachments/month_0804/02008414231556.jpg) no-repeat top left;} #menu li [...]]]></description>
		<link>http://haozi.me/post/576.html</link>
			</item>
	<item>
		<title>比较简单的异步加载JS文件的代码</title>
		<description><![CDATA[&#60;script&#62; function getJsFile&#40;url, callBack&#41;&#123; &#160; &#160; var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject&#40;'Msxml2.XMLHTTP'&#41;; &#160; &#160; XH.open&#40;'get',url,true&#41;; &#160; &#160; XH.onreadystatechange = function&#40;&#41;&#123; &#160; &#160; &#160; &#160; if&#40;XH.readyState == 4 &#38;&#38; XH.status == 200&#41;&#123; &#160; &#160; &#160; &#160; &#160; &#160; if&#40;window.execScript&#41; window.execScript&#40;XH.responseText&#41;; &#160; &#160; &#160; &#160; &#160; &#160; else eval.call&#40;window, XH.responseText&#41;; &#160; &#160; &#160; [...]]]></description>
		<link>http://haozi.me/post/558.html</link>
			</item>
	<item>
		<title>让 标签中的内容自动换行的兼容写法</title>
		<description><![CDATA[让&#60;pre&#62; 标签中的内容自动换行并符合 W3C 标准（多浏览器支持） 默认情况下， &#60;pre&#62; 标签中的内容若超出范围不会自动换行，这样会造成很糟糕的水平滚动条影响效果。 下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码： pre&#123; white-space:pre-wrap;/*css3标准写法*/ white-space:-moz-pre-wrap;/*兼容老版本火狐*/ white-space:-pre-wrap;/*Opera4*/ white-space:-o-pre-wrap;/*Opera7*/ word-wrap:break-word;/*万恶的IE6*/&#125; PS：新版的火狐、opera、chrome都已经全面支持css3属性，一般用非IE浏览器的用户都能折腾，早换新版了。所以可以简写 pre&#123; white-space:pre-wrap;/*css3标准写法*/ word-wrap:break-word;/*万恶的IE6*/&#125;]]></description>
		<link>http://haozi.me/post/548.html</link>
			</item>
	<item>
		<title>九妹初体验</title>
		<description><![CDATA[今天下午去了趟华强北，办完事后顺便去了下魅族专卖店。魅族的专卖店里果然热闹，很多煤油在里面玩。虽然现在M9已经开始正式发售，但早已被预定完毕，店里只有几部样机。&#160; 由于我很喜欢M8，自己10年年初就入手了一只M8，对于M9，也很早就在魅族的网站上关注了。这次M9是千呼万唤始出来，当然令我兴奋不己。网上的测评写得再多再好也不如自己感受的真实。这年代，是软文与资讯齐飞的时代，连当年CECT这样的垃圾机，测评不也写得有模有样么。广告做得好，不如疗效好，我这里就讲下我的摸妹感受&#160; &#160; 由于自己手机没电，当时没有拍照，只能看我文字解说了 &#160; 简单的概括一下这个手机，这就是硬件上配备了最强的手机单核处理器和图形处理模块，搭载了和iPhone4一样分辨率的可以超过人眼识别极限的Retina 屏幕，各类传感器啊GPS啊陀螺仪啊什么的全有，再加上了能够拍摄720p视频的500万像素摄像头，软件上呢，内核是Google开发的 Android，2.2的版本也算很新了，魅族又自己开发了一套外观界面，另外鸡王也在论坛是爆料春节前很有可能上android2.3，另外2500的价格，这一切足以上火腿肠（HTC）内牛满面！ &#160; 我们按照体验顺序来： 1、 &#160;机器远看，容易被认为是iPhone 4，因为造型外观比较相似，正面是玻璃材质，看起来质感不错。 2、 &#160;拿起机器，第一感觉是轻，去除了M8采用的金属外框之后，M9基本就是全塑料产品了，这点不太好。 3、 &#160;机器由于分辨率同iPhone一样，而比其他Android的机型更接近正方形，因而宽度上同N1、G7差不多，但是长度短一些，大小约为iPod touch那么大，放在裤兜很舒服。 4、 &#160;厚度上摆在桌子上我们看起来跟N1、G7、iPhone 4算是一般厚，其实现在手机见多了，就没什么惊艳的感觉了。 5、 &#160;反过来，后盖的设计看起来是一体化的，而且磨砂的手感很好，总体如果你摸过ThinkPad笔记本的话，就跟那个上盖的手感是一样的。 6、 &#160;综合2和5，可见M9发布后相关手机套会大卖，而且以彩色和增重功能为主&#8230;&#8230; 7、 &#160;点亮机器，解锁方法同M8一样，向上提，相对其他品牌还算有创意，但我感觉M8的锁屏界面更漂亮。 8、 &#160;这个屏幕真的很养眼，夏普出品，正面亮度也很高，锐利，文字控和上网控的最佳选择。 9、 &#160;但是由于不是ips，可视角度较差，不过也好，手机这东西很多场合无需分享屏幕内容。 10、 屏幕色彩还原真实。 11、 按键不是标准Android规格，搜索键被取消，键位比较合理，按中间回到桌面也让只见过苹果的人比较容易上手。 12、 主键旁边的两个键是电容的，不能按下，触摸就有反应，但是背光灯常亮。 13、 主键手感比较绵软，静音的，跟苹果的那种偏硬的不一样。 14、 整体屏幕触控效果不错，操作很流畅。 15、 软件方面凡是常规软件（非游戏）兼容的都不错。 16、 游戏上比较紧张，因为分辨率太高，基本上Gameloft的游戏都阵亡了，只能显示在屏幕的左下角，但是EA的却都不错，要么全屏，要么就上下黑边，想看电影一样。 17、 视频解码能力很是了得，基本上网上能下载到视频拖进去就能看，当MP4足够了。 18、 硬件现在有限制，主频应该是1G，但是锁频在800Mhz，据说过两天要开放。 19、 部分细节还需完善，举例说明，滑动照片竖着就行，横着就不行&#8230;&#8230;而且调整屏幕亮度时出现屏闪。 20、 信号很好，不过我没敢把手机带出店铺，只能凭直觉。 21、 拍照就那样了，不过视频很强悍，能拍720p的视频，相当流畅。 [...]]]></description>
		<link>http://haozi.me/post/543.html</link>
			</item>
</channel>
</rss>

