<?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>Kily&#039;s Blog &#187; 文章转载</title>
	<atom:link href="http://www.keelii.com/category/articlereship/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.keelii.com</link>
	<description>calls me kily</description>
	<lastBuildDate>Fri, 03 Feb 2012 08:22:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>一个很有创意的求职视频</title>
		<link>http://www.keelii.com/%e4%b8%80%e4%b8%aa%e5%be%88%e6%9c%89%e5%88%9b%e6%84%8f%e7%9a%84%e6%b1%82%e8%81%8c%e8%a7%86%e9%a2%91/</link>
		<comments>http://www.keelii.com/%e4%b8%80%e4%b8%aa%e5%be%88%e6%9c%89%e5%88%9b%e6%84%8f%e7%9a%84%e6%b1%82%e8%81%8c%e8%a7%86%e9%a2%91/#comments</comments>
		<pubDate>Mon, 11 May 2009 08:40:59 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[求职]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=561</guid>
		<description><![CDATA[相当不错的说，还是我们陕西滴呢，支持一下了。]]></description>
			<content:encoded><![CDATA[<p>相当不错的说，还是我们陕西滴呢，支持一下了。<br />
<object width="480" height="400" data="http://player.youku.com/player.php/sid/XODE0MTkxNjQ=/v.swf" type="application/x-shockwave-flash"><param name="align" value="middle" /><param name="src" value="http://player.youku.com/player.php/sid/XODE0MTkxNjQ=/v.swf" /><param name="quality" value="high" /></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/%e4%b8%80%e4%b8%aa%e5%be%88%e6%9c%89%e5%88%9b%e6%84%8f%e7%9a%84%e6%b1%82%e8%81%8c%e8%a7%86%e9%a2%91/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>HTML 4 Strict和XHTML 1.0 Strict下的元素嵌套规则</title>
		<link>http://www.keelii.com/html-element-nesting/</link>
		<comments>http://www.keelii.com/html-element-nesting/#comments</comments>
		<pubDate>Wed, 06 May 2009 12:36:31 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[web前端关注]]></category>
		<category><![CDATA[文章转载]]></category>
		<category><![CDATA[web标准]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=528</guid>
		<description><![CDATA[网上看见这个列表图，感觉很有用，平时进行W3C校验的时候很多问题都有出于元素没有正确嵌套，下面这个按html的DOM树依次往下嵌套就没问题了． 源自:http://www.cs.tut.fi/~jkorpela/html/strict.html]]></description>
			<content:encoded><![CDATA[<p>网上看见这个列表图，感觉很有用，平时进行W3C校验的时候很多问题都有出于元素没有正确嵌套，下面这个按html的DOM树依次往下嵌套就没问题了．</p>
<p><img class="aligncenter size-full wp-image-536" title="xhtmlpart1" src="http://www.keelii.com/wp-content/uploads/2009/05/xhtmlpart1.gif" alt="xhtmlpart1" width="498" height="1282" /></p>
<p>源自:http://www.cs.tut.fi/~jkorpela/html/strict.html</p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/html-element-nesting/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>拥有布局 IE haslayout(IE haslayout详解)</title>
		<link>http://www.keelii.com/haslayout-explain/</link>
		<comments>http://www.keelii.com/haslayout-explain/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 12:59:55 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[haslayout]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=516</guid>
		<description><![CDATA[找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有帮助的。 什么是布局 Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元素在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。 在默认情况下拥有布局的元素包括: body 标准模式中的 html table tr, td img hr input, select, textarea, button iframe, embed, object, applet marquee 布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 中无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo &#8230; <a href="http://www.keelii.com/haslayout-explain/">继续阅读 <span class="meta-nav">»</span></a>]]></description>
			<content:encoded><![CDATA[<p style="margin: 0px; padding: 5px 0px 20px;">找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有帮助的。</p>
<h3 style="margin: 0px; padding: 0px; font-size: 1em; font-family: Verdana,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: 2px; line-height: normal; text-transform: uppercase;">什么是布局</h3>
<p style="margin: 0px; padding: 5px 0px 20px;">Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元素在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">在默认情况下拥有布局的元素包括:</p>
<ul style="margin: 0px 0px 1.25em 40px; padding: 0px;">
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">body</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">标准模式中的 html</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">table</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">tr, td</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">img</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">hr</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">input, select, textarea, button</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">iframe, embed, object, applet</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">marquee</li>
</ul>
<p style="margin: 0px; padding: 5px 0px 20px;"><span id="more-516"></span></p>
<p style="margin: 0px; padding: 5px 0px 20px;">布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 中无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo hasLayout 是一个只读属性，所以无法使用JavaScript 选行设置.</p>
<p style="margin: 0px; padding: 5px 0px 20px;">设宜以下CSS 属性会自动地使元素拥有布局·</p>
<ul style="margin: 0px 0px 1.25em 40px; padding: 0px;">
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">position: absolute</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">float: left or right</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">display: inline-block</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">width: any value</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">height: any value</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">zoom: any value (Microsoft property—doesn’t validate)</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">writing-mode: tb-rl (Microsoft property—doesn’t validate)</li>
</ul>
<h3 style="margin: 0px; padding: 0px; font-size: 1em; font-family: Verdana,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: 2px; line-height: normal; text-transform: uppercase;">布局有什么效果?</h3>
<p style="margin: 0px; padding: 5px 0px 20px;">布局是许多IElWin 显示bug 的根源。例如， 如果一个文本段落靠谷一个浮动元索，那么期望文本围绕这个元索。但是，在Windows 上的1E 6 和更低版本中，如果段落拥有布局(例如，由于设置了高度).那么它就被限制为矩形，因此阻止文本绕浮动元素〈见图9-5).</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image2.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Text float in ie and other browers" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb.png" border="0" alt="Text float in ie and other browers" width="600" height="262" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong><span> </span>期望文本围绕相邻的浮动元素，但是，在IE/Win上，如果文本元素拥有布局，就不会这样显示。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">这会导致浮动布间的各种问题更糟的是，许多人使用IE 作为主浏览器，他们会俯误地认为这才是正确的表现，在其他浏览器以不同方式处理浮动元素时，他们反而会这必不解.</p>
<p style="margin: 0px; padding: 5px 0px 20px;">另-个问题涉及拥有布局的元素如何确定自己的尺，如果元亲的内容变得比元素本身大，那么期望元素流出到元素外.但是，在Windows 上的IE 6 和更低版本中，拥有布局的元素会销误地扩展以便适应内容的尺寸(见圈9-6).</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image3.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="content flow in ie and other browers" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb1.png" border="0" alt="content flow in ie and other browers" width="600" height="258" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong><span> </span>拥有布局的错误的扩展以便适应内容</p>
<p style="margin: 0px; padding: 5px 0px 20px;">这意味IE/Win中的width 实际上更像min-width. 这种行为也是在IE/Win中许多浮动布局被破坏的原因。当浮动框的内容错误地迫使框的宽度增加时，框对于可用空间来说太大了，因此下降到其他浮动元素在下面.</p>
<p style="margin: 0px; padding: 5px 0px 20px;">其他问题包括:</p>
<ul style="margin: 0px 0px 1.25em 40px; padding: 0px;">
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">拥有布局的元素不进行收缩。</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">布局元亲对浮动进行自动消理。</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">相对定位的元素不获得布局。</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">在拥有布局的元素之间空白地不叠加。</li>
<li style="margin: 0px 0px 0.66em; padding: 0px 0px 0px 12px; line-height: 1.6em; list-style-type: none; background-image: url(http://adamghost.com/wp-content/themes/adamghost/images/bullut/diamond-black.gif); background-repeat: no-repeat; color: #63565f; background-position: 0% 6px;">在不拥有布局的块级链接上，单击区域只覆盖文本。</li>
</ul>
<p style="margin: 0px; padding: 5px 0px 20px;">在下一节中，我们将讨论一些最常见的浏览器bug. 你会注意到对于Windows 上的IE的许多修复方法都涉及通过设置属性迫使元素拥有布局。实际上，如果遇到一个IE/Wi n bug，首先应该做的事情之一就是尝试通过应用规则迫使元素拥有布局。看看这是否可以修复问题。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">如果希忘进一步了解IE的内部hasLayout属性，我建议阅读<a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://tinyurl.com/acg78">http://tinyurl.com/acg78</a>上的”On Having Layout”。【我的翻译文章在这里<a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" title="IE Haslayout 详解" href="http://adamghost.com/2008/12/ie-haslayout/" target="_blank">IE Haslayout 详解</a>】</p>
<h3 style="margin: 0px; padding: 0px; font-size: 1em; font-family: Verdana,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: 2px; line-height: normal; text-transform: uppercase;">常见BUG及其修复方法</h3>
<p style="margin: 0px; padding: 5px 0px 20px;">CSS 开发人员最重要的技能之一是发现常见浏览器bug的能力。通过了解导致这些bug 的各种元索，可以在它们造成问题之前发现并且修复它们。</p>
<h4 style="margin: 0px; padding: 0px; font-size: 14px;">双空白边浮动bug</h4>
<p style="margin: 0px; padding: 5px 0px 20px;">最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。顾名思义，这个Windows bug使任何浮动元素上的空白边加倍(见图9-7)。</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image4.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Double-margin float bug" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb2.png" border="0" alt="Double-margin float bug" width="600" height="238" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong><span> </span>IE/Win 的双空白浮动bug示意阁</p>
<p style="margin: 0px; padding: 5px 0px 20px;">这个bug 很容易修复，将元素的display 属性设置为inline 就行了.因为元素是浮动的，将display 属性设置为inline 实际上不会影响显示方式。但是，这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时，都应该很自然地将display 属性设置为inline。</p>
<h4 style="margin: 0px; padding: 0px; font-size: 14px;">3像素文本偏移bug</h4>
<p style="margin: 0px; padding: 5px 0px 20px;">另一个非常常见的I E 5-61Win bug 是3像素文本偏移bug。当文本与二个浮动元示相邻时，这个bug 就会表现出来。例如，假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>.myFloat { float: left; width: 200px; }<br />
p { margin-left: 200px; }</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">如果这么做，在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。(见图9-8) 。</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image5.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Three-pixel text jog bug" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb3.png" border="0" alt="Three-pixel text jog bug" width="600" height="288" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong><span> </span>IE 5-6/Win 的3像素文本偏移bug示意图</p>
<p style="margin: 0px; padding: 5px 0px 20px;">修复这个bug 需要双管齐下。首先，给包含文本的元素设置任意的高度。这会迫使元素拥有布局，这在表面上会消除文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样对待，所以设置一个小的高度并不会影响元素在这些浏览器巾的实际尺寸。但是，这会影响其他浏览器，所以要使用Holly招数对除了Windows 上的IE6 和更低版本之外的所有其他浏览器隐藏这个规则，</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>/* Hide from IE5-Mac. Only IE-Win sees this. \*/<br />
* html p { height: 1%; }<br />
/* End hide from IE5/Mac */</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">不幸的是，这么做会导致另一个问题。正如在前面学到的，拥有布局的元素被限制为矩形的，并且出现在浮动元索的旁边而不是它们的下面。添加200像素的空白边实际上会在IE 5-6/Win 中在浮动元素和段落之间产生200像素的间隙。为了边免这个问隙，需要将IE 5-6/Win 上的空白边重新设置为零:</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>/* Hide from IE5-Mac. Only IE-Win sees this. \*/<br />
* html p { height: 1%; margin-left: 0; }<br />
/* End hide from IE5/Mac */</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">文本偏移被修复了，但是现在另一个3像亲间隙出现了，这一次是在浮动元素上。为了去掉这个问隙，需要在浮动元素上设置一个负值的3像素右空白边：</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>/* Hide from IE5-Mac. Only IE-Win sees this. \*/<br />
* html p { height: 1%; margin-left: 0; }<br />
* html .myFloat { margin-right: -3px; }<br />
/* End hide from IE5/Mac */</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">如果浮动元素是除了图像之外的任何其他东西，那么这个问题己经修复了。但是，如果浮动元旦在是图像，那么还有放后一个问题需要解决。 IE 5.x/Win在图像的左右都添加3像亲的间隙。而IE6不改变图像的空白边。因此，需要用另一个招术在IE 5.x/Win 上去掉3 像素的问隙:</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>/* Hide from IE5-Mac. Only IE-Win sees this. \*/<br />
* html p { height: 1%; margin-left: 0; }<br />
* html img.myFloat { margin: 0 -3px; ma\rgin: 0; }<br />
/* End hide from IE5/Mac */</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">这会解决问题，但是采用的方式很难看而且太复杂。因此，如果可能的话，最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做，用于Windows 上的lE 5.x的样式表如下：</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>p { height: 1%; margin-left: 0; }<br />
img.myFloat { margin: 0 -3px; }</code>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">用于IE 6的样式表如下:</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>p { height: 1%; margin-left: 0; }<br />
img.myFloat { margin: 0; }</code></p>
<h4 style="margin: 0px; padding: 0px; font-size: 14px;">IE 6躲躲猫bug</h4>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">另一个奇怪而且很烦人的 bug 是IE6 的躲躲猫(peek-a-boo) bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在前新装载页面时才再度出现。出现这个bug 的条件是:一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或阅像的父元束中。如果清理元素碰到了浮动元素，那么中间的作浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现(见图9-10)。</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image6.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="IE 6 peek-a-boo bug" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb4.png" border="0" alt="IE 6 peek-a-boo bug" width="600" height="305" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong>IE 6的躲躲猫bug示意图</p>
<h4 style="margin: 0px; padding: 0px; font-size: 14px;">相对容器中的绝对定位</h4>
<p style="margin: 0px; padding: 5px 0px 20px;">我要讨论的段后一个主要浏览器bug涉及相对定位容器中的绝对定位元素。在前面的章节中你学到将绝对定位的元素嵌套在相对容器中是多么有用。但是，IE 6和更低版本在使用这种技术时有许多bug。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">这些bug 的原因在于相对定位的元素没有获得IE/Win 的内部hasLayout 属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于窗口进行定位(见图9-11)。</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://adamghost.com/wp-content/uploads/2009/03/image7.png"><img style="border-style: none; border-width: 0px; padding: 0px; max-width: 100%; margin-bottom: 10px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Absolute positioning in a relative container" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb5.png" border="0" alt="Absolute positioning in a relative container" width="600" height="348" /></a></p>
<p style="margin: 0px; padding: 5px 0px 20px;"><strong>Figure Above:</strong>IE5.x对相对容器中的绝对定位元素的定位方式不正确</p>
<p style="margin: 0px; padding: 5px 0px 20px;">为了使Windows 上的IE 6和更低版本的表现正确。需要迫使相对应位的容器拥有布局。一种方法是在容器上显式地设置width 和height。但是，常常希望在不知道容器的width 和height的况下，或者在需要这些属性保持灵活的情况下使用这种技术。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">可以使用Holly 招数为容器提供一个的高度。这会让容器拥有布局。但是因为IE 6和更低版本中的元素会不正确地扩展以适应它们的内容，所以设置小的高度不会影响实际高度。</p>
<p style="margin: 0px; padding: 5px 0px 20px;"><code>/* Hides from IE-Mac \*/<br />
* html .container { height: 1%; }<br />
/* End hide from IE-Mac */</code></p>
<h3 style="margin: 0px; padding: 0px; font-size: 1em; font-family: Verdana,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: 2px; line-height: normal; text-transform: uppercase;">停止对IE 的批评</h3>
</p>
<p style="margin: 0px; padding: 5px 0px 20px;">IE 并不足惟一一种有bug 的浏览器，所以你可能会奇怪我为什么只关注IE bug。 不必担心，我找并不是专门和微软过不去，这么做是有理由的。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">首先， IE 目前占有最大的浏览器市场份额。因为有许多人在使用IE，IE bug 往往很快被发现而且很好地记录下来。当在IE中发现一个重大的CSS bug时，许多开发人员会尝试寻找修复方法或解决方案。由于IE的流行程度，被记录并修复的IE bug比其他任何浏览器都要多.</p>
<p style="margin: 0px; padding: 5px 0px 20px;">另一个主要问题是开发的节奏。Firefox、Safari和Opera等浏器不断地进行更新，新版本以非常高的频率出现。 bug 几乎一经发现就被修复了，并且发布浏览器的新版本.因此，现在讨论的任何Firefox或Safari bug 可能已经被下一个修订版修复了。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">如此高的开发节奏确实很棒，但是也有自己的问题。开发人员要应付的浏览器版本不是两三个，而是20或30个。你无法确定用户是否使用最新的版本，这使测试变得极其困难。另一方面，IE差不多5年没有发布主要修订版了。因此，bug 有更多的时间可以暴露出来，开发人员也有更强的寻找修复方法的动力。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">幸运的是，IE 7承诺将成为更符合标准的浏览器。许多著名的IE bug 已经被解决，而且对高级CSS 2.1 选择器（比如子选择器和属性选择器）的支持也在增加。与所有浏览器一样，新的bug也会出现，IE 7远不是完美的。但是，人们越快地升级到IE 7和Firefox 等现代浏览器，IE 5.0等老式浏览器就会越快地退役。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">在这个过渡时期，可以考虑使用Dean Edwards 的IE 7 补丁。这是一系列JavaScript 文件，它们使IE 5-6/Win 能够接近IE 7的水平.这包括改进的选择器实现和许多bug 修复。关与这个补丁的更多信息，请访问<a style="border-bottom: 1px solid #555555; color: #3c6600; text-decoration: none;" href="http://dean.edwards.name/IE7/">http://dean.edwards.name/IE7/</a>。</p>
<p style="margin: 0px; padding: 5px 0px 20px;">转自:<a class="alignright" title="http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/" href="http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/" target="_blank"><span style="border-collapse: separate; color: #000000; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span style="color: #333333; font-family: Verdana; font-size: 14px; line-height: 28px;"><span style="border-collapse: separate; color: #000000; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span style="font-family: Tahoma; font-size: 12px; white-space: pre;">http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/</span></span></span></span></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/haslayout-explain/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>无hack完美兼容的div垂直居中解决方案</title>
		<link>http://www.keelii.com/div-vertical-align/</link>
		<comments>http://www.keelii.com/div-vertical-align/#comments</comments>
		<pubDate>Tue, 14 Apr 2009 13:38:36 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[CSS相关]]></category>
		<category><![CDATA[文章转载]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[垂直居中]]></category>
		<category><![CDATA[添加新标签]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=467</guid>
		<description><![CDATA[研究一个经典的CSS问题:DIV垂直居中。结合网上的各种方法自己总结出了一个无hack完美的兼容IE6,7,FF的垂直解决方案.你可以看下面的图来理解第三种方法               预览效果 1.当div内容为单行时，众所周知将div的height和line-height设置成一个相同的值。 2.当div高度不固定时，将父div的padding-top和padding-bottom设置成一个相同的值使其自适应。 3.当div高度固定时，有两种情况： (1)非IE浏览器中可用如下代码使其垂直居中 .box{ display:table-cell; vertical-align:middle;} (2)IE中不支持上面的属性，所以下面就得用blueidea上的一个方法了,代码如下 .box{ position:relative; } .inner{ position:absolute; top:50%; left:0;} .innerbox{ position:relative; top:-50%; left:0;} 为了写一个通用的代码我们可以用IE的条件注释来引入IE的代码从而避免hack的使用,由次我总结出了如下代码 &#60;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&#62; &#60;html xmlns=”http://www.w3.org/1999/xhtml”&#62; &#60;head&#62; &#60;meta http-equiv=”Content-Type” content=”text/html; charset=utf-8&#8243; /&#62; &#60;title&#62;div vertical &#8230; <a href="http://www.keelii.com/div-vertical-align/">继续阅读 <span class="meta-nav">»</span></a>]]></description>
			<content:encoded><![CDATA[<p>研究一个经典的CSS问题:DIV垂直居中。结合网上的各种方法自己总结出了一个无hack完美的兼容IE6,7,FF的垂直解决方案.你可以看下面的图来理解第三种方法               <a href="http://www.keelii.com/learning/div-vertical-align.html" target="_blank">预览效果</a></p>
<p style="text-align: center;"><img class="pie-img" src="http://lh3.ggpht.com/_HJBsvHXn6TY/SeSQ3r6c-uI/AAAAAAAAAPY/EOmwJG-aaI0/vertical-align.jpg?imgmax=512" alt="vertical-align.jpg" /></p>
<p>1.当div内容为单行时，众所周知将div的height和line-height设置成一个相同的值。<br />
2.当div高度不固定时，将父div的padding-top和padding-bottom设置成一个相同的值使其自适应。<br />
3.当div高度固定时，有两种情况：<br />
(1)非IE浏览器中可用如下代码使其垂直居中</p>
<blockquote><p>.box{ display:table-cell; vertical-align:middle;}</p></blockquote>
<p>(2)IE中不支持上面的属性，所以下面就得用blueidea上的一个方法了,代码如下</p>
<blockquote><p>.box{ position:relative; }<br />
.inner{ position:absolute; top:50%; left:0;}<br />
.innerbox{ position:relative; top:-50%; left:0;}</p></blockquote>
<p><span id="more-467"></span><br />
为了写一个通用的代码我们可以用IE的条件注释来引入IE的代码从而避免hack的使用,由次我总结出了如下代码</p>
<blockquote><p>&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;<br />
&lt;html xmlns=”http://www.w3.org/1999/xhtml”&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=”Content-Type” content=”text/html; charset=utf-8&#8243; /&gt;<br />
&lt;title&gt;div vertical align&lt;/title&gt;<br />
&lt;style type=”text/css”&gt;<br />
&lt;!&#8211;<br />
*{ margin:0; padding;0;}<br />
body{ font:12px Verdana, Geneva, sans-serif; padding:10px;}<br />
.box{ width:300px; height:300px; margin:0 auto; display:table-cell; vertical-align:middle;border:1px solid #96c2f1; background:#eff7ff;}<br />
.inner{ width:170px; background:f0fbeb; border:1px solid #9bdf70; }<br />
.innerbox{ width:150px; background:#fafcfd; border:1px solid #cceff5;  padding:5px; }<br />
&#8211;&gt;<br />
&lt;/style&gt;<br />
&lt;!&#8211;[if IE]&gt;<br />
&lt;style type=”text/css”&gt;<br />
.box{ position:relative; }<br />
.inner{ position:absolute; top:50%; left:0;}<br />
.innerbox{ position:relative; top:-50%; left:0;}<br />
&lt;/style&gt;<br />
&lt;![endif]&#8211;&gt;<br />
&lt;/head&gt;</p>
<p>&lt;body&gt;<br />
&lt;div class=”box”&gt;<br />
&lt;div class=”inner”&gt;<br />
&lt;div class=”innerbox”&gt;<br />
这里可以是内容&lt;br/&gt;<br />
这里可以是内容&lt;br/&gt;<br />
这里可以是内容&lt;br/&gt;<br />
这里可以是内容&lt;br/&gt;<br />
这里可以是内容&lt;br/&gt;<br />
这里可以是内容&lt;br/&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/div-vertical-align/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>一张图片掌握PhotoShop文字排版技巧!</title>
		<link>http://www.keelii.com/%e4%b8%80%e5%bc%a0%e5%9b%be%e7%89%87%e6%8e%8c%e6%8f%a1photoshop%e6%96%87%e5%ad%97%e6%8e%92%e7%89%88%e6%8a%80%e5%b7%a7/</link>
		<comments>http://www.keelii.com/%e4%b8%80%e5%bc%a0%e5%9b%be%e7%89%87%e6%8e%8c%e6%8f%a1photoshop%e6%96%87%e5%ad%97%e6%8e%92%e7%89%88%e6%8a%80%e5%b7%a7/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 04:38:22 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[网页制作相关]]></category>
		<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=359</guid>
		<description><![CDATA[在用PhotoShop做网页,排版文字了时候有很多小技巧,观察下面这张图片,里面非常有用的排版技巧. PS:苹果机中的”option”键对应windows中的”Alt”键.]]></description>
			<content:encoded><![CDATA[<p>在用PhotoShop做网页,排版文字了时候有很多小技巧,观察下面这张图片,里面非常有用的排版技巧.<br />
PS:苹果机中的”option”键对应windows中的”Alt”键.<br />
<img title="ps-words-format" src="http://www.keelii.com/wp-content/uploads/2009/03/ps-words-format.gif" alt="ps-words-format" width="520" height="225" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/%e4%b8%80%e5%bc%a0%e5%9b%be%e7%89%87%e6%8e%8c%e6%8f%a1photoshop%e6%96%87%e5%ad%97%e6%8e%92%e7%89%88%e6%8a%80%e5%b7%a7/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>如何书写高效的CSS</title>
		<link>http://www.keelii.com/%e5%a6%82%e4%bd%95%e4%b9%a6%e5%86%99%e9%ab%98%e6%95%88%e7%9a%84css/</link>
		<comments>http://www.keelii.com/%e5%a6%82%e4%bd%95%e4%b9%a6%e5%86%99%e9%ab%98%e6%95%88%e7%9a%84css/#comments</comments>
		<pubDate>Sat, 07 Mar 2009 01:48:51 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[CSS相关]]></category>
		<category><![CDATA[文章转载]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.keelii.com/?p=298</guid>
		<description><![CDATA[根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。 1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 * 不赞成 &#8211; color:#f3a; * 建议用 &#8211; color:#FF33AA; 2、display与visibility的差异 他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。 * 不赞成 &#8211; visibility:hidden; * 建议用 &#8211; display:none; 3、border:none;与border:0;的区别 和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。 * 不赞成 &#8211; border:0; * 建议用 &#8211; border:none; 4、不宜过小的背景图片平铺 一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。 * 不赞成 &#8211; 宽高8px以下的平铺背景图片 * 建议用 &#8211; &#8230; <a href="http://www.keelii.com/%e5%a6%82%e4%bd%95%e4%b9%a6%e5%86%99%e9%ab%98%e6%95%88%e7%9a%84css/">继续阅读 <span class="meta-nav">»</span></a>]]></description>
			<content:encoded><![CDATA[<p>根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。</p>
<p>1、十六进制的颜色值对位数与大小写</p>
<p>编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。</p>
<p>* 不赞成 &#8211; color:#f3a;</p>
<p>* 建议用 &#8211; color:#FF33AA;</p>
<p>2、display与visibility的差异</p>
<p>他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。</p>
<p>* 不赞成 &#8211; visibility:hidden;</p>
<p>* 建议用 &#8211; display:none;<br />
<span id="more-298"></span><br />
3、border:none;与border:0;的区别</p>
<p>和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。</p>
<p>* 不赞成 &#8211; border:0;</p>
<p>* 建议用 &#8211; border:none;</p>
<p>4、不宜过小的背景图片平铺</p>
<p>一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。</p>
<p>* 不赞成 &#8211; 宽高8px以下的平铺背景图片</p>
<p>* 建议用 &#8211; 衡量适中体积及尺寸的背景图片</p>
<p>5、IE的滤镜</p>
<p>IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。</p>
<p>* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。</p>
<p>* 建议用，最好选择其它方法能避免使用滤镜。</p>
<p>6、*{ margin:0; padding:0;}避免浏览器样式差异</p>
<p>*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。</p>
<p>* 不赞成，使用*号通配符</p>
<p>* 不赞成，div span button b table等标签纳入通配符控制内外填充样式</p>
<p>* 建议用，有选择性地使用通配符控制内外填充样式。</p>
<p>7、不要添加额外的标签来描述class或id</p>
<p>如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。</p>
<p>* 不赞成 &#8211; button#backButton { }</p>
<p>* 不赞成 &#8211; .menu-left #newMenuIcon { }</p>
<p>* 建议用 &#8211; #backButton { }</p>
<p>* 建议用 &#8211; #newMenuIcon { }</p>
<p>8、尽量选择最特殊的类来存放选择器</p>
<p>降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。</p>
<p>* 不赞成 &#8211; treeitem[mailfolder=”true”] &gt; treerow &gt; treecell { }</p>
<p>* 建议用 &#8211; .treecell-mailfolder { }</p>
<p>9、避免子孙选择符</p>
<p>子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。</p>
<p>* 不赞成 &#8211; treehead treerow treecell { }</p>
<p>* 好一点，但还是不行(参照下一条) &#8211; treehead &gt; treerow &gt; treecell { }</p>
<p>10、标签类中不要包含子选择符</p>
<p>不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）</p>
<p>* 不赞成 &#8211; treehead &gt; treerow &gt; treecell { }</p>
<p>* 建议用 &#8211; .treecell-header { }</p>
<p>11、留意所有子选择符的使用</p>
<p>小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。</p>
<p>* 不赞成 &#8211; treeitem[IsImapServer=”true”] &gt; treerow &gt; .tree-folderpane-icon { }</p>
<p>请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。</p>
<p>* 建议用 &#8211; .tree-folderpane-icon[IsImapServer=”true”] { }</p>
<p>注：本文转载自中国站长站</p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/%e5%a6%82%e4%bd%95%e4%b9%a6%e5%86%99%e9%ab%98%e6%95%88%e7%9a%84css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>艾薇儿上海个唱high翻天 引发全场大合唱</title>
		<link>http://www.keelii.com/%e8%89%be%e8%96%87%e5%84%bf%e4%b8%8a%e6%b5%b7%e4%b8%aa%e5%94%b1high%e7%bf%bb%e5%a4%a9-%e5%bc%95%e5%8f%91%e5%85%a8%e5%9c%ba%e5%a4%a7%e5%90%88%e5%94%b1/</link>
		<comments>http://www.keelii.com/%e8%89%be%e8%96%87%e5%84%bf%e4%b8%8a%e6%b5%b7%e4%b8%aa%e5%94%b1high%e7%bf%bb%e5%a4%a9-%e5%bc%95%e5%8f%91%e5%85%a8%e5%9c%ba%e5%a4%a7%e5%90%88%e5%94%b1/#comments</comments>
		<pubDate>Sun, 05 Oct 2008 20:53:12 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[生活的事儿]]></category>

		<guid isPermaLink="false">http://69.56.174.75/~keelii/?p=45</guid>
		<description><![CDATA[2008年10月4日，上海，艾薇儿•拉维妮“美丽坏东西”中国巡演上海站在八万人体育场开唱。去年夏天艾薇儿就曾来过上海不过上次的6000人显然不过瘾，这次则选择了八万人体育场。演唱会在激情四射的《女朋友》(Girlfriend)中至HIGH开场。《女朋友》歌声一起，原本都坐在座位上的观众全部起立，挥舞着手中的荧光棒，跟着艾薇儿一起大声高唱，使得演唱会一开场就进入了大合唱的状态。 &#60;转自qq.com&#62;]]></description>
			<content:encoded><![CDATA[<p style="text-align: center">
<p style="text-align: center"><img class="alignnone size-full wp-image-99" title="images" src="http://www.keelii.com/wp-content/uploads/2008/10/images.jpg" alt="images" width="150" height="113" /></p>
<p style="text-align: center">2008年10月4日，上海，<a href="http://datalib.ent.qq.com/star/295/index.shtml" target="_blank">艾薇儿</a>•拉维妮“美丽坏东西”中国巡演上海站在八万人体育场开唱。去年夏天艾薇儿就曾来过上海不过上次的6000人显然不过瘾，这次则选择了八万人体育场。演唱会在激情四射的《女朋友》(Girlfriend)中至HIGH开场。《女朋友》歌声一起，原本都坐在座位上的观众全部起立，挥舞着手中的荧光棒，跟着艾薇儿一起大声高唱，使得演唱会一开场就进入了大合唱的状态。 &lt;转自qq.com&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/%e8%89%be%e8%96%87%e5%84%bf%e4%b8%8a%e6%b5%b7%e4%b8%aa%e5%94%b1high%e7%bf%bb%e5%a4%a9-%e5%bc%95%e5%8f%91%e5%85%a8%e5%9c%ba%e5%a4%a7%e5%90%88%e5%94%b1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一生必看经典电影?（50部）</title>
		<link>http://www.keelii.com/%e4%b8%80%e7%94%9f%e5%bf%85%e7%9c%8b%e7%bb%8f%e5%85%b8%e7%94%b5%e5%bd%b1%ef%bc%8850%e9%83%a8%ef%bc%89/</link>
		<comments>http://www.keelii.com/%e4%b8%80%e7%94%9f%e5%bf%85%e7%9c%8b%e7%bb%8f%e5%85%b8%e7%94%b5%e5%bd%b1%ef%bc%8850%e9%83%a8%ef%bc%89/#comments</comments>
		<pubDate>Sun, 29 Jun 2008 16:25:12 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[生活的事儿]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://69.56.174.75/~keelii/?p=35</guid>
		<description><![CDATA[这些电影可能是不适合你的、可能是你不喜欢的，但一定是经典的、是最好的。 如果你想花最少的时间看最好的电影，那么以下这些是必须要看的。 你可以试试： 当你看过了10部影片后，你就会觉得有兴趣了； 看过了20部影片后，你就知道了什么是好电影； 看过了30部影片后，你就会有话要说会评论了； 看过了40部影片后，你就会迫不及待地想向人推荐； 看过了50部影片后，你就会千方百计的再找50部影片来看&#8230;&#8230; 这时你就无可救药啦。 1.西线无战事 All Quiet on the Western Front（1930）(美国) 奥斯卡授奖以来第一部具有强烈思想性的作品 电影史上“最伟大的反战电影”之一 揭示了惨绝人寰的战争实况，击溃了所谓的“爱国”迷梦 2.马路天使 Street Angel（1937）（中国） 中国早期社会问题片的集大成者 海派城市市井生活的经典写照 20世纪30年代中国电影的压轴之作 3.乱世佳人 Gone with the Wind（1939）(美国) 好莱坞“第一巨片” 展现着旷世爱情的绝世佳作 奥斯卡史上一个不可逾越的“至高点” 4.魂断蓝桥 Waterloo Bridge（1940）(美国) 镜花水月痴人泪，蓝桥愁断离人肠 战争时期一首催人泪下的爱情绝唱 电影史上三大凄美不朽的爱情悲剧之一 5.公民凯恩 &#8230; <a href="http://www.keelii.com/%e4%b8%80%e7%94%9f%e5%bf%85%e7%9c%8b%e7%bb%8f%e5%85%b8%e7%94%b5%e5%bd%b1%ef%bc%8850%e9%83%a8%ef%bc%89/">继续阅读 <span class="meta-nav">»</span></a>]]></description>
			<content:encoded><![CDATA[<p>这些电影可能是不适合你的、可能是你不喜欢的，但一定是经典的、是最好的。<br />
如果你想花最少的时间看最好的电影，那么以下这些是必须要看的。<br />
你可以试试：<br />
当你看过了10部影片后，你就会觉得有兴趣了；<br />
看过了20部影片后，你就知道了什么是好电影；<br />
看过了30部影片后，你就会有话要说会评论了；<br />
看过了40部影片后，你就会迫不及待地想向人推荐；<br />
看过了50部影片后，你就会千方百计的再找50部影片来看&#8230;&#8230;<br />
这时你就无可救药啦。</p>
<p>1.西线无战事 All Quiet on the Western Front（1930）(美国)<br />
奥斯卡授奖以来第一部具有强烈思想性的作品<br />
电影史上“最伟大的反战电影”之一<br />
揭示了惨绝人寰的战争实况，击溃了所谓的“爱国”迷梦</p>
<p>2.马路天使 Street Angel（1937）（中国）<br />
中国早期社会问题片的集大成者<br />
海派城市市井生活的经典写照<br />
20世纪30年代中国电影的压轴之作</p>
<p>3.乱世佳人 Gone with the Wind（1939）(美国)<br />
好莱坞“第一巨片”<br />
展现着旷世爱情的绝世佳作<br />
奥斯卡史上一个不可逾越的“至高点”</p>
<p>4.魂断蓝桥 Waterloo Bridge（1940）(美国)<br />
镜花水月痴人泪，蓝桥愁断离人肠<br />
战争时期一首催人泪下的爱情绝唱<br />
电影史上三大凄美不朽的爱情悲剧之一</p>
<p>5.公民凯恩 Citizen Kane（1941）(美国)<br />
世界电影史上的一次重要实验<br />
反映一个浮士德式的人物在物质世界中的生存状态<br />
一部纯粹的“电影的诗”</p>
<p>6.卡萨布兰卡 Casablanca（1942）(美国)<br />
世界电影殿堂中的经典之作<br />
以爱情故事贯穿起来的惊险侦探片<br />
蕴涵着爱国主义的主题和反法西斯激情</p>
<p>7.小城之春 Spring in a Small Town（1948）（中国）<br />
一部典型的心理抒情片<br />
世界电影史上不可多得的艺术珍品<br />
开创了中国电影史上诗化电影的先河</p>
<p>8.罗生门 Rash?mon（1950）（日本）<br />
挖掘人性丑恶的巅峰之作<br />
在国际影坛上产生重大影响的第一部日本影片<br />
标志着日本的电影艺术进入一个新纪元</p>
<p>9.罗马假日 Roman Holiday（1953）（美国）<br />
流芳百世的浪漫经典<br />
电影史上爱情文艺片的典范<br />
温馨浪漫中充满了艺术的美感</p>
<p>10.后窗 Rear Window（1954）（美国）<br />
“永远的惊悚大师”的杰出代表作<br />
一则“看电影”的寓言<br />
一首直指阴暗人心的诗</p>
<p>11.宾虚 Ben-Hur（1959）（美国）<br />
一部名垂影史的史诗巨片<br />
奥斯卡历史上一个突破性的记录<br />
满含着对神的谦恭之感和敬畏之情</p>
<p>12.西区故事 West Side Story（1961）（美国）<br />
百年经典的主题与现代艺术的融会贯通<br />
美国“街头歌舞片”的经典之作<br />
一幕“罗密欧与朱丽叶”式的现代都市爱情悲剧</p>
<p>13.音乐之声 The Sound of Music（1965）（美国）<br />
人类记忆中最值得珍惜和细细回味的艺术佳作<br />
好莱坞音乐歌舞片中经典中的经典<br />
电影史上绝妙的神来之笔</p>
<p>14.教父 The Godfather (1972)（美国）<br />
一部令人拍案叫绝的成功之作<br />
一部最具史诗气魄的揭露黑社会明争暗斗内幕的影片<br />
一幅气势恢弘的“社会图卷”</p>
<p>15.星球大战 Star Wars (1977)（美国）<br />
20世纪最为重要的文化事件之一<br />
科幻电影史上最为经典的作品<br />
影响了整整一代人</p>
<p>16.人证 Ningen no sh?mei (1977)（日本）<br />
一部探讨人性、人情、人伦的杰作<br />
世界侦探推理片中的精品<br />
开拓了悬疑片的社会深度</p>
<p>17.城南旧事 My Memories of Old Beijing（1983）（中国）<br />
满含人间烟火味，却无半分名利心<br />
近乎一幅宁静、淡泊、简约的中国水墨画<br />
似一首淡雅而含蓄的诗</p>
<p>18.莫扎特 Amadeus (1984)（美国）<br />
展现一位“并非完人的乐圣”的坎坷人生<br />
反映人生道路上善与恶的冲突<br />
深刻洞悉人性的经典之作</p>
<p>19.芙蓉镇 Hibiscus Town（1984）（中国）<br />
“电影泰斗”谢晋的扛鼎之作<br />
表现了各式人物在历史面前的真实面目<br />
发出对人性的呼唤和对美好感情的讴歌</p>
<p>20.红高粱 Red Sorghum（1987）（中国）<br />
中国新时期电影创作的新篇章<br />
中国电影走向世界的新开始<br />
犹如一声霹雳，惊醒了西方人对中国电影所持的蔑视与迷幻</p>
<p>21.十诫 Dekalog (1989)（波兰）<br />
欧洲“道德焦虑电影”的代表作<br />
以探讨当代人的道德困惑为主旨的鸿篇巨制<br />
透过世界上最伟大的人生契约引出满含悲悯和质疑的精神命题</p>
<p>22.悲情城市 Beiqing chengshi (1989)（中国台湾）<br />
当代台湾社会的灰色寓言<br />
都会浮世风景中喑哑的安魂曲<br />
一部时代转换与个人命运紧紧相扣的台湾史诗</p>
<p>23.人鬼情未了（第六感生死恋） Ghost (1990)（美国）<br />
好莱坞道德复兴运动的代表作<br />
一幕杰出的爱情悲剧<br />
体现了超越生死的浪漫柔情</p>
<p>24.与狼共舞 Dances with Wolves (1990)（美国）<br />
多元化文化观在电影史上的成功折射<br />
对美国西进运动的深刻反思<br />
好莱坞历史上一部永垂不朽的西部传奇</p>
<p>25.情人 Amant, L&#8217; (1992)（法国/英国/越南）<br />
一段让人痛彻心扉的异国之恋<br />
一段大胆、炽烈、郁闷而又无奈的叛逆恋情<br />
一堵无法逾越的经典叹息之墙</p>
<p>26.沉默的羔羊 The Silence of the Lambs (1991)（美国）<br />
美国社会问题片的经典之作<br />
一部令人紧张得透不过气来的心理分析片<br />
好莱坞最令人激动的恐怖片之一</p>
<p>27.牯岭街少年杀人事件 A Brighter Summer Day(1991)（中国台湾）<br />
锐利的现代感和青春化特征的真实结合<br />
一曲青春的悲歌、一幕夹杂了少年初始的懵懂之美的戏剧<br />
展现与夜色、血腥和猫王的歌声联系在一起的别样的青春</p>
<p>28.霸王别姬 Farewell My Concubine(1993)（中国/香港）<br />
通俗中见斑斓，曲高而和者众<br />
一部绚烂、令人陶醉的史诗</p>
<p>29.辛德勒的名单 Schindler&#8217;s List (1993)（美国）<br />
探寻和讴歌在特殊环境中的人性发展轨迹<br />
具有巨大影响的震撼力和深沉而令人痛苦的艺术魅力<br />
深具史诗的格局和撼人心魄的情绪力量</p>
<p>30.真实的谎言 True Lies (1994)（美国）<br />
美国20世纪90年代动作片经典中的经典<br />
特技电影的典范<br />
大陆市场进口好莱坞大片的开始</p>
<p>31.阿甘正传 Forrest Gump (1994)（美国）<br />
美国“反智电影”的代表作<br />
充满着好莱坞电影回归的保守主义精神<br />
以小人物的经历透视着美国的政治和社会史</p>
<p>32.燃情岁月 Legends of the Fall (1994)（美国）<br />
一幅波澜壮阔的美国西部画卷<br />
一部经典的唯美派电影<br />
恍如隔世的成人童话</p>
<p>33.钢琴课（钢琴别恋）The Piano (1993)（澳大利亚/新西兰/法国）<br />
一个凄美感人而又令人迷醉的爱情故事<br />
细腻地展现了维多利亚时代一个哑女深邃的情感世界<br />
反映女性意识觉醒的佳作</p>
<p>34.阳光灿烂的日子 In the Heat of the Sun （1994）（中国）<br />
20世纪90年代中国电影的“意外之喜”<br />
对“文革”时期青少年的生活状态和青春期困惑的真实描绘<br />
标志着中国电影跨入了一个新的时代</p>
<p>35.肖申克的救赎 The Shawshank Redemption (1994)（美国）<br />
一部揭露美国司法黑幕的巨片<br />
一幅用友谊和希望描绘的生命画卷<br />
蕴涵人生哲理的喻世之作</p>
<p>36.狮子王 The Lion King (1994)（美国）<br />
动物界中的“哈姆雷特”<br />
历史上最受欢迎的英语影片<br />
迪斯尼公司的巅峰之作</p>
<p>37.这个杀手不太冷（终极追杀令/杀手莱昂/杀手里昂） Léon (1994)（法国/美国）<br />
一部偏重于暴力美学的动作巨片<br />
令人心碎的问题少女与中年杀手的悲剧之恋<br />
满含绕指柔情的都市寓言</p>
<p>38.七宗罪 Se7en (1995)（美国）<br />
电影史上最成功的心理惊悚片<br />
一幕让人发狂的人生戏剧<br />
一部具有浓厚哲学意味的警世录</p>
<p>39.勇敢的心 Braveheart (1995)（美国）<br />
一部具有深刻民族主义和政治内涵的史诗巨片<br />
一段缠绵而令人荡气回肠的铁血柔情<br />
一部悲壮的血泪传奇</p>
<p>40.廊桥遗梦（麦迪逊之桥） The Bridges of Madison County (1995)（美国）<br />
一部内涵深刻的社会伦理片<br />
一段柏拉图式的经典爱情<br />
一部本地化思维极强的力作</p>
<p>41.猜火车 Trainspotting （1996）(英国)<br />
一部着眼于社会现实的“问题电影”<br />
另类影片的经典之作<br />
以写实主义的基调展示了现代青年自我放逐的生活状态</p>
<p>42.泰坦尼克号 Titanic (1997)（美国）<br />
电影史上第一昂贵的电影<br />
沉没之船上永不沉没的爱情绝唱<br />
一部人类应时时审视自己劣根性的警世箴言</p>
<p>43.美丽人生 Vita è bella, La (1997)（意大利）<br />
一部超越常规的黑色喜剧片<br />
一服医治战争创伤的最佳良药<br />
拥有温暖的质感，清新、达观，而又生机盎然</p>
<p>44.中央车站 Central do Brasil (1998)（巴西/法国）<br />
全世界最好看的电影之一<br />
一部具有现实主义风范的温情小品<br />
一段悲悯旋律下的自我救赎之路</p>
<p>45.楚门的世界 The Truman Show (1998)（美国）<br />
一则荒诞无稽的人生寓言<br />
对惟利是图、践踏人权的社会现象的强烈讽刺<br />
有力地批判了“媒体万能”的价值观</p>
<p>46.搏击俱乐部（搏击会） Fight Club (1999)（德国/美国）<br />
一则极具颠覆性质的社会生活寓言<br />
一部真正意义上的世纪末的现代启示录<br />
一幕以死亡为主题的黑色喜剧</p>
<p>47.花样年华 In the Mood for Love（2000）（香港/法国/泰国）<br />
无法抗拒而又绮丽无比的东方之美<br />
一个有关人生的命题、一段互为交织的爱情<br />
一种紧张、神秘、情欲的调子，一场苦乐参半的梦</p>
<p>48.一一 Yi yi: A One and a Two&#8230; （2000）（台湾/日本）<br />
一部高水准的社会学宝典<br />
世界现状的缩影，充满迷人的奥秘与美感<br />
在冷静观世之余不乏对人的关怀与尊重</p>
<p>49.黑暗中的舞者 Dancer in the Dark （2000）（丹/德/荷/美/英/法/瑞/芬/冰/挪）<br />
北欧电影史上耗资最大的一部影片<br />
一部同现实激烈碰撞的质朴而伟大的音乐剧<br />
一首关于执着信念的赞美诗</p>
<p>50.千与千寻 Sen to Chihiro no kamikakushi（2001）（日本）<br />
自我救赎的英雄史诗<br />
重新审视人类生命力的力作<br />
在人与自然的对决中探寻世人活着的力量和理由</p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/%e4%b8%80%e7%94%9f%e5%bf%85%e7%9c%8b%e7%bb%8f%e5%85%b8%e7%94%b5%e5%bd%b1%ef%bc%8850%e9%83%a8%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DDoS攻击原理及常用工具介绍</title>
		<link>http://www.keelii.com/ddos%e6%94%bb%e5%87%bb%e5%8e%9f%e7%90%86%e5%8f%8a%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/</link>
		<comments>http://www.keelii.com/ddos%e6%94%bb%e5%87%bb%e5%8e%9f%e7%90%86%e5%8f%8a%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/#comments</comments>
		<pubDate>Sat, 07 Jun 2008 21:49:18 +0000</pubDate>
		<dc:creator>kily</dc:creator>
				<category><![CDATA[文章转载]]></category>
		<category><![CDATA[hack]]></category>

		<guid isPermaLink="false">http://69.56.174.75/~keelii/?p=24</guid>
		<description><![CDATA[进入2000年以来，网络遭受攻击事件不断发生，全球许多著名网站如yahoo、cnn、buy、ebay、fbi，包括中国的新浪网相继遭到不名身份的黑客攻击，值得注意的是，在这些攻击行为中，黑客摈弃了以往常常采用的更改主页这一对网站实际破坏性有限的做法，取而代之的是，在一定时间内，彻底使被攻击的网络丧失正常服务功能，这种攻击手法为 DDoS，即分布式拒绝服务攻击(Distributed denial of service )。 简单的讲，拒绝服务就是用超出被攻击目标处理能力的海量数据包消耗可用系统，带宽资源，致使网络服务瘫痪的一种攻击手段。在早期， 拒绝服务攻击主要是针对处理能力比较弱的单机，如个人pc，或是窄带宽连接的网站，对拥有高带宽连接，高性能设备的网站影响不大，但在99年底，伴随着DDoS的出现，这种高端网站高枕无忧的局面不复存在，与早期的DoS攻击由单台攻击主机发起，单兵作战相较，DDoS实现是借助数百，甚至数千台被植入攻击守护进程的攻击主机同时发起的集团作战行为，在这种几百，几千对一的较量中， 网络服务提供商所面对的破坏力是空前巨大的。 拒绝服务攻击自问世以来，衍生了多种形式，现将两种使用较频繁的TCP-SYN flood， UDP flood做一个介绍 。TCP-SYN flood又称半开式连接攻击，每当我们进行一次标准的TCP连接(如WWW浏览，下载文件等)会有一个一个三次握手的过程，首先是请求方向服务方发送一个SYN消息，服务方收到SYN后，会向请求方回送一个SYN-ACK表示确认，当请求方收到SYN-ACK后则再次向服务方发送一个ACK消息，一次成功的TCP连接由此就建立，可以进行后续工作了，如图所示: 而TCP-SYN flood在它的实现过程中只有前两个步骤，当服务方收到请求方的SYN并回送SYN-ACK确认消息后， 请求方由于采用源地址欺骗等手段，致使服务方得不到ACK回应，这样，服务方会在一定时间处于等待接收请求方ACK消息的状态，一台服务器可用的TCP连接是有限的，如果恶意攻击方快速连续的发送此类连接请求，则服务器可用TCP连接队列很快将会阻塞，系统可用资源，网络可用带宽急剧下降，无法向用户提供正常的网络服务。 Udp在网络中的应用也是比较广泛的，比如DNS解析、realaudio实时音乐、网络管理、联网游戏等，基于udp的攻击种类也是比较多的，如目前在互连网上提供www、mail等服务的设备一般为使用unix操作系统的服务器，他们默认是开放一些有被恶意利用可能的udp服务的，如:echo,chargen. echo服务回显接收到的每一个数据包，而原本作为测试功能的chargen服务会在收到每一个数据包时随机反馈一些字符，如果恶意攻击者将这两个udp服务互指，则网络可用带宽会很快耗尽。 自99年后半年开始，DDoS攻击不断在Internet出现，并在应用的过程中不断的得到完善，在Unix或nt环境上截至目前已有一系列比较成熟的软件产品，如Trinoo，TFN，TFN2K，STACHELDRATH等，他们基本核心及攻击思路是很相象的，下面就通过Trinoo对这类软件做一介绍。 Trinoo是基于UDP flood的攻击软件，它向被攻击目标主机随机端口发送全零的4字节UDP包，被攻击主机的网络性能在处理这些超出其处理能力垃圾数据包的过程中不断下降，直至不能提供正常服务甚至崩溃。 Trinoo攻击功能的实现，是通过三个模块付诸实施的， 1:攻击守护进程(NS) 2:攻击控制进程(MASTER) 3:客户端(NETCAT，标准TELNET程序等)， 攻击守护进程NS是真正实施攻击的程序，它一般和攻击控制进程(MASTER)所在主机分离，在原始C文件ns.c编译的时候，需要加入可控制其执行的攻击控制进程MASTER所在主机IP，（只有在ns.c中的IP方可发起ns的攻击行为）编译成功后，黑客通过目前比较成熟的主机系统漏洞破解（如rpc.cmsd，rpc.ttdbserver，rpc.statd）可以方便的将大量NS植入因特网中有上述漏洞主机内。ns运行时，会首先向攻击控制进程(MASTER)所在主机的31335端口发送内容为HELLO的UDP包，标示它自身的存在，随后攻击守护进程即处于对端口27444的侦听状态，等待master攻击指令的 到来。 攻击控制进程(MASTER)在收到攻击守护进程的HELLO包后，会在自己所在目录生成一个加密的名为&#8230;的可利用主机表文件， MASTER的启动是需要密码的，在正确输入默认密码gOrave后， MASTER即成功启动，它一方面侦听端口31335，等待攻击守护进程的HELLO包，另一方面侦听端口27665，等待客户端对其的连接。当客户端连接成功并发出指令时， MASTER所在主机将向攻击守护进程ns所在主机的27444端口传递指令。 客户端不是trinoo自带的一部分，可用标准的能提供TCP连接的程序，如TELNET，NETCAT等，连接MASTER所在主机的27665端口， 输入默认密码betaalmostdone后，即完成了连接工作，进入攻击控制可操作的提示状态。 目前版本的trinoo有六个可用命令，mtimer:设定攻击时长，如mtimer 60，攻击60秒，如果不设置的话，默认是无限。dos:对某一目标主机实施攻击，如dos 12.34.45.56 mdie:停止正在实施的攻击，使用这一功能需要输入口令killme，mping:请求攻击守护进程NS回应，监测ns是否工作。mdos， 对多个目标主机实施攻击，msize:设置攻击UDP包的大小。 &#8230; <a href="http://www.keelii.com/ddos%e6%94%bb%e5%87%bb%e5%8e%9f%e7%90%86%e5%8f%8a%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/">继续阅读 <span class="meta-nav">»</span></a>]]></description>
			<content:encoded><![CDATA[<p>进入2000年以来，网络遭受攻击事件不断发生，全球许多著名网站如yahoo、cnn、buy、ebay、fbi，包括中国的新浪网相继遭到不名身份的黑客攻击，值得注意的是，在这些攻击行为中，黑客摈弃了以往常常采用的更改主页这一对网站实际破坏性有限的做法，取而代之的是，在一定时间内，彻底使被攻击的网络丧失正常服务功能，这种攻击手法为 DDoS，即分布式拒绝服务攻击(Distributed denial of service )。</p>
<p>简单的讲，拒绝服务就是用超出被攻击目标处理能力的海量数据包消耗可用系统，带宽资源，致使网络服务瘫痪的一种攻击手段。在早期， 拒绝服务攻击主要是针对处理能力比较弱的单机，如个人pc，或是窄带宽连接的网站，对拥有高带宽连接，高性能设备的网站影响不大，但在99年底，伴随着DDoS的出现，这种高端网站高枕无忧的局面不复存在，与早期的DoS攻击由单台攻击主机发起，单兵作战相较，DDoS实现是借助数百，甚至数千台被植入攻击守护进程的攻击主机同时发起的集团作战行为，在这种几百，几千对一的较量中， 网络服务提供商所面对的破坏力是空前巨大的。</p>
<p>拒绝服务攻击自问世以来，衍生了多种形式，现将两种使用较频繁的TCP-SYN flood， UDP flood做一个介绍 。TCP-SYN flood又称半开式连接攻击，每当我们进行一次标准的TCP连接(如WWW浏览，下载文件等)会有一个一个三次握手的过程，首先是请求方向服务方发送一个SYN消息，服务方收到SYN后，会向请求方回送一个SYN-ACK表示确认，当请求方收到SYN-ACK后则再次向服务方发送一个ACK消息，一次成功的TCP连接由此就建立，可以进行后续工作了，如图所示:<br />
<img src="http://www.it.com.cn/f/network/0511/8/0501108_nt_aq_1.gif" border="0" alt="" /></p>
<p>而TCP-SYN flood在它的实现过程中只有前两个步骤，当服务方收到请求方的SYN并回送SYN-ACK确认消息后， 请求方由于采用源地址欺骗等手段，致使服务方得不到ACK回应，这样，服务方会在一定时间处于等待接收请求方ACK消息的状态，一台服务器可用的TCP连接是有限的，如果恶意攻击方快速连续的发送此类连接请求，则服务器可用TCP连接队列很快将会阻塞，系统可用资源，网络可用带宽急剧下降，无法向用户提供正常的网络服务。</p>
<p>Udp在网络中的应用也是比较广泛的，比如DNS解析、realaudio实时音乐、网络管理、联网游戏等，基于udp的攻击种类也是比较多的，如目前在互连网上提供www、mail等服务的设备一般为使用unix操作系统的服务器，他们默认是开放一些有被恶意利用可能的udp服务的，如:echo,chargen. echo服务回显接收到的每一个数据包，而原本作为测试功能的chargen服务会在收到每一个数据包时随机反馈一些字符，如果恶意攻击者将这两个udp服务互指，则网络可用带宽会很快耗尽。</p>
<p>自99年后半年开始，DDoS攻击不断在Internet出现，并在应用的过程中不断的得到完善，在Unix或nt环境上截至目前已有一系列比较成熟的软件产品，如Trinoo，TFN，TFN2K，STACHELDRATH等，他们基本核心及攻击思路是很相象的，下面就通过Trinoo对这类软件做一介绍。</p>
<p>Trinoo是基于UDP flood的攻击软件，它向被攻击目标主机随机端口发送全零的4字节UDP包，被攻击主机的网络性能在处理这些超出其处理能力垃圾数据包的过程中不断下降，直至不能提供正常服务甚至崩溃。</p>
<p>Trinoo攻击功能的实现，是通过三个模块付诸实施的，</p>
<p>1:攻击守护进程(NS) 2:攻击控制进程(MASTER) 3:客户端(NETCAT，标准TELNET程序等)，</p>
<p>攻击守护进程NS是真正实施攻击的程序，它一般和攻击控制进程(MASTER)所在主机分离，在原始C文件ns.c编译的时候，需要加入可控制其执行的攻击控制进程MASTER所在主机IP，（只有在ns.c中的IP方可发起ns的攻击行为）编译成功后，黑客通过目前比较成熟的主机系统漏洞破解（如rpc.cmsd，rpc.ttdbserver，rpc.statd）可以方便的将大量NS植入因特网中有上述漏洞主机内。ns运行时，会首先向攻击控制进程(MASTER)所在主机的31335端口发送内容为HELLO的UDP包，标示它自身的存在，随后攻击守护进程即处于对端口27444的侦听状态，等待master攻击指令的 到来。</p>
<p>攻击控制进程(MASTER)在收到攻击守护进程的HELLO包后，会在自己所在目录生成一个加密的名为&#8230;的可利用主机表文件， MASTER的启动是需要密码的，在正确输入默认密码gOrave后， MASTER即成功启动，它一方面侦听端口31335，等待攻击守护进程的HELLO包，另一方面侦听端口27665，等待客户端对其的连接。当客户端连接成功并发出指令时， MASTER所在主机将向攻击守护进程ns所在主机的27444端口传递指令。</p>
<p>客户端不是trinoo自带的一部分，可用标准的能提供TCP连接的程序，如TELNET，NETCAT等，连接MASTER所在主机的27665端口， 输入默认密码betaalmostdone后，即完成了连接工作，进入攻击控制可操作的提示状态。</p>
<p>目前版本的trinoo有六个可用命令，mtimer:设定攻击时长，如mtimer 60，攻击60秒，如果不设置的话，默认是无限。dos:对某一目标主机实施攻击，如dos 12.34.45.56 mdie:停止正在实施的攻击，使用这一功能需要输入口令killme，mping:请求攻击守护进程NS回应，监测ns是否工作。mdos， 对多个目标主机实施攻击，msize:设置攻击UDP包的大小。 Trinoo运行的总体轮廓可用下图说明:<br />
<img src="http://www.it.com.cn/f/network/0511/8/0501108_nt_aq_2.gif" border="0" alt="" /></p>
<p>我们来看一次攻击的实例:</p>
<p>被攻击的目标主机victim IP为:12.23.34.45<br />
ns被植入三台sun的主机里，他们的IP对应关系分别为client1:11.11.11.11<br />
client2:22.22.22.22<br />
client3:33.33.33.33<br />
master所在主机为masterhost:11.22.33.44<br />
首先我们要启动各个进程，在client1，2，3上分别执行ns，启动攻击守护进程，<br />
其次，在master所在主机启动master<br />
masterhost# ./master<br />
?? gOrave (系统示输入密码，输入gOrave后master成功启动)<br />
trinoo v1.07d2+f3+c [Mar 20 2000:14:38:49] (连接成功)</p>
<p>在任意一台与网络连通的可使用telnet的设备上，执行</p>
<p>telnet 11.22.33.44 27665<br />
Escape character is &#8216;^]&#8217;.<br />
betaalmostdone (输入密码)<br />
trinoo v1.07d2+f3+c..[rpm8d/cb4Sx/]<br />
trinoo&gt; (进入提示符)<br />
trinoo&gt; mping (我们首先来监测一下各个攻击守护进程是否成功启动)<br />
mping: Sending a PING to every Bcasts.<br />
trinoo&gt; PONG 1 Received from 11.11.11.11<br />
PONG 2 Received from 22.22.22.22<br />
PONG 3 Received from 33.33.33.33 (成功响应)<br />
trinoo&gt; mtimer 60 (设定攻击时间为60秒)<br />
mtimer: Setting timer on bcast to 60.<br />
trinoo&gt; dos 12.23.34.45<br />
DoS: Packeting 12.23.34.45&#8230;&#8230;</p>
<p>至此一次攻击结束，此时ping 12.23.34.45，会得到icmp不可到达反馈，目标主机此时与网络的正常连接已被破坏。</p>
<p>由于目前版本的trinoo尚未采用IP地址欺骗，因此在被攻击的主机系统日志里我们可以看到如下纪录:</p>
<p>Mar 20 14:40:34 victim snmpXdmid: Will attempt to re-establish connection.<br />
Mar 20 14:40:35 victim snmpdx: error while receiving a pdu from 11.11.11.11.59841: The message has a wrong header type (0&#215;0)<br />
Mar 20 14:40:35 victim snmpdx: error while receiving a pdu from 22.22.22.22.43661: The message has a wrong header type (0&#215;0)<br />
Mar 20 14:40:36 victim snmpdx: error while receiving a pdu from 33.33.33.33.40183: The message has a wrong header type (0&#215;0)<br />
Mar 20 14:40:36 victim snmpXdmid: Error receiving PDU The message has a wrong header type (0&#215;0).<br />
Mar 20 14:40:36 victim snmpXdmid: Error receiving packet from agent; rc = -1.<br />
Mar 20 14:40:36 victim snmpXdmid: Will attempt to re-establish connection.<br />
Mar 20 14:40:36 victim snmpXdmid: Error receiving PDU The message has a wrong header type (0&#215;0).<br />
Mar 20 14:40:36 victim snmpXdmid: Error receiving packet from agent; rc = -1.</p>
<p>由上述日志，我们不难看出发起攻击的ip地址，这一问题，通过ip spoof在后期的软件tfn，tfn2k等软件中得到了解决，给被攻击者找出肇事者进一步增加了难度。</p>
<p>Trinoo等DdoS攻击软件的出现，对网络的安全产生了巨大的挑战，借助这种在网上可以得到的公开软件，任何一个普通的上网者对网络的安全都构成了潜在的威胁，那么能不能做一些预防工作呢?</p>
<p>有一些是可以做的:</p>
<p>首先，检测自己的系统是否被植入了攻击守护程序，最简单的办法，检测上述提到的udp端口，如netstat -a | grep udp 端口号，如果得到listen等激活状态，就要注意了，或者用专门的检测软件，这里推荐美国FBI专门研制的Find Distributed Denial of Service (find_ddos) ， 最新版本的可检测到tfn2k client， tfn2k daemon， trinoo daemon， trinoo master， tfn daemon， tfn client， stacheldraht master， stacheldraht client， stachelddraht demon和 tfn-rush client等目前几乎所有流行攻击软件。 它的运行很简单，解开包，运行find_ddos即可，下面为在一台可疑设备运行结果，</p>
<p>Logging output t LOG<br />
Scanning running processes&#8230;<br />
/proc/795/object/a.out: trinoo daemon<br />
/usr/bin/gcore: core.795 dumped<br />
/proc/800/object/a.out: trinoo master<br />
/usr/bin/gcore: core.800 dumped<br />
Scanning “/tmp”&#8230;<br />
Scanning “/”&#8230;<br />
/yiming/tfn2k/td: tfn2k daemon<br />
/yiming/tfn2k/tfn: tfn2k client<br />
/yiming/trinoo/daemon/ns: trinoo daemon<br />
/yiming/trinoo/master/master: trinoo master<br />
/yiming/trinoo/master/&#8230;: possible IP list file<br />
NOTE: This message is based on the filename being suspicious, and is not<br />
based on an analysis of the file contents. It is up to you to examine the<br />
file and decide whether it is actually an IP list file related to a DDOS<br />
tool.<br />
/yiming/stacheldrahtV4/leaf/td: stacheldraht daemon<br />
/yiming/stacheldrahtV4/telnetc/client: stacheldraht client<br />
/yiming/stacheldrahtV4/td: stacheldraht daemon<br />
/yiming/stacheldrahtV4/client: stacheldraht client<br />
/yiming/stacheldrahtV4/mserv: stacheldraht master</p>
<p>ALERT: One or more DDOS tools were found on your system.<br />
Please examine LOG and take appropriate action.</p>
<p>看来这台设备的攻击守护程序还不少呢，系统管理员要注意啦!</p>
<p>这个软件可从下面的地址得到：http://www.fbi.gov/nipc/trinoo.htm 。</p>
<p>其次，封掉不必要的UDP服务，如echo,chargen,减少udp攻击的入口。</p>
<p>第三，在路由器连接骨干网络的端口结合采用CEF和ip verify unicast reverse-path，挡住一部分ip spoof,syn的攻击。同时使用access control lists将可能被使用的网络保留地址封掉。 借助使用CAR技术来限制 ICMP 报文大小。具体使用可查阅cisco网站。</p>
<p>第四，在敏感主机如www服务器使用ip filter软件。</p>
<p>截至目前，实际很彻底的防御手段还没有出现，但采用上述做法可以较大地减小不安全性。</p>
<p>Internet的发展，永远是一场不会停止的网络安全攻与防的较量。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.keelii.com/ddos%e6%94%bb%e5%87%bb%e5%8e%9f%e7%90%86%e5%8f%8a%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

