<?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>花儿开了 &#187; howto</title>
	<atom:link href="http://blog.istef.info/tag/howto/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.istef.info</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sun, 06 Jun 2010 05:52:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
	<atom:link rel='hub' href='http://blog.istef.info/?pushpress=hub'/>
		<item>
		<title>iPhone 2.0 升级教程</title>
		<link>http://blog.istef.info/2008/07/20/howto-pwnage-your-iphone-20/</link>
		<comments>http://blog.istef.info/2008/07/20/howto-pwnage-your-iphone-20/#comments</comments>
		<pubDate>Sun, 20 Jul 2008 10:57:04 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[iphone]]></category>
		<category><![CDATA[2.0]]></category>
		<category><![CDATA[firmware]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[jailbreak]]></category>
		<category><![CDATA[pwnage]]></category>
		<category><![CDATA[unlock]]></category>
		<category><![CDATA[upgrade]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=1793</guid>
		<description><![CDATA[自从乔大爷 (Steven Jobs) 在 WWDC &#8217;08 上大秀了一把 iPhone Firmware 2.0 之后，很多“疯友”估计都像我一样，一直在期待着早日用上 2.0 固件。对于我们中国这帮可怜的破解用户来说，与其盯着乔大爷还不如盯着我们的救星 iPhone dev Team。这一次，Dev Team 并没有让我们等待太久，在 Firmware 2.0 推出后的第九天，终于让我们解开安全带，拿到了破解 2.0 固件的神器 PwnageTool 2.0。 拿到 PwnageTool 2.0 之后，我自然是迫不及待的对自己的 iPhone 开始下手了。其实自从“解开安全带”的时候我就开始做准备工作了，因为 PwnageTool 2.0 毫无悬念的需要运行在 OSX 上，对于我等无 Mac 的用户而言，最现实的方案就是在 PC 上装个 Leopard。好在这方面的教程颇多（可以去远景论坛找），我在我的 XPS 1210 上装了 Leo4Allv3 这个版本的 Leopard 10.5.2，目前工作的非常好，以至于我都不想用 Windows 了 扯远了，回来说 PwnageTool 2.0。这次的 PwnageTool 真是足够简单，真的是奶奶都会使用了。在 [...]]]></description>
			<content:encoded><![CDATA[<p>自从乔大爷 (Steven Jobs) 在 WWDC &#8217;08 上大秀了一把 iPhone Firmware 2.0 之后，很多“疯友”估计都像我一样，一直在期待着早日用上 2.0 固件。对于我们中国这帮可怜的破解用户来说，与其盯着乔大爷还不如盯着我们的救星 iPhone dev Team。这一次，Dev Team 并没有让我们等待太久，在 Firmware 2.0 推出后的第九天，终于让我们<a href="http://blog.iphone-dev.org/post/42583223/safe-code" target="_blank">解开安全带</a>，拿到了破解 2.0 固件的神器 <a href="http://blog.iphone-dev.org/post/42858313/thanks-for-waiting" target="_blank">PwnageTool 2.0</a>。</p>
<p>拿到 PwnageTool 2.0 之后，我自然是迫不及待的对自己的 iPhone 开始下手了。其实自从“解开安全带”的时候我就开始做准备工作了，因为 PwnageTool 2.0 毫无悬念的需要运行在 OSX 上，对于我等无 Mac 的用户而言，最现实的方案就是在 PC 上装个 Leopard。好在这方面的教程颇多（可以去远景论坛找），我在我的 XPS 1210 上装了 Leo4Allv3 这个版本的 Leopard 10.5.2，目前工作的非常好，以至于我都不想用 Windows 了 <img src='http://blog.istef.info/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>
<p>扯远了，回来说 PwnageTool 2.0。这次的 PwnageTool 真是足够简单，真的是奶奶都会使用了。在 Simple Mode 下，只需要点几下就搞定了。PwnageTool 2.0 只支持破解 2.0 版本的固件，同时支持 iPhone 1 代，3G iPhone 和 iPod Touch，这其中只能对 iPhone 1 代进行解锁，而其他的只能激活和越狱。其实我觉得目前玩 2.0 的国内用户大多关心的应该都是 1 代 iPhone 吧。</p>
<p>后面的教程基本不能称之为教程了，就是看图说话吧。这里我演示的是 Advance 模式下利用 PwnageTool 2.0 自定义固件的过程，很简单，估计光看图就懂了。</p>
<p>首先是准备工作，装好 OSX 系统，下载好 <a href="http://fsa.0xfeedbeef.com/PwnageTool_2.0.zip" target="_blank">PwnageTool 2.0</a>，iPhone 1代的 <a href="http://www.google.com/search?q=iPhone1%2C1_2.0_5A347_Restore&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:en-US:official&amp;client=firefox-a" target="_blank">2.0 固件</a>，<a href="http://www.weiphone.com/attachment.php?aid=120586&amp;k=1c79bd72b1cde7207b4d75e8a4032777&amp;t=1216547884" target="_blank">BL3.9 和 4.6 的文件</a>（需要登录 Weiphone），<a href="http://www.apple.com/itunes/download/" target="_blank">iTunes 7.7</a>，保持连通的互联网，当然还有一台一代 iPhone。</p>
<p>第二步，在你常用的系统中（Windows or Mac）装好 iTunes 7.7，然后插上 iPhone，让它同步。iTunes 7.7 会备份好你手机中的信息，这样等升级完后我们的电话本短信之类的就能都回来了。这一步很重要，一定要做！</p>
<p>现在开始 Pwn。切换到 OSX 系统中，装好 iTunes 7.7 和 PwnageTool 2.0。将 iPhone 用数据线连接到电脑，彻底关掉 iTunes 7.7 （Command + Q），准备好如下图所示的东西。</p>
<p><img class="alignnone size-full wp-image-1794" title="pwnage-1" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-1.jpg" alt="" width="429" height="255" /></p>
<p>打开 PwnageTool 2.0（就是那个黑菠萝），界面如下：</p>
<p><img class="alignnone size-full wp-image-1795" title="pwnage-2" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-2.jpg" alt="" width="429" height="379" /></p>
<p>选中第一个（一代 iPhone），选中 Expert Mode（吐舌头的爱因斯坦），然后点右下角的下一步按钮。</p>
<p><img class="alignnone size-full wp-image-1796" title="pwnage-3" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-3.jpg" alt="" width="429" height="389" /></p>
<p>PwnageTool 会自动搜索 2.0 固件文件。如果它没找到的话，用 Browse 手动找到刚才我们下载的 2.0 固件。</p>
<p><img class="alignnone size-full wp-image-1797" title="pwnage-4" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-4.jpg" alt="" width="429" height="380" /></p>
<p>随后 PwnageTool 会给出六个选项，我们一个一个调整。先选中第一个 General，然后点击下一步。这里可以调整的选项包括是否激活 iPhone (Activate)，是否升级 Baseband，是否禁止 Wipe 以及系统分区的大小。这里我建议把三个勾都打上，系统分区大小我做的时候使用的是默认的 500M，但后来看 Weiphone 上的朋友说用 600M 运行会快一点。虽然我不太相信这种说法，但您不妨可以试试。设置好了后点击下一步：</p>
<p><img class="alignnone size-full wp-image-1798" title="pwnage-5" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-5.jpg" alt="" width="429" height="383" /></p>
<p>这一步是进行 iPhone 解除网络锁的设定 (BootNeuter 2.0)，基本设置如下图，可选项包括是否解锁、是否升级 Bootloader，以及升级完成后是否自动删除 BootNeuter。这里我建议不要升级 Bootloader，其它的都选上。点击下一步。</p>
<p><img class="alignnone size-full wp-image-1799" title="pwnage-6" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-6.jpg" alt="" width="429" height="382" /></p>
<p>在这一步中，我们要进行软件包的集成。2.0 固件中，Installer 还不能很好的兼容，所以软件管理器改用了 Cydia（其实我一直都很喜欢这个）。在这一步中，你可以刷新 Cydia 源查看可用的软件包。由于 2.0 固件刚刚被破解，目前能用的软件也没什么，这里我个人感觉需要装的是 OpenSSH，当然如果你没有平时用 Putty 连进 iPhone 捣鼓的爱好，这个也没必要装了。添加软件包的方法很简单，刷新源，双击需要的软件包就可以了。完成后点击下一步。</p>
<p><img class="alignnone size-full wp-image-1800" title="pwnage-7" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-7.jpg" alt="" width="429" height="382" /></p>
<p>这一步仍然是软件包集成，只不过变成是集成以 PwnageTool 兼容的 bundle 格式的软件包。目前可用的只有 Cydia，这里需要注意的是千万别把以前在 PwnageTool 1.1 上用的 bundle 拿来用（比如 WeFIT 之类的），当前他们还都不兼容 2.0，用了话估计后果会很严重的。选上 Cydia 点击下一步。</p>
<p><img class="alignnone size-full wp-image-1801" title="pwnage-8" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-8.jpg" alt="" width="429" height="382" /></p>
<p>这一步是用来自定义开机画面和 DFU 模式画面的，并不是必要步骤，不过用来娱乐一下还是不错的。至于是否把割了一刀的苹果换成咬了一口的菠萝，或是把链接 iPod 变成俄罗斯版 Steven Jobs，完全看你个人爱好了。设置好后点击下一步。</p>
<p><img class="alignnone size-full wp-image-1802" title="pwnage-9" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-9.jpg" alt="" width="429" height="380" /></p>
<p>到这里，全部的设置工作就做完了。点击 Build，然后点下一步。如果你选择了解锁的话，PwnageTool 会要求你载入 BL3.9 和 BL4.6，如下图所示。按照提示给它选好就行了（别选反了哦）。</p>
<p><img class="alignnone size-full wp-image-1803" title="pwnage-10" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-10.jpg" alt="" width="429" height="186" /></p>
<p>选好 BL 之后，PwnageTool 开始生成自定义固件。这一步时间比较长，当然你可以用这段时间上上网玩玩 MacOSX，当然记住不要开 iTunes 听音乐啊，呵呵。</p>
<p><img class="alignnone size-full wp-image-1805" title="pwnage-11" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-11.jpg" alt="" width="429" height="376" /></p>
<p>完成后，PwnageTool 会问你，你的 iPhone 之前有没有 Pwn 过。如果有的话点 Yes，PwnageTool 2.0 会提示正确生成固件。</p>
<p><img class="alignnone size-full wp-image-1806" title="pwnage-12" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-12.jpg" alt="" width="429" height="381" /></p>
<p>如果你的 iPhone 之前没 Pwn 过，PwnageTool 2.0 也可以帮你把它 Pwn 掉，点击 No 就可以了。当然如果你和我一样以前是用 ZiPhone 破解的，PwnageTool 可能会无法自动重启 iPhone 进入 DFU 模式，这时你可以先手动进入 DFU 模式（关闭 iPhone，按住方块键不松手，然后插入数据线，等 iPhone 开机进入 DFU 模式后再松开方块），然后再点击 No，PwnageTool 就可以正常 Pwn 掉你的 iPhone 了。如果一切正常，PwnageTool 会提示成功，当然如果失败了，就是下面这幅诡异的图：</p>
<p><img class="alignnone size-full wp-image-1807" title="pwnage-13" src="http://blog.istef.info/wp-content/uploads/2008/07/pwnage-13.jpg" alt="" width="429" height="381" /></p>
<p>至此，在 PwnageTool 2.0 上需要的操作就全都做好了。下面我们需要让 iPhone 进入 DFU 模式。方法上面写过了，照着做吧。</p>
<p>另外再恢复固件之前有必要说明一下，其实到这里，后面的工作在 iTunes 上就可以完成了。所以出于恢复原本备份数据的考虑，我们可以将生成好的自定义固件拷出来，然后到备份 iPhone 数据的环境下去恢复。我在升级的过程中就是这样做了，生成完自定义固件后，重启计算机，回到 Vista 下用 iTunes 恢复固件。</p>
<p>启动 iTunes 7.7，将 iPhone 进入 DFU 模式，保持计算机连接到 Internet 上，插入数据线。短暂等待后，iTunes 弹出恢复固件的提示。</p>
<p>按住 Shift 键点击“恢复”按钮，选中我们刚刚生成的自定义固件，开始恢复。剩下的事情就是等待了，大概 20 分钟。</p>
<p>恢复完成后，iTunes 会提示恢复原来备份的数据。这里需要注意的是，如果你之前选择了解锁，那么这时 iPhone 会自动进入 BootNeuter 来解锁 Baseband，这个过程通常要 2-5 分钟，一定要等 BootNeuter 执行完了退出后，再点击恢复备份数据，否则 iPhone 会有可能变砖的哦。</p>
<p>好了，执行完上面的步骤后，你的 iPhone 就升级到 2.0 了。你可以尽情享受一下 2.0 固件的新功能（例如系统中文输入法，不再乱码的 Mail，Safari 可保存图片以及很酷的 App Store），当然同时也意味着你失去了不少原来的第三方软件（因为不兼容）。不过 App Store 里面可是有不少免费的好东西，可以去发掘一下哦。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2008%2F07%2F20%2Fhowto-pwnage-your-iphone-20%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2008%2F07%2F20%2Fhowto-pwnage-your-iphone-20%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2008/07/20/howto-pwnage-your-iphone-20/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>如何制作一个漂亮的 CSS 按钮</title>
		<link>http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button/</link>
		<comments>http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button/#comments</comments>
		<pubDate>Wed, 09 May 2007 12:06:15 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[howto]]></category>

		<guid isPermaLink="false">http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button/</guid>
		<description><![CDATA[如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，您也可以通过演示页面体验一下。下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。 第一步：准备图片 对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。 为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。 此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法： 我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码： &#60;a class=&#34;button&#34; href=&#34;http://some_where&#34;&#62;&#60;span&#62;Button Text&#60;/span&#62;&#60;/a&#62; 随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下： 这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。 第二步：书写 CSS 代码 为了能够让 [...]]]></description>
			<content:encoded><![CDATA[<p><!--SPONSOR=[PAGEFLAKES]-->
<p style="text-indent:0;text-align:center"><img src='http://blog.istef.info/wp-content/uploads/2007/05/2007-5-9.jpg' alt='CSS Button' /></p>
<p>如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，您也可以通过<a href="http://blog.istef.info/demo/cssbutton">演示页面</a>体验一下。下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。</p>
<p><strong>第一步：准备图片</strong></p>
<p style="text-indent:0;text-align:center"><img src='http://blog.istef.info/wp-content/uploads/2007/05/2007-5-9-1.jpg' alt='按钮状态' /></p>
<p>对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道<strong>它是可以按下的</strong>。如上图，我们要制作的按钮共有三种状态：<strong>正常状态</strong>、<strong>鼠标划过</strong>、<strong>鼠标按下</strong>。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。</p>
<p>为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。</p>
<p>此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要<strong>能够自动适应内部文字的长度</strong>，因此我们需要应用一种叫做“<a href="http://alistapart.com/articles/slidingdoors/">拉门技术 (Sliding door technique)</a>”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：</p>
<p>我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">button</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://some_where</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Button Text</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">a</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：</p>
<p style="text-indent:0;text-align:center"><img src='http://blog.istef.info/wp-content/uploads/2007/05/2007-5-9-2.jpg' alt='背景图及布局示意图' /></p>
<p>这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。</p>
<p><strong>第二步：书写 CSS 代码</strong></p>
<p>为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下 <img src='http://blog.istef.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 。</p>
<p>首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">a.button</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">transparent</span><span style="color: Gray;"> url(a.gif) </span><span style="color: Red;">no-repeat</span><span style="color: Gray;"> </span><span style="color: Red;">scroll</span><span style="color: Gray;"> </span><span style="color: Red;">right</span><span style="color: Gray;"> </span><span style="color: Red;">top</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">color:</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">White</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">float:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">24</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding-right:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">10</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">font:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">normal</span><span style="color: Gray;"> </span><span style="color: Maroon;">12</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">sans-serif</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">margin-right:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">10</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-decoration:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">none</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">a.button</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">span</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">transparent</span><span style="color: Gray;"> url(span.gif) </span><span style="color: Red;">no-repeat</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">11</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">line-height:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">14</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div>
<p>这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN  的 <em>line-height</em> + <em>padding-top</em> + <em>padding-bottom</em>  = A 的 <em>height</em>。</p>
<p>经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">a.button</span><span style="color: Navy;">:hover</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">right</span><span style="color: Gray;"> -</span><span style="color: Maroon;">24</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">a.button</span><span style="color: Navy;">:hover</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">span</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">left</span><span style="color: Gray;"> -</span><span style="color: Maroon;">24</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">a.button</span><span style="color: Navy;">:active</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">right</span><span style="color: Gray;"> -</span><span style="color: Maroon;">48</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">a.button</span><span style="color: Navy;">:active</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">span</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">left</span><span style="color: Gray;"> -</span><span style="color: Maroon;">48</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">6</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">4</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">12</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div>
<p>我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 <em>a.button:active span</em> 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。</p>
<p><strong>第三部：最后完善</strong></p>
<p>其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。</p>
<p>Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">a.button</span><span style="color: Navy;">:active</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">right</span><span style="color: Gray;"> -</span><span style="color: Maroon;">48</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; </span><span style="color: Green;">outline:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">none</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div>
<p>在 Firefox 中看看，虚框已经消失了。</p>
<p>但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">button</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://some_where</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">onclick</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">this.blur();</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Button Text</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">a</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。</p>
<p>到这里，我们的按钮就算做好了，我相信您一定已经学会了。如果还有什么不明白的地方，您可以参考这个<a href="http://istef.info/demo/cssbutton/">简单的范例</a>，查看它的源代码来解决。当然，您也可以直接在本文後提问，我很乐意为您解答。</p>
<p><strong>UPDATE:</strong>谢谢 Dan Li 发来邮件提醒，我确实发现本文与<a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">这篇文章</a>如出一辙。早看到直接转过来就好了，白白折腾了两个小时。不知道留言中 DV 大侠所指的是不是这篇。不过我在写本文时并没有看过这篇文章，而且本文与原文还是有很大不同，而且原文中 CSS 有误 (background-position 的参数顺序不对)，虽然可以实现它所叙述的效果，但不符合 CSS 标准，也不能够进一步扩展，希望看了原文的朋友能够注意。</p>
<p><strong>如需在 <a href="http://creativecommons.org/licenses/by-nc/2.5/deed.zh">CC-BY-NC</a> 协议下引用，请保留以下链接，商业网站引用请<a href="/about#contact">与我联系</a>，谢谢合作。</strong><a href="http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button">http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button</a>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2007%2F05%2F09%2Fhow-to-make-a-sexy-css-button%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2007%2F05%2F09%2Fhow-to-make-a-sexy-css-button%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>IXWebhosting 上安装 Awstats（三）</title>
		<link>http://blog.istef.info/2006/12/19/howto-install-awstats-on-ixwebhosting-part-3/</link>
		<comments>http://blog.istef.info/2006/12/19/howto-install-awstats-on-ixwebhosting-part-3/#comments</comments>
		<pubDate>Tue, 19 Dec 2006 15:57:55 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Experiences]]></category>
		<category><![CDATA[awstats]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[install]]></category>
		<category><![CDATA[ixwebhosting]]></category>

		<guid isPermaLink="false">http://blog.istef.info/2006/12/19/howto-install-awstats-on-ixwebhosting-part-3/</guid>
		<description><![CDATA[续上文，IXWebhosting 上安装 Awstats（一）（二） 在前两篇文章中，我已经详细分析了 IXWebhosting 上安装 Awstats 的问题和解决办法，本文只讲具体实现过程，可以作为一个安装指南，方便每位 IX 用户。这里我建议专门添加一个子域名来安装 Awstats，比较方便。当然如果您希望安装在已有网站中，可以参考本文酌情修改。 设置服务器环境。在 IX 后台的 Domains 面板中选择一个顶级域名 domain.com，然后点击 add sub-domain，输入 stat，创建一个子域名 stat.domain.com。在面板的 Web options 中设置 stat.domain.com，在 CGI 中添加 .pl 扩展名，最后不要忘了 Apply 使配置生效。 上传 Awstats。点击这里下载 Awstats 6.6 beta，解压，将 wwwroot 目录中所有文件（包括子目录）上传到 stat.domain.com 目录中，将 tools 目录中的 awstats_buildstaticpages.pl 。 设定目录和文件权限。这一步可以用 ftp 操作，也可以用 IX 后台中提供的 WebAdmin 操作。将站点 stat.domain.com 的权限设置为 0717（默认为 0715），cgi-bin/*.pl [...]]]></description>
			<content:encoded><![CDATA[<p><!--SPONSOR=[PAGEFLAKES]-->续上文，IXWebhosting 上安装 Awstats（<a href="http://blog.istef.info/2006/12/18/how-to-install-awstats-on-ixwebhosting-part-1/">一</a>）<a href="http://blog.istef.info/2006/12/18/how-to-install-awstats-on-ixwebhosting-part-2/">（二）</a></p>
<p>在前两篇文章中，我已经详细分析了 <a href="http://www.ixwebhosting.com/templates/ix/v2/affiliate/clickthru.cgi?id=istefliu">IXWebhosting</a> 上安装 <a href="http://awstats.sourceforge.net/">Awstats</a> 的<a href="http://blog.istef.info/2006/12/18/how-to-install-awstats-on-ixwebhosting-part-1/">问题</a>和<a href="http://blog.istef.info/2006/12/18/how-to-install-awstats-on-ixwebhosting-part-2/">解决办法</a>，本文只讲具体实现过程，可以作为一个<strong>安装指南</strong>，方便每位 IX 用户。这里我建议专门添加一个子域名来安装 Awstats，比较方便。当然如果您希望安装在已有网站中，可以参考本文酌情修改。</p>
<ol>
<li>设置服务器环境。在 IX 后台的 Domains 面板中选择一个顶级域名 <em>domain.com</em>，然后点击 add sub-domain，输入 stat，创建一个子域名 stat.domain.com。在面板的 Web options 中设置 <em>stat.domain.com</em>，在 CGI 中添加 .pl 扩展名，最后不要忘了 Apply 使配置生效。</li>
<li>上传 Awstats。点击<a href="http://awstats.sourceforge.net/files/awstats-6.6.tar.gz">这里</a>下载 Awstats 6.6 beta，解压，将 wwwroot 目录中所有文件（包括子目录）上传到 <em>stat.domain.com</em> 目录中，将 tools 目录中的 awstats_buildstaticpages.pl 。</li>
<li>设定目录和文件权限。这一步可以用 ftp 操作，也可以用 IX 后台中提供的 WebAdmin 操作。将站点 stat.domain.com 的权限设置为 0717（默认为 0715），cgi-bin/*.pl 权限设定为 755。</li>
<li>下载<a href="http://istef.info/files/gen_conf.phps">我写的这个 PHP 脚本</a>，按照里面的注释设置好相应的参数。将它上传到你的服务器某个可访问路径下，并将扩展名改为 .php，记下这个访问地址，后面会用到。</li>
<li>用任何文本工具创建以下几个空文件：awallsites，数个 awstats.<em>yourdomain.com</em>.conf。将这些文件上传到 cgi-bin 目录下，设定 awallsites 权限为 0777，其余几个空配置文件权限为 0666。</li>
<li>修改 cgi-bin/awstats.model.conf，注释掉 LogFile，Domain, Aliases 几个选项。其余的选项根据需要设定，插件可以启用的只有 tooltips，其余的（包括 Geo_IP 和 Geo_City）不要启用，否则会出错误。将 awstats.model.conf 改名为 awcommon.conf。</li>
<li>添加 Cronjob。在 IX 的后台面板中，点击 Ftp Manager，编辑 Crontab。添加以下两条记录（这里注意将斜体部分修改为您对应的设置）：
<ul>
<li>4 * * * * wget &#8211;output-document=- <em>http://stat.domain.com/gen_conf.php</em></li>
<li>5 * * * * <em>/hsphere/local/home/user_name/stat.domain.com/cgi-bin/awallsites</em></li>
</ul>
</li>
<li>大功告成，等着看结果吧！</li>
</ol>
<p>做完以上步骤后，Awstats 就被安装在 IXWebhosting 上了。等完成第一次统计后（您事先设定的邮箱会收到邮件），访问 http://<em>stat.domain.com</em>/<em>domain_com</em> 就可以看到统计结果了，记得如果统计的域名为 domain.com，对应生成的目录就为 domain_com。</p>
<p>OK，全部步骤都在这里了。写的比较匆忙，有可能有疏忽的地方，如果您发现了还请您留言或邮件通知我，我会尽快改正。同时如果您有什么问题，也希望您一并提出来，大家一起解决，共同进步。</p>
<p>btw: 我觉得这个方法不止适用于 IXWebhosting，通过简单的脚本修改，应该很多 Linux host 都可以安装 Awstats。当然前提有两个：提供原始 Apache 日志，支持 crontab。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2006%2F12%2F19%2Fhowto-install-awstats-on-ixwebhosting-part-3%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2006%2F12%2F19%2Fhowto-install-awstats-on-ixwebhosting-part-3%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2006/12/19/howto-install-awstats-on-ixwebhosting-part-3/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached
Page Caching using memcached
Database Caching 1/17 queries in 0.011 seconds using memcached
Object Caching 580/610 objects using memcached

Served from: blog.istef.info @ 2012-02-13 13:19:36 -->
