<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[etosun]]></title> 
<description><![CDATA[南瓜小米粥的博客]]></description>
<link>http://www.etosun.com/</link>
<language>zh-cn</language>
<generator>www.emlog.net</generator>
<item>
	<title>zIndex - 混乱的三次元</title>
	<link>http://www.etosun.com/z-index.html</link>
	<description><![CDATA[<p>w3c关于z-index的<b>解释</b>如下：<br />
&nbsp; &nbsp;定义和用法：z-index 属性设置元素的<span style="color:#e56600;">堆叠顺序</span>。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。z-index 仅能在定位元素上奏效（例如 position:absolute/relative;）<br />
&nbsp; &nbsp;说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。<br />
&nbsp; &nbsp;可能的值：auto/number/inherit&nbsp;</p>
<p>简单理解就是，z-index将二次元的web带入了三次元的空间。除了x、y轴之外，通过z-index我们还能操作z轴(在做3D变换时这非常重要)。&nbsp;</p>
<p>影响元素堆叠顺序都有哪些<b>因素</b>呢：<br />
&nbsp; &nbsp;1.文档流：默认情况下位于文档流后面的元素会覆盖前面的元素。<br />
&nbsp; &nbsp;2.定位：position不为static的元素，z-index越大，堆叠优先级越高。&nbsp;</p>
<p>混乱的<b>现状</b>：<br />
&nbsp; &nbsp;1.为了解决某些bug，不恰当的使用position属性；<br />
&nbsp; &nbsp;2.z-index值设置的过大，比如99999；<br />
&nbsp; &nbsp;3.设置position属性，却漏写z-index；<br />
&nbsp; &nbsp;4.js计算/设置z-index&nbsp;</p>
<p>混乱的<b>根源</b>：<br />
&nbsp; &nbsp; IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。</p>]]></description>
	<pubDate>Wed, 28 Dec 2011 14:42:37 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/z-index.html</guid>

</item>
<item>
	<title>阿里巴巴 国际站UED招聘</title>
	<link>http://www.etosun.com/post/116</link>
	<description><![CDATA[<p><img src="/content/uploadfile/201111/4a47a0db6e60853dedfcfdf08a5ca24920111129155258.png" alt="点击查看原图" border="0" /></p>
<div><span style="color:#666666;">地点：</span>杭州阿里巴巴总部</div>
<div><br />
</div>
<div><span style="color:#666666;">学历：</span>不限，作品和实力是你最好的证明</div>
<div><br />
</div>
<div><span style="color:#666666;">资历：</span>不限，我们提供平台，无论你是应届生还是设计专家</div>
<div><br />
</div>
<div><span style="color:#666666;">英文：</span>擅长是优势，不擅长是提升空间，不是障碍</div>
<div><br />
</div>
<div><span style="color:#666666;">招聘岗位：</span>交互设计师、视觉设计师、前端工程师、用户研究员</div>
<div><br />
</div>
<div><span style="color:#666666;">简历请至：</span><img src="/content/uploadfile/201111/0df8d972768cdb016e2f5d529e1d7b4720111129154952.png" alt="点击查看原图" border="0" /></div>
<div><br />
</div>
<div><br />
</div>
<div><br />
</div>
<div><br />
</div>]]></description>
	<pubDate>Tue, 29 Nov 2011 15:29:31 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/post/116</guid>

</item>
<item>
	<title>python项目部署时可能会遇到的问题汇总</title>
	<link>http://www.etosun.com/python_ascii_codec_can_not_decode_byte.html</link>
	<description><![CDATA[<p>项目环境：ubuntu+apache2+python+wsgi+webpy，开发环境下项目正常，部署到正式环境时出现以下问题：</p>
<p>1. import无效，无法导入其它包</p>
<p>&nbsp; &nbsp; 解决办法：</p>
<pre class="brush:python; toolbar: true; auto-links: true;">#在import自己的包之前要先把路径加到系统的path中
import os
import sys
abspath = os.path.dirname(__file__)
sys.path.append(abspath)
os.chdir(abspath)</pre> <p>2.报错：ascii codec can't decode byte 0xe8 in position 0:ordinal not in range(128)</p>
<p>解决办法：在Windows系统转Linux系统时，字符问题很容易出现，如果是单个文件报错，可以尝试这样解决：</p>
<pre class="brush:python; toolbar: true; auto-links: true;">import sys
reload(sys)
sys.setdefaultencoding('utf-8')</pre> <p>或者在Python安装目录下的Lib/site-packages目录中，新建一个sitecustomize.py文件（也可以建在其它地方，然后手工导入，建在这里，每次启动Python的时候设置将自动生效），内容如下：</p>
 <pre class="brush:python; toolbar: true; auto-links: true;">import sys
sys.setdefaultencoding('utf-8') #set default encoding to utf-8</pre>]]></description>
	<pubDate>Mon, 21 Nov 2011 13:46:04 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/python_ascii_codec_can_not_decode_byte.html</guid>

</item>
<item>
	<title>apache的一些小技巧</title>
	<link>http://www.etosun.com/apache_some_skills.html</link>
	<description><![CDATA[<p>windows下的apache：</p>
<p>如果apache的配置文件httpd.conf搞错了，启动时只会提示the requested operation has failed。可以用命令行模式启动apache，并带上参数，apache会提示你哪句有误，然后就可以针对性的解决，命令如下：&nbsp;</p>
<pre class="brush:shell; toolbar: true; auto-links: true;">httpd.exe -w -n "Apache2" -k start </pre> <p>linux下的apache启动、停止命令：</p>
<pre class="brush:shell; toolbar: true; auto-links: true;">/etc/init.d/apache2 start
/etc/init.d/apache2 stop</pre> <p>某些情况下service apache2 restart不好用时，可以尝试下这2种方法</p>]]></description>
	<pubDate>Sat, 19 Nov 2011 08:28:49 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/apache_some_skills.html</guid>

</item>
<item>
	<title>用google分析统计锚点点击</title>
	<link>http://www.etosun.com/google_analytics_statistical_anchor_click.html</link>
	<description><![CDATA[很多网站都用Google Analytics作为自己的分析工具，统一pv，加载速度等数据。除了这些基本的数据外，Google Analytics还有很多很好用的方法，比如统计如下tab的点击：<p></p>
<p><a target="_blank" href="/content/uploadfile/201111/267dc950f070a3d27806a1da7417d4a620111119075750.gif" id="ematt:131"><img src="/content/uploadfile/201111/267dc950f070a3d27806a1da7417d4a620111119075750.gif" alt="点击查看原图" border="0" /></a></p>
<p>怎么做呢？首先需要建立一个tab到虚拟页面的一对一的映射关系，比如：</p>
<pre class="brush:js; toolbar: true; auto-links: true;">var path = {
  product  : "/product_details/",
  shipping : "/shipping_packaging/",
  payment  : "/paymentterms/",
  feedback : "/feedback/"
}
// tabString是取tab的第一个小写单词，用来标识该tab
_gaq.push(['_setCookiePath', path[tabString]]);
_gaq.push(['_setAllowAnchor', true]);</pre> <p>等有数据以后，就可以到Google Analytics中通过过滤筛选出“<span class="Apple-style-span" style="font-family:monospace;white-space:pre;">/product_details/”这些虚拟路径的统计结果了</span></p>]]></description>
	<pubDate>Sat, 19 Nov 2011 07:56:18 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/google_analytics_statistical_anchor_click.html</guid>

</item>
<item>
	<title>windows下让apache支持python</title>
	<link>http://www.etosun.com/run_python_in_apache_use_mod_python.html</link>
	<description><![CDATA[<p>前提：windows下是通过apache的mod_python模块来实现对python的支持的。从<a href="http://archive.apache.org/dist/httpd/modpython/win/3.3.1/" target="_blank">这里</a>可以发现，目前mod_python只支持到apache2.2和python2.5，所以我们只能下载2.5版本的python。</p>
<p>详细步骤：</p>
<p>1. 下载安装python2.5:&nbsp;<a href="http://www.activestate.com/activepython/downloads">http://www.activestate.com/activepython/downloads</a></p>
<p>2. 下载mod_python(mod_python-3.3.1.win32-py2.5-Apache2.2):&nbsp;<a href="http://archive.apache.org/dist/httpd/modpython/win/3.3.1/">http://archive.apache.org/dist/httpd/modpython/win/3.3.1/</a>&nbsp;安装时会自动寻找的python的路径，并询问apache的安装路径：<br />
<img src="/content/uploadfile/201109/b9282f564f7522a15571909813a4103920110918151652.gif" border="0" /></p>
<p>&nbsp;</p>
<p>3. 在安装mod_python的最后一步会提示你修改apache的配置文件，按提示在httpd.conf中载入mod_python模块：<br />
LoadModule python_module modules/mod_python.so</p>
<p><pre class="brush:shell; toolbar: true; auto-links: true;">&lt;Directory "D:/www/python"&gt;
    AllowOverride FileInfo
    AddHandler mod_python .py
    PythonHandler mod_python.publisher
    PythonDebug On
&lt;/Directory&gt;</pre></p>
<p><img src="/content/uploadfile/201109/a7a98951e7f0085717601a4a254c8e7520110918152156.gif" border="0" /></p>
<p>&nbsp;</p>
<p>4. 重启apache</p>]]></description>
	<pubDate>Sun, 18 Sep 2011 15:02:42 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/run_python_in_apache_use_mod_python.html</guid>

</item>
<item>
	<title>七夕，让你的网站跟css3约会吧</title>
	<link>http://www.etosun.com/use_css3_with_conditional_css.html</link>
	<description><![CDATA[<p>对于单身宅男来说，节日什么的真的就是浮云，我们的生活里只有上班和周末。</p>
<p>css3、html5已经出生一段时间了，但至今仍然是两条光棍，远不及自己的学长xhtml、css2受欢迎。究其原因无非他们妈逼的紧，再加上这2条光棍要求也高。</p>
<p>这个七夕，<a href="http://www.conditional-css.com/" target="_blank">Conditional-CSS</a>做红娘，让css3跟你的网站来一次约会吧。</p>
<p>先介绍下Conditional-CSS：</p>
<p>Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.</p>
<p><span class="Apple-style-span">简单的说就是：Conditional-CSS允许你在css文件中使用类似脚本语言的if语句。是不是很爽呢~~更爽的是：当浏览器请求css时</span>Conditional-CSS<span class="Apple-style-span">会过滤掉跟当前请求的浏览器不匹配的css内容，而不是把所有的css都输出给客户端：</span></p>
<p><span class="Apple-style-span"><img src="/content/uploadfile/201108/77a44578dc254e0f2abeda3f160b422220110806163929.png" border="0" /><br />
</span></p>
<p><span style="font-weight:bold;font-size:14px;"><a href="/html/css3_demo.htm" target="_blank">DEMO</a>&nbsp;</span>(切换不同的浏览器，看加载的css是否不一样)</p>
<p>这样有什么好处呢：</p>
<blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><p>1. 更少的文件内容，更快的加载速度。差异化的css，对于高级浏览器来说客户端能加载更少的css文件。</p>
<p>2. 更少的维护成本。相对于一般的css3部署方式(混合css2、css3或者为css3单独设置存放文件)，这种处理方式减少后期的维护成本。</p>
</blockquote>
<p>Conditional-CSS怎么部署呢，以php版为例(其它版的我也不熟)</p>
<p>1. 从<a href="http://www.conditional-css.com/download/" target="_blank">官方</a>下载php类，放在网站目录下，这里我放在emlog的风格目录下(content/templates/cosa/c-css.php);</p>
<p>2. 取消c-css.php文件实例化类的注释，在$oCss-&gt;fnComplete();前面引入你需要的css文件：$oCss-&gt;fnAddFiles("style.css");</p>
<p>2. 将页面中css的引用路径改为步骤1中的路径</p>
<p></p>
<p>上次参加杭州html5沙龙，发现大家都对html5很感兴趣，但是普遍的感觉是不知道要怎么用，什么情况下用。一定要等到html5、css3一统江湖的时候才下手吗? 如果那时又出个css13，我们该怎么办? 每次新旧技术的交互，最苦逼的都是程序员，但是，最幸福的也是程序员。虽然我们不一定有证，但仍然能在第一时间了解新技术，并将这些新技术提供给千千万万的普通用户使用。</p>
<p>可能你会发现，Conditional-CSS并不是一套完美的css3解决方案，也不适合部署在大型网站上(从官方网站看，作者写这个类的目的应该是解决浏览器差异引起的bug)，但是它指引了我们一条解决问题的方法，对于程序员来说，代码上的问题没有什么是不可能实现的。</p>]]></description>
	<pubDate>Sat, 06 Aug 2011 13:41:58 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/use_css3_with_conditional_css.html</guid>

</item>
<item>
	<title>chrome下12px字号限制的解决办法</title>
	<link>http://www.etosun.com/chrome-webkit-text-size-adjust-none.html</link>
	<description><![CDATA[<span class="Apple-style-span">使用Webkit的私有属性</span>&nbsp;-webkit-text-size-adjust&nbsp;<span class="Apple-style-span">来解决chrome下12px字号限制的问题：<br />
<pre class="brush:css; toolbar: true; auto-links: true;">.xxx {-webkit-text-size-adjust:none;font-size:*px; }</pre><br />
</span>]]></description>
	<pubDate>Wed, 27 Jul 2011 14:47:51 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/chrome-webkit-text-size-adjust-none.html</guid>

</item>
<item>
	<title>基于css3的图片轮播</title>
	<link>http://www.etosun.com/post/105</link>
	<description><![CDATA[<p>基于css3的图片轮播，chrome、firefox5测试通过。主要的改进点有2个地方：</p>
<p>&nbsp; &nbsp; 1.&nbsp;使用css3实现图片的切换效果；</p>
<p>&nbsp; &nbsp; 2. 用css实现了1、2、3的数字效果</p>
<p><span style="color:#003399;"><b><span style="font-size:14px;"><u><a href="http://www.etosun.com/html/slider.htm" target="_blank">查看demo</a></u></span></b></span></p>
<p>js渲染后的页面节点截图如下：</p>
<p><img src="/content/uploadfile/201107/77a44578dc254e0f2abeda3f160b422220110723074639.png" border="0" /></p>]]></description>
	<pubDate>Sat, 23 Jul 2011 07:07:09 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/post/105</guid>

</item>
<item>
	<title>仙剑奇侠传五去除360图标方法</title>
	<link>http://www.etosun.com/pal5-fuck360.html</link>
	<description><![CDATA[<p>仙剑奇侠传五去除360图标方法，win7 sp1旗舰版测试通过：</p>
<p>1. 安装仙剑奇侠传五</p>
<p>2. 进入SOFTSTAR\Pal5目录下找到Extern.dll文件，重命名Extern.dll.bak。</p>
<p>3. 重新运行Pal5.exe</p>
<p>删除360图标后，还可以顺便到仙五安装目录下的Movie文件夹中看看全部的11个CG(剧透灰常严重)。高清版的CG其实也没那么坑爹。</p>
<p><img src="/content/uploadfile/201107/5316f3302e8b459b539e56b0930ada2a20110706144832.jpg" border="0" /></p>
<p></p>
<p><span class="Apple-style-span" style="font-size:12px;line-height:18px;">《仙剑奇侠传五》数字版(￥50)：<a href="http://item.taobao.com/item.htm?id=10858906604" target="_blank">3DM淘宝店</a></span></p>
<p><span class="Apple-style-span" style="line-height:18px;">《仙剑奇侠传五》</span>标准版<span class="Apple-style-span" style="line-height:18px;">(￥79)：<a href="http://item.taobao.com/item.htm?id=10858906604" target="_blank">3DM淘宝店</a></span></p>
<p></p>]]></description>
	<pubDate>Wed, 06 Jul 2011 14:31:55 +0000</pubDate>
	<author>南瓜小米粥</author>
	<guid>http://www.etosun.com/pal5-fuck360.html</guid>

</item></channel>
</rss>
