<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[PureCSS]]></title>
  <subtitle type="html"><![CDATA[深入学习CSS]]></subtitle>
  <id>/</id>
  <link rel="alternate" type="text/html" href="/" /> 
  <link rel="self" type="application/atom+xml" href="/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2008-12-29T14:30:57+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[学CSS一点心得]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=7" label="原创文章" /> 
	  <updated>2008-12-29T14:30:57+08:00</updated>
	  <published>2008-12-29T14:30:57+08:00</published>
		  <summary type="html"><![CDATA[学习CSS有了一定基础后，有的人会觉得好象没有什么学的．因为知道一些基本的理论性的东西．CSS说它容易是因为它的知识点有限．说它难学就在于各浏览器对CSS的支持程度不同．<br/>如何深入学习我给出以下几点见意：<br/><br/>１.去找机会多做一些项目，公司的，或是外包的，哪怕你没有人民币挣也要做．<br/>这一条并不是多做就会好有的效果，有的人做的项目不少总是按着老的思路去做，做了很多，水平也不会有太大的提高，提高的也只能是熟练度．每一次在做的过程中要学会去思考，看看我们有没有更优化的的方法去实现同一个效果．多说一个题外话：有一个错误的观点认为HACK是不好的．想法也是错的．我们在做页面时原则是不使用HACK，但是如果在特别需求上有时还是要使用，前提是你不用HACK不行，一些人的能力有限，所以他没有办法了就用HACK，很多时候可以换个思路就可以不用HACK.多说了这一点儿．要做完项目时遇到了新的问题，一定要做笔记下来，以后忘了也可以知道在哪能查到这个问题．<br/><br/>２.多去BBS，这样可以多看看一些别人项目中遇到的问题．这是一个日积月累的过程，你看的东西多了．掌握的多了，因为你做的项目是有限的，不可能把所有的问题都遇到，别人遇到的你去思考，看如何解决．或看其它人如何解决这个问题的．当你在项目中遇到这个问题，你就可以不用在多费时间就几钟的事了．有经验与没有经验的区别也就是这一点，有经验的人不是天才，是他做的东西多了，一看就明白知道如何解决．而没有经验的人会现想这个问题如何解决，那可以要花好多时间的．<br/><br/>３.多看一些国外的好的CSS网站，CSS代码是公开的，可以很方便的看到．分析他们的页面和CSS．从好的网站你会学到很多东西，和你已有的一对比，你会发现他们的思路要比你开阔的多，也优秀的多．<br/><br/>在学的过程中都会经历过几个踏步不前的状态，每提高到了一个小阶段会觉得没有什么学的，这种情况是正常的．是因为你的学习思路受限，但在这个不前的这个时期过了之后你一定会发现你要去学的东西的，然后你又会有一个新的止升阶段．<br/>我在说几个你要学的技能．<br/><br/>１.查找页面错误的能力，会用FIREBUG．这个插件很好．<br/><br/>２.页面错误提前预想．一个简单的例子，如你做的页面是静态的，你应该想到动态加入数据后页面可能会出现的情况．<br/><br/>３.不会JS也要知道JS实现的原理．这样你才知道如何做一个以后要加JS的静态页．<br/>．．．<br/>就说这些吧．]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=696" /> 
	  <id>/default.asp?id=696</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[终结IE6下背景图片闪烁问题]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=18" label="兼容性" /> 
	  <updated>2008-12-26T16:20:43+08:00</updated>
	  <published>2008-12-26T16:20:43+08:00</published>
		  <summary type="html"><![CDATA[<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">a {}{<br/>&nbsp;&nbsp;background:url(images/normal.gif);<br/>}<br/>a:hover {}{<br/>&nbsp;&nbsp;background:url(images/hover.gif);<br/>}<br/></div></div><br/>如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片；而IE6在这里有一个bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白，令人极度不爽。<br/><br/>一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的，效果差强人意。今天无意中从一个老外的网站上发现了一个比较妥善的解决方案，具体来说就是在页面中加入一段简单的javascript脚本，告诉ie6：本地有背景图片的话就不要麻烦服务器了。<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">document.execCommand(&#34;BackgroundImageCache&#34;,false,true);</div></div><br/>关于这段脚本的放置方式有两种：<br/><br/>1.纯css方式，在css中加入如下代码<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html {}{<br/>&nbsp;&nbsp;&nbsp;&nbsp;filter: e&#173;xpression(document.execCommand(&#34;BackgroundImageCache&#34;, false, true));<br/>}</div></div><br/>2.随便在页面中哪个位置（head、body或者onload）调用上面提及的脚本，例如：<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;script type=&#34;text/javascript&#34;&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.execCommand(&#34;BackgroundImageCache&#34;, false, true);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</div></div><br/>鉴于e&#173;xpression严重影响浏览器效率，建议采用第二种方式。<br/><br/>最后，总结完整方案：普通、hover状态对应的图片合并成一张，css中通过background-postion控制其位置，页面中加入从缓存读取背景图片的javascript脚本。<br/><br/>附英文地址 <a href="http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker" target="_blank" rel="external">http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker</a>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=695" /> 
	  <id>/default.asp?id=695</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[关于前端开发工程师的地域、薪水、工龄、技能的调查]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=10" label="技术文档" /> 
	  <updated>2008-12-22T09:22:23+08:00</updated>
	  <published>2008-12-22T09:22:23+08:00</published>
		  <summary type="html"><![CDATA[关于前端开发工程师的地域、薪水、工龄、技能的调查<br/><a href="http://www.css88.com/article.asp?id=534" target="_blank" rel="external">http://www.css88.com/article.asp?id=534</a><br/><br/>调查结果页：<br/><a href="http://spreadsheets.google.com/ccc?key=pxZwBho7uqI2HqIXBBJ-YWA" target="_blank" rel="external">http://spreadsheets.google.com/ccc?key=pxZwBho7uqI2HqIXBBJ-YWA</a>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=694" /> 
	  <id>/default.asp?id=694</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[[yui]Yahoo!User Interface Libray 介绍]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=10" label="技术文档" /> 
	  <updated>2008-12-18T11:24:23+08:00</updated>
	  <published>2008-12-18T11:24:23+08:00</published>
		  <summary type="html"><![CDATA[<h3>第一章 简介</h3>
<p>Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式发布，它们遵循<a href="http://developer.yahoo.com/yui/license.txt"><font color="#1a8bc8">BSD</font></a>协议并且可以免费使用。可以从Sourceforge站点<a href="http://sourceforge.net/projects/yui"><font color="#1a8bc8">下载</font></a>完整的项目文件，同时包含相关文档和示例。</p>
<p>yui项目开发人员的BLOG：<a href="http://yuiblog.com/"><font color="#1a8bc8">YUI Blog</font></a>，交流社区：<a href="http://groups.yahoo.com/group/ydn-javascript"><font color="#1a8bc8">ydn-javaScript on Yahoo! Groups</font></a>。</p>
<p>准备工作：</p>
<p>1、 下载yui</p>
<p>yui项目文件已经发布在Sourceforge站点，文件包含相关文档，示例和代码。</p>
<p>注：Yahoo没有为yui的运行提供免费的运行环境，你需要运行在你在即Web服务器上。</p>
<p>2、 在你的网页中加入你需要的类库文件</p>
<p>为了使用yui中的组件你必须在你的页面文件中用&lt;script&gt;指定相关组件的类库文件地址。如果该组件依赖于其他组件，你必须使用&lt;script&gt;指定所依赖的组件的类库文件地址。</p>
<p>3、 如果有必要，在页面中加入CSS文件</p>
<p>某些yui的控件包含一个相应的CSS文件，用来设定控件的样式。此时，你必须在页面中使用&lt;style&gt;指定相应的CSS文件的地址。你可以通过修改相应的CSS文件达到你想要的效果。</p>
<p>4、 浏览相关文档和示例</p>
<p>每一个组件都包含详细的API文档，并且提供了常用的例子。学习完后，回顾一下所有的API，做到心中有数。因为对于API理解的好坏将影响你对yui的使用效果。</p>
<p>&nbsp;</p>
<h3>第二章 组件介绍</h3>
<p>Yui组件分成2类：工具包和控件库</p>
<p>Yui 工具包</p>
<p>Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。</p>
<p>动画（<a href="http://developer.yahoo.com/yui/animation/"><font color="#1a8bc8">Animation</font></a>）：在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个&ldquo;电影效果（cinematic effects）&rdquo;。这些效果将在你的页面发生变化的时候给用户更好的体验。</p>
<p>连接管理（<a href="http://developer.yahoo.com/yui/connection/"><font color="#1a8bc8">Connection Manager </font></a>）：这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（form posts），错误捕获（error handling）和callbacks的全面支持。该工具包也支持文件的上传管理。</p>
<p><a href="http://developer.yahoo.com/yui/dom/"><font color="#1a8bc8">DOM</font></a>：DOM工具包提供更简单的DOM脚本的功能调用方式，包含元素的位置和CSS样式的管理。</p>
<p>拖放（<a href="http://developer.yahoo.com/yui/dragdrop/"><font color="#1a8bc8">Drag and Drop</font></a>）：创建可拖放的对象。为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。这个工具包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。</p>
<p>事件（<a href="http://developer.yahoo.com/yui/event/"><font color="#1a8bc8">Event</font></a>）：这个神奇的管理类库给你提供一种简单安全的方法访问浏览器的事件（比如点击和键盘操作）。这个事件封包中还包含了自定义事件对象，它为你的程序交互提供一种发布和订阅事件的机制。</p>
<p>&nbsp;</p>
<p>yui控件：</p>
<p>yui控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。</p>
<p>这些控件包括：</p>
<p>自动完成（<a href="http://developer.yahoo.com/autocomplete/index.html"><font color="#1a8bc8">AutoComplete</font></a>）控件：自动完成控件为文本输入提供一种渐进式的用户体验（streamline user interactions）。控件会提供相似项列表和基于多样化的数据格式的提前键入功能（type-ahead functionality based on a variety of data-source formats），并且可以通过XMLHttpRequest访问服务端的数据。</p>
<p>日历（<a href="http://developer.yahoo.com/calendar/"><font color="#1a8bc8">Calendar</font></a>）控件：一个用来日期选择的动态图形控件。</p>
<p>容器（<a href="http://developer.yahoo.com/container/index.html"><font color="#1a8bc8">Container</font></a>）控件：一组模仿windows样式的控件，他们包括<a href="http://developer.yahoo.com/container/tooltip/index.html"><font color="#1a8bc8">Tooltip</font></a>, <a href="http://developer.yahoo.com/container/panel/index.html"><font color="#1a8bc8">Panel</font></a>, <a href="http://developer.yahoo.com/container/dialog/index.html"><font color="#1a8bc8">Dialog</font></a>&nbsp;和 <a href="http://developer.yahoo.com/container/simpledialog/index.html"><font color="#1a8bc8">SimpleDialog</font></a>。其中<a href="http://developer.yahoo.com/container/module/index.html"><font color="#1a8bc8">Module</font></a>&nbsp;和 <a href="http://developer.yahoo.com/container/overlay/index.html"><font color="#1a8bc8">Overlay</font></a>控件提供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件。</p>
<p>日志（<a href="http://developer.yahoo.com/logger/index.html"><font color="#1a8bc8">Logger</font></a>）控件：提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screen console）、Firefox的扩展组件FireBug，或者Safari的Javascript控制台。yui的Debug组件将完整的记录输出信息和调试信息。</p>
<p>菜单（<a href="http://developer.yahoo.com/menu/index.html"><font color="#1a8bc8">Menu</font></a>）控件：利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascript构造一个菜单，can be layered on top of semantic unordered lists。</p>
<p>滑块（<a href="http://developer.yahoo.com/slider/"><font color="#1a8bc8">Slider</font></a>）控件：提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。</p>
<p>树形（<a href="http://developer.yahoo.com/treeview/"><font color="#1a8bc8">TreeView</font></a>）控件：提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动态加载。节点元素的展现可以通过CSS修改，比如文件夹视图，TO－DO任务列表或者其他可视化处理</p>
<p>&nbsp;</p>
<p>第三章 yui的CSS资源</p>
<p>为了让CSS能符合不同等级的浏览器（<a href="http://developer.yahoo.com/articles/gbs/gbs.html"><font color="#1a8bc8">A-Grade browsers</font></a>）的标准，我们想了很多。我们把这些作为yui类库的一部分共享出来，希望能在这里得到促进，获得一个简洁的，可维护并在浏览器中表现优秀的设计。</p>
<p>页面网格样式（<a href="http://developer.yahoo.com/grids/"><font color="#1a8bc8">CSS Page Grids</font></a>）：7个基本的用css组织子组件的页面框架，支持130种不通的页面布局。</p>
<p>标准的CSS字体（<a href="http://developer.yahoo.com/fonts/"><font color="#1a8bc8">Standard CSS Fonts</font></a>）：标准的跨浏览器字体样式和大小展现。</p>
<p>标准的CSS排列（<a href="http://developer.yahoo.com/reset/"><font color="#1a8bc8">Standard CSS Reset</font></a>）：使用这些CSS声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。</p>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=693" /> 
	  <id>/default.asp?id=693</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[10款浏览器CSS Reset的方法]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=10" label="技术文档" /> 
	  <updated>2008-12-02T14:04:12+08:00</updated>
	  <published>2008-12-02T14:04:12+08:00</published>
		  <summary type="html"><![CDATA[知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。<br/><br/>正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">* { padding: 0; margin: 0; border: 0; }</div></div><br/>这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, <br/>form,fieldset,input,textarea,p,blockquote,th,td { <br/>padding: 0; <br/>margin: 0; <br/>} <br/>table { <br/>border-collapse: collapse; <br/>border-spacing: 0; <br/>} <br/>fieldset,img { <br/>border: 0; <br/>} <br/>address,caption,cite,code,dfn,em,strong,th,var { <br/>font-weight: normal; <br/>font-style: normal; <br/>} <br/>ol,ul { <br/>list-style: none; <br/>} <br/>caption,th { <br/>text-align: left; <br/>} <br/>h1,h2,h3,h4,h5,h6 { <br/>font-weight: normal; <br/>font-size: 100%; <br/>} <br/>q:before,q:after { <br/>content:”; <br/>} <br/>abbr,acronym { border: 0; <br/>}</div></div><br/>OK，相信你也已经了解了CSS重设的目的，或许你也可以根据自己的喜好，写一个自己的CSS重设系统，毕竟大家的需求和习惯的不同的。而你可以参照下面的几款：<br/><br/><strong>Ateneu Popular CSS Reset</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html, body, div, span, applet, object, iframe, h1, h2, h3, <br/>h4, h5, h6, p, blockquote, pre, a, abbr, acronym, <br/>address, big, cite, code, del, dfn, em, font, img, ins, <br/>kbd, q, s, samp, small, strike, strong, sub, sup, tt, <br/>var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, <br/>table, caption, tbody, tfoot, thead, tr, th, td { <br/>margin: 0; <br/>padding: 0; <br/>border: 0; <br/>outline: 0; <br/>font-weight: inherit; <br/>font-style: inherit; <br/>font-size: 100%; <br/>font-family: inherit; <br/>vertical-align: baseline; <br/>} <br/>:focus { outline: 0;} <br/>a, a:link, a:visited, a:hover, a:active{text-decoration:none} <br/>table { border-collapse: separate;border-spacing: 0;} <br/>th, td {text-align: left; font-weight: normal;} <br/>img, iframe {border: none; text-decoration:none;} <br/>ol, ul {list-style: none;} <br/>input, textarea, sel&#101;ct, button {font-size: 100%;font-family: inherit;} <br/>sel&#101;ct {margin: inherit;} <br/>hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}<br/></div></div><br/>Chris Poteet’s Reset CSS<div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">* { <br/>vertical-align: baseline; <br/>font-family: inherit; <br/>font-style: inherit; <br/>font-size: 100%; <br/>border: none; <br/>padding: 0; <br/>margin: 0; <br/>} <br/>body { <br/>padding: 5px; <br/>} <br/>h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { <br/>margin: 20px 0; <br/>} <br/>li, dd, blockquote { <br/>margin-left: 40px; <br/>} <br/>table { <br/>border-collapse: collapse; <br/>border-spacing: 0; <br/>}<br/></div></div><br/><strong>Eric Meyer Reset CSS</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html, body, div, span, applet, object, iframe, table, caption, <br/>tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, <br/>kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, <br/>h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, <br/>acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, <br/>fieldset, form, label, legend { <br/>vertical-align: baseline; <br/>font-family: inherit; <br/>font-weight: inherit; <br/>font-style: inherit; <br/>font-size: 100%; <br/>outline: 0; <br/>padding: 0; <br/>margin: 0; <br/>border: 0; <br/>} <br/>:focus { <br/>outline: 0; <br/>} <br/>body { <br/>background: white; <br/>line-height: 1; <br/>color: black; <br/>} <br/>ol, ul { <br/>list-style: none; <br/>} <br/>table { <br/>border-collapse: separate; <br/>border-spacing: 0; <br/>} <br/>caption, th, td { <br/>font-weight: normal; <br/>text-align: left; <br/>} <br/>blockquote:before, blockquote:after, q:before, q:after { <br/>content: &#34;&#34;; <br/>} <br/>blockquote, q { <br/>quotes: &#34;&#34; &#34;&#34;; <br/>}<br/></div></div><br/><strong>Tantek Celik Reset CSS</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">:link,:visited { text-decoration:none } <br/>ul,ol { list-style:none } <br/>h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } <br/>ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input <br/>{ margin:0; padding:0 } <br/>a img,:link img,:visited img { border:none } <br/>address { font-style:normal }</div></div><br/><strong>Christian Montoya Reset CSS</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html, body, form, fieldset { <br/>margin: 0; <br/>padding: 0; <br/>font: 100%/120% Verdana, Arial, Helvetica, sans-serif; <br/>} <br/>h1, h2, h3, h4, h5, h6, p, pre, <br/>blockquote, ul, ol, dl, address { <br/>margin: 1em 0; <br/>padding: 0; <br/>} <br/>li, dd, blockquote { <br/>margin-left: 1em; <br/>} <br/>form label { <br/>cursor: pointer; <br/>} <br/>fieldset { <br/>border: none; <br/>} <br/>input, sel&#101;ct, textarea { <br/>font-size: 100%; <br/>font-family: inherit; <br/>}<br/></div></div><br/><strong>Rudeworks Reset CSS</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">* { <br/>margin: 0; <br/>padding: 0; <br/>border: none; <br/>} <br/>html { <br/>font: 62.5% &#34;Lucida Grande&#34;, Lucida, Verdana, sans-serif; <br/>text-shadow: #000 0px 0px 0px; <br/>} <br/>ul { <br/>list-style: none; <br/>list-style-type: none; <br/>} <br/>h1, h2, h3, h4, h5, h6, p, pre, <br/>blockquote, ul, ol, dl, address { <br/>font-weight: normal; <br/>margin: 0 0 1em 0; <br/>} <br/>cite, em, dfn { <br/>font-style: italic; <br/>} <br/>sup { <br/>position: relative; <br/>bottom: 0.3em; <br/>vertical-align: baseline; <br/>} <br/>sub { <br/>position: relative; <br/>bottom: -0.2em; <br/>vertical-align: baseline; <br/>} <br/>li, dd, blockquote { <br/>margin-left: 1em; <br/>} <br/>code, kbd, samp, pre, tt, var, input[type=&#39;text&#39;], textarea { <br/>font-size: 100%; <br/>font-family: monaco, &#34;Lucida Console&#34;, courier, mono-space; <br/>} <br/>del { <br/>text-decoration: line-through; <br/>} <br/>ins, dfn { <br/>border-bottom: 1px solid #ccc; <br/>} <br/>small, sup, sub { <br/>font-size: 85%; <br/>} <br/>abbr, acronym { <br/>text-transform: uppercase; <br/>font-size: 85%; <br/>letter-spacing: .1em; <br/>border-bottom-style: dotted; <br/>border-bottom-width: 1px; <br/>} <br/>a abbr, a acronym { <br/>border: none; <br/>} <br/>sup { <br/>vertical-align: super; <br/>} <br/>sub { <br/>vertical-align: sub; <br/>} <br/>h1 { <br/>font-size: 2em; <br/>} <br/>h2 { <br/>font-size: 1.8em; <br/>} <br/>h3 { <br/>font-size: 1.6em; <br/>} <br/>h4 { <br/>font-size: 1.4em; <br/>} <br/>h5 { <br/>font-size: 1.2em; <br/>} <br/>h6 { <br/>font-size: 1em; <br/>} <br/>a, a:link, a:visited, a:hover, a:active { <br/>outline: 0; <br/>text-decoration: none; <br/>} <br/>a img { <br/>border: none; <br/>text-decoration: none; <br/>} <br/>img { <br/>border: none; <br/>text-decoration: none; <br/>} <br/>label, button { <br/>cursor: pointer; <br/>} <br/>input:focus, sel&#101;ct:focus, textarea:focus { <br/>background-color: #FFF; <br/>} <br/>fieldset { <br/>border: none; <br/>} <br/>.clear { <br/>clear: both; <br/>} <br/>.float-left { <br/>float: left; <br/>} <br/>.float-right { <br/>float: right; <br/>} <br/>body { <br/>text-align: center; <br/>} <br/>#wrapper { <br/>margin: 0 auto; <br/>text-align: left; <br/>}<br/></div></div><br/><strong>Anieto2K Reset CSS</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html, body, div, span, applet, object, iframe, <br/>h1, h2, h3, h4, h5, h6, p, <br/>blockquote, pre, a, abbr, acronym, address, big, <br/>cite, code, del, dfn, em, font, img, <br/>ins, kbd, q, s, samp, small, strike, <br/>strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, <br/>fieldset, form, label, legend, <br/>table, caption, tbody, tfoot, thead, tr, th, td, <br/>center, u, b, i { <br/>margin: 0; <br/>padding: 0; <br/>border: 0; <br/>outline: 0; <br/>font-weight: normal; <br/>font-style: normal; <br/>font-size: 100%; <br/>font-family: inherit; <br/>vertical-align: baseline <br/>} <br/>body { <br/>line-height: 1 <br/>} <br/>:focus { <br/>outline: 0 <br/>} <br/>ol, ul { <br/>list-style: none <br/>} <br/>table { <br/>border-collapse: collapse; <br/>border-spacing: 0 <br/>} <br/>blockquote:before, blockquote:after, q:before, q:after { <br/>content: &#34;&#34; <br/>} <br/>blockquote, q { <br/>quotes: &#34;&#34; &#34;&#34; <br/>} <br/>input, textarea { <br/>margin: 0; <br/>padding: 0 <br/>} <br/>hr { <br/>margin: 0; <br/>padding: 0; <br/>border: 0; <br/>color: #000; <br/>background-color: #000; <br/>height: 1px <br/>}<br/></div></div><br/><strong>CSSLab CSS Reset</strong><div class="UBBPanel"><div class="UBBTitle"><img src="/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">html, body, div, span, applet, object, iframe, h1, h2, h3, <br/>h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, <br/>big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, <br/>small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, <br/>fieldset, form, label, legend, table, caption, tbody, tfoot, <br/>thead, tr, th, td { <br/>margin: 0; <br/>padding: 0; <br/>border: 0; <br/>outline: 0; <br/>font-weight: inherit; <br/>font-style: inherit; <br/>font-size: 100%; <br/>font-family: inherit; <br/>vertical-align: baseline; <br/>} <br/>:focus { <br/>outline: 0; <br/>} <br/>table { <br/>border-collapse: separate; <br/>border-spacing: 0; <br/>} <br/>caption, th, td { <br/>text-align: left; <br/>font-weight: normal; <br/>} <br/>a img, iframe { <br/>border: none; <br/>} <br/>ol, ul { <br/>list-style: none; <br/>} <br/>input, textarea, sel&#101;ct, button { <br/>font-size: 100%; <br/>font-family: inherit; <br/>} <br/>sel&#101;ct { <br/>margin: inherit; <br/>} <br/>/* Fixes incorrect placement of numbers in ol’s in IE6/7 */ <br/>ol { margin-left:2em; } <br/>/* == clearfix == */ <br/>.clearfix:after { <br/>content: &#34;.&#34;; <br/>display: block; <br/>height: 0; <br/>clear: both; <br/>visibility: hidden; <br/>} <br/>.clearfix {display: inline-block;} <br/>* html .clearfix {height: 1%;} <br/>.clearfix {display: block;}<br/></div></div><br/>像你看到的，这些都大同小异，需求不同，方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset，也用了Yahoo的代码。你，有自己的CSS Reset体系吗？或许可以分享出来！]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=691" /> 
	  <id>/default.asp?id=691</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[七则CSS技巧帮助你改善优化SEO ]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=37" label="SEO" /> 
	  <updated>2008-11-05T16:08:09+08:00</updated>
	  <published>2008-11-05T16:08:09+08:00</published>
		  <summary type="html"><![CDATA[原文来自：<a target="_blank" href="http://seo2.0.onreact.com/top-7-css-tricks-for-better-seo" rel="external">Top 7 CSS Tricks for Better SEO</a><br/>翻译整理：<a target="_blank" href="http://ximicc.com/" rel="external">西米CC</a><br/><br/>我们都知道，要构建一个对用户和Google两面都要好的网站是件不容易的事情。如果我们要迁就Google让它尽可能的发现网站的价值，那么在设计网站时就会在用户体验上大打折扣。Google的蜘蛛爬虫至今仍无法很好的辨识一些高级的Web技术，如Flash、Ajax等，它们有时候就像小孩子一样，你需要手把手的去引导和帮助它们去发现并理解网站质素。值得庆幸的是也有很多的CSS方案可以弥补这一缺陷，虽然本文标题中的&#34;技巧&#34;感觉有点诡计、花招的意味，事实上这也只是迎合Google的一些手段而已。试想，到底是我们存心想去&#34;欺骗&#34;Google，还是Google让我们的Web开发总是不得安生…<br/><br/>虽然搜索引擎不止Google一个，但是它们很多甚至比Google还难伺候，再者鉴于其绝对优势的影响力，所以本文探讨的重点还是放在Google上。下面七条有利于SEO的CSS诀窍，排名不分先后：<br/><br/><strong>1.合理利用CSS分页技术</strong><br/><br/>Google在评定长篇幅文章页面权重时存在很严重的问题，一般而言长篇幅页面较之短篇幅页面有着更大的权重。但是就用户体验角度来讲，我们往往希望用户能看完全文，并且不需要去拖拉滚动条或打开另外一张新的页面继续阅读。<br/><br/>解决方案就是CSS分页。这不就是文本隐藏？事实上隐藏文本跟隐藏链接、小文本等手段一样，是较为古老的干涉搜索引擎规律的作弊形式，也就是常说的&#34;黑帽SEO&#34;的一种，所以千万不要去用它。而CSS分页与文本隐藏的实质大不相同，它能把长文本分割成易辨识的几部分，并仍处于同一页面中，某种程度上有点选项卡的意思。在运用CSS分页的时候，也要留意Google页面权重判定的一个限制：对于一个体积较大的页面，爬虫一般不会进行很完整的抓取。<br/><br/><strong>2.绝对定位</strong><br/><br/>页面中越靠近顶端的内容越能得到Google的关注。Google爬虫对页面内容的&#34;浏览&#34;并不像人为阅读一样针对最终解析的页面效果，它们是在源码中进行抓取的，所以如果你网站的结构比较复杂，比如有很多导航、脚本或其它小玩意儿，Google爬虫可能还没蠕到主要内容就停止抓取了。在这种情况下，你可以考虑把主内容体现在页面源代码较前的位置，然后利用CSS中的绝对定位将其定位网页中适当的位置，这样用户浏览的时候主内容也就不会跑到导航菜单等元素的前面去了。<br/><br/><strong>3.使用H1,H2…H*定义标题</strong><br/><br/>在HTML中标题元素H1、H2等总是默认比其它文本大一些，所以长久以来很多网页设计者都习惯用DIV或SPAN代替H*标签作为标题文本的容器，然后自由的进行样式设定。但是如果这么做的话，Google将无从知晓那些文本是页面内容的标题，在一定程度上影响了页面权重的判断。事实上现在的CSS也能对H1等标签进行很丰富的样式定义，我们完全没有必要采用之前那种舍本逐末的做法。<br/><br/><strong>4.标题文本SIFR图像替换法</strong><br/><br/>很多人喜欢在标题上使用文本替换技术，简而言之就是利用CSS将标题文本隐藏，然后替换以外观更加丰富的图像。图像替换文本技术有很多种实现方法，具体可以参考西米CC中的图像替换文本技术一文，这些方法其中有一些考虑比较周全，也有一些相对而言比较简陋。也许你又会问了，这不又是文本隐藏么？是的，有些替换技术会对SEO带来一些负面影响，因为爬虫无法抓取到标题本身。<br/><br/>幸运的是，现在有一种称之为SIFR的图像替换文本方法得到了Google的认可，它可以用Flash形式来展示标题，在其中你可以灵活的使用各种字体，并且能够在代码中确保H*标签被辨识出来。引用:<br/><div class="UBBPanel"><div class="UBBTitle"><img src="/images/quote.gif" style="margin:0px 2px -3px 0px" alt="引用内容"/> 引用内容</div><div class="UBBContent">SIFR表示Scalable Inman Flash Replacement，即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。<br/><br/>使用SIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。SIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果。</div></div><br/><br/><strong>5.列表的运用</strong><br/><br/>现在大多数的SEO专家都认可了一个事实，那就是关键字密度并不是影响页面权重的主要因素，也就是说你的关键字在页面中出现20次还是5次对权重不会有实质性的影响，相反密度过大可能会被认作是作弊性质的关键字堆砌。但是假如你不是为了SEO，而是真的需要不断的重复一些字词该怎么办呢？那么就把它们放在列表标签里吧，不论是无序列表还是有序列表，Google不会将其中的字词重复视为作弊手段。<br/><br/>如果你不希望UL或OL以列表的形式展示在网页中，你可以用CSS改变其外观样式，使其与页面融合得更加和谐。有些牛人甚至把整站都用列表来实现，完全不把表格、DIV甚至SPAN运用到布局中。<br/><br/><strong>6.友情链接页Nofollow属性</strong><br/><br/>Nofollow属性是由Google领头新创的一个标签，目的是尽量减少垃圾链接对搜索引擎的影响，只需在链接标签中加入rel=&#34;nofollow&#34;即可。这种情况下，相当于告诉搜索引擎，该链接所指向的网页非我所能控制，对其内容不予置评，这样搜索引擎在计算目标的网站的链接广泛度时，将会把这个链接排除在外。<br/><br/>Google在鉴定页面权重时，会特别关注那些包含很多外链的页面上，使用Nofollow能让Google不会把那些友情链接页误认为是很重要的页面。别把权重浪费在一些无关的页面上，要尽量把权限集中到重要的页面上，一个rel=&#34;nofollow&#34;属性能很好的避免权重的浪费。<br/><br/><strong>7.纯CSS导航菜单</strong><br/><br/>很多人以为纯CSS菜单并不会对SEO产生实质性的影响，所以在设计的时候还是很习惯的加入一些JS或其它东西来增强菜单的动态效果。事实上如果要说纯CSS菜单有什么好处，其原理就类似为什么我们要抛弃表格而采用DIV布局一样，精简扼要的页面代码能使页面加载速度得到很大的提高，这在spider爬行时是非常有利的，否则对页面的收录及权重肯定会有一定的影响。更何况现在CSS强大的样式控制能力，足够让我们制作出实用而又精巧的导航菜单。<br/><br/>以上所论述的七个方面，并不是什么很高级的知识或技术，也不会对一个网站的SEO效果产生决定性的作用，但不可否认的是它们或多或少会有些正当合法的帮助，而且有助于让你把CSS由一种技术提升为一种理念。如果说你觉得SPAM对SEO效果更明显，我只能说那是种很愚蠢的想法。顺便说一句，我并不喜欢什么白帽SEO的概念，对我而言一种方法或手段要么就是SEO，要么就是SPAM。<br/>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=690" /> 
	  <id>/default.asp?id=690</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[网站建设报价悬殊背后的潜规则]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=34" label="未分类" /> 
	  <updated>2008-10-29T11:01:43+08:00</updated>
	  <published>2008-10-29T11:01:43+08:00</published>
		  <summary type="html"><![CDATA[不少新手不谙行情，对有些网站起价几千，高则上万很不理解，他们更对一些网站工作者低廉的报价感兴趣，一千多块，以至于三四百块，这低廉的报价自然很吸引人，可是他们知道背后的的潜规则吗?如此悬殊报价，高到哪里，低在哪里，自然都是有说法的。<br/><br/>　　首先，要认准一个理，优质优价，低质低价，天下没有免费的午餐。网站功能不同，内容不同，有比较就有区别。 网站价格那么便宜，那便宜在哪个方面?便宜无非体现在以下几个方面：<br/><br/>　　1、在使用通用模板上信手拈来，抄袭网站现成模板。你想便宜，好，网站建设者到网站上找些同行业的模板，只要改些框架，改些图片，更有甚者只改个名称、或者改个地址就做成了，收你500，你肯定觉得便宜，物超所值，对网站建设者感激不尽，直到某一天你发现网站上还有和你网站很相似的另一个网站时你才知道便宜在哪里。<br/><br/>　　2、没有调查策划，内容都是借鉴而来的。专业的网站设计都是基于调查策划开始的，只有了解客户的行业、客群、竞争对手才可以有针对性地规划网站，做到反映行业特征、迎合客群、区别于竞争对手的要求。便宜的网站你就不要指望有这样的流程。 没有针对性设计，不同行业不同公司网站的宣传方式都会有所不同，需要网站来配合解决日常的一些客户问题也不尽相同，比如如果你是一家某机械代理销售企业，那么在网络上提供便捷的“维修查询”功能就非常让客户受用。而便宜网站一般就是“首页、简介、产品、联系”四大模块。<br/><br/>　　3、诱君入瓮法。先使用廉价的域名空间，如果你听到域名空间都是白送，肯定觉得好像很超值，且不说这样的域名空间的稳定性和速度会不会对你的客户浏览造成干扰困惑和不耐烦。等你第二年被服务商通知你空间域名要续费时你就知道免费午餐可不是长久的。至于多少钱，天知道是不是一个天价，到时你不给还不行，不给你的网站就等着关闭。<br/><br/>　　4、设计水平参差不同。聘请一个会使用网页编辑软件的工人工资和聘请一个设计师的工资相信是不一样的，就像同样会使用刀，医生和屠夫工资就不一样。同样的，软件只是工具，会用软件并不代表就具有某种职业资质! 便宜在编程水平，同上面一样的道理，好的程序员他可以保证网站程序的运作速度和运作稳定，还有保障客户资料、产品价格等商业机密的安全性。<br/><br/>　　5、根据没有设置供搜索引擎搜索的关键字。便宜的网站是不会帮你设搜索关键字的，甚至你会发现你网站关键字居然是别人公司的名称(用了别人公司网站模板的结果)，至于图片的替代关键字，那更是一省了之，这样的网站就不要指望被免费的搜索引擎收入了。<br/><br/>　　6、便宜在没有考虑兼容性。别指望便宜的网站会对网站进行兼容性测试，IE浏览器能打开就好了，至于到了用占国外客户大半使用量的Netscape、FireFox浏览器浏览，网页有没有四分五裂、有没有错位变形那就是你自己的事了。<br/><br/>　　7、便宜在没有良好的售后服务。便宜的网站为了更多的节约成本，他是不会有很好的售后服务的，甚至根本就没有考虑。他们也不会对你们的网站营销提供跟踪服务，及时修正错误，他们怕着下一个便宜的用户便宜的要求。而专业敬业的网站建设者常常会给客户提供专业的技术指导，帮助网站主提高技术，改正错误。<br/><br/>　　总之，便宜的网站是要付出高昂的代价的，没有真正便宜的东西，谁都想做赚本生意，网站也一样，便宜的最终结果是网站的质量大加折扣，最终损失的还是网站主自己。而只有给予做站者合理的报酬，才能在质上不扣量。]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=689" /> 
	  <id>/default.asp?id=689</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[外文翻译：CSS 期望表 （Wishlist）]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=9" label="国外译文" /> 
	  <updated>2008-10-14T15:01:52+08:00</updated>
	  <published>2008-10-14T15:01:52+08:00</published>
		  <summary type="html"><![CDATA[著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。<br/><br/>　　调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。<br/><br/>　　WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表(只选取最热门的项目)。<br/><br/>　　<strong>垂直居中</strong><br/><br/>　　<i>by michael lascarides</i><br/><br/>　　针对 block 对象的更容易的垂直居中设置。(div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者)<br/><br/>　　<strong>CSS 圆角</strong><br/><br/>　　<i>by Webmonkey</i><br/><br/>　　标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。<br/><br/>　　<strong>兼容所有主流浏览器的 CSS 2.1 与 CSS 3</strong><br/><br/>　　<i>by Erik</i><br/><br/>　　能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。<br/><br/>　　<strong>更好的嵌入字体</strong><br/><br/>　　<i>by Webmonkey</i><br/><br/>　　不要 sFIR, 不要图片，要真正的字体。<br/><br/>　　<strong>CSS 变量</strong><br/><br/>　　<i>by Jeffrey Jordan Way, via css-tricks.com</i><br/><br/>　　能定义诸如色彩值一类的变量<br/><br/>　　<strong>更好地支持 100% height</strong><br/><br/>　　<i>by JLR</i><br/><br/>　　设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。<br/><br/>　　<strong>可重复使用变量</strong><br/><br/>　　<i>by Neal Lindsay</i><br/><br/>　　比如:<br/><br/>　　@var mycolor = #0080FF<br/><br/>　　h1 { color: mycolor; }<br/><br/>　　div.containbox { border: 1px mycolor; }<br/><br/>　　<strong>浏览器一致性与定义顺序</strong><br/><br/>　　by JML<br/><br/>　　浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。<br/><br/>　　一句话复原<br/><br/>　　by Chris Pitzer<br/><br/>　　很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：<br/><br/>　　body { clear-default-styles:true; }<br/><br/>　　图形旋转与反转<br/><br/>　　by Stephen Bell<br/><br/>　　在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：<br/><br/>　　img .horiz { rotate:90; }<br/><br/>　　成组的 CSS 简化定义<br/><br/>　　by Volkan Görgülü, via css-tricks.com<br/><br/>　　如:<br/><br/>　　#foo h1, #foo h2, #foo h3<br/><br/>　　该为:<br/><br/>　　#foo [h1, h2, h3]<br/><br/>　　渐变<br/><br/>　　by Anonymous<br/><br/>　　以避免一条线一条线地实现渐变。<br/><br/>　　定位计算<br/><br/>　　by Anonymous<br/><br/>　　不使用 JavaScript 而是直接在 CSS 中实现：<br/><br/>　　left: ID1.Left + ID1.Width + 2px;<br/><br/>　　网格布局<br/><br/>　　by Kurt Krumme<br/><br/>　　table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型?<br/><br/>　　div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷(比如垂直居中，比如在 IE 中的众多 BUG)，如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。<br/><br/>　　使用 image 作 border<br/><br/>　　by Anonymous<br/><br/>　　应当可以用 image 作为 border，如：<br/><br/>　　border-right: url(&#39;image.png&#39;)<br/><br/>　　Multiple background images<br/><br/>　　by Brad<br/><br/>　　这一条是译者人为提前的。这个 CSS 功能非常有用，事实上，有了这个功能，完美实现 CSS 圆角就变得十分简单了。<br/><br/>　　所有浏览器支持统一标准<br/><br/>　　by Anonymous<br/><br/>　　这里特指 IE&lt;8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。<br/><br/>　　本文国际来源：<a href="http://www.webmonkey.com/blog/What_s_On_Your_CSS_Wishlist_" target="_blank" rel="external">http://www.webmonkey.com/blog/What_s_On_Your_CSS_Wishlist_</a><br/><br/>　　中文翻译来源：COMSHARP CMS 官方网站<br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=688" /> 
	  <id>/default.asp?id=688</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[译文：CSS Frameworks Collection Css框架收集]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=9" label="国外译文" /> 
	  <updated>2008-09-22T17:00:36+08:00</updated>
	  <published>2008-09-22T17:00:36+08:00</published>
		  <summary type="html"><![CDATA[<div class="add_info"> <strong>来 源：</strong>isparkle.cn <strong>作 
        者：</strong>mienflying <strong>时间：</strong>2008-08-14 
      </div>
<p>事实上让我们开始于什么是框架？</p>
<p>框架就是一个你可以用于你的网站项目的基本的概念上的结构体。</p>
<p>css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：</p>
<ul>
    <li><em>typography.css</em> 基本排版规则 </li>
    <li><em>grid.css</em> 基于网格的布局 </li>
    <li><em>layout.css</em> 通常的布局 </li>
    <li><em>form.css</em> for 表单样式 </li>
    <li><em>general.css</em> 更多通用规则 </li>
</ul>
<p><span id="more-88"></span><strong>不同的css框架</strong></p>
<h3><a href="http://elements.projectdesigns.org/" target="_blank">Elements CSS Frameworks</a></h3>
<p>Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读&nbsp;<a href="http://elements.projectdesigns.org/overview.html" target="_blank">概述</a> 了解更多。</p>
<h3><a href="http://developer.yahoo.com/yui/grids/" target="_blank">YUI Grids CSS </a></h3>
<p>基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。 <a href="http://developer.yahoo.com/yui/grids/" target="_blank">更多信息&hellip;</a></p>
<h3><a href="http://www.yaml.de/en/home.html" target="_blank">YAML CSS Framework </a></h3>
<p>Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。</p>
<h3><a href="http://code.google.com/p/blueprintcss/" target="_blank">Blueprint CSS</a></h3>
<p>Blueprint&nbsp;是一个 <strong>CSS 框架</strong>，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。</p>
<h3><a href="http://www.davidgoldingdesign.com/schema.html" target="_blank">Schema Web Design Framework</a></h3>
<p><strong>Schema</strong> 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。</p>
<h3><a href="http://sandbox.pocoo.org/clevercss/" target="_blank">CleverCSS</a></h3>
<p>CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。</p>
<h3><a href="http://devkick.com/lab/tripoli/" target="_blank">Tripoli CSS Framework</a></h3>
<p>Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。</p>
<h3><a href="http://eswat.ca/" target="_blank">ESWAT Web Project Framework</a></h3>
<p>ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。</p>
<h3><a href="http://code.google.com/p/css-boilerplate/" target="_blank">Boilerplate CSS Framework</a></h3>
<p>作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。</p>
<h3><a href="http://www.wymstyle.org/en/" target="_blank">WYMstyle CSS Framework </a></h3>
<p>这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。</p>
<h3><a href="http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/" target="_blank">Content with Style Framework</a></h3>
<p>下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板&hellip;</p>
<h3><a href="http://code.google.com/p/logicss/" target="_blank">Logicss&nbsp;Framework</a></h3>
<p>Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用&ldquo;*&rdquo;)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用<a href="http://logicss.googlecode.com/svn/trunk/tools/grid_builder.html" target="_blank" rel="nofollow">css代码生成工具</a>。</p>
<h3><a href="http://www.thatstandardsguy.co.uk/blog/2006/11/23/my-css-framework/" target="_blank">That Standards Guy CSS Framework</a></h3>
<p>* 只能调用单个样式文件<br />* 主样式需要取得CSS认证(WCAG 1.0)；<br />* 跨浏览器兼容性&mdash;包括Internet Explorer (IE) 5.x for Mac；<br />*&nbsp;IE Hacks使用独立文件；<br />* 快速创建模板；<br />* 少量注释/实例演示，可以节省时间来理解。</p>
<h3><a href="http://960.gs/" target="_blank">960 Grid System</a></h3>
<p>960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。</p>
<h3><a href="http://code.google.com/p/emastic/" target="_blank">Emastic CSS Framework</a></h3>
<p>Emastic&nbsp;是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用&ldquo;em&rdquo;布局。</p>
<p>原文地址：<a href="http://hiddenpixels.com/css-stuffs/css-frameworks/">http://hiddenpixels.com/css-stuffs/css-frameworks/</a>	
</p>]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=687" /> 
	  <id>/default.asp?id=687</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[多类选择器]]></title>
	  <author>
		 <name>purecss</name>
		 <uri>/</uri>
		 <email>purecss@126.com</email>
	  </author>
	  <category term="" scheme="/default.asp?cateID=10" label="技术文档" /> 
	  <updated>2008-09-08T10:09:35+08:00</updated>
	  <published>2008-09-08T10:09:35+08:00</published>
		  <summary type="html"><![CDATA[class同时包含warning和urgent的所有元素还有一个银色的背景。就可以写作：<br/>.warning.urgent{background:silver;}<br/>通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。可以看到，HTML源代码中包含class=&#34;urgent warning&#34;,但CSS选择器写作.warning.urgent。不过，这个规则还是会导致段落有一个银色的背景。<br/><br/>如果一个多类选择器包含类名列表（类名以空格分隔）中所没有的一个类名，匹配就会失败。考虑以下规则：<br/>p.warning.help{background:red;}<br/>不出所料，这个选择器将只匹配class包含词warning和help的那p元素。因此，如果一个p元素的class属性中只有词warning和urgent,将不能匹配。不过，它能匹配以下元素：<br/>&lt;p class=&#34;urgent warning help&#34;&gt;Help me!&lt;/p&gt;<br/><br/>提示：<br/>在ie7之前的版本中，不同平台的Internet Explorer都不能正确地处理多类选择器，对于这些较早的版本，尽管可以选择列表中的一个类名，但是要根据列表中的多个名进行选择时则无法工作。因此，p.warning可以正常工作，但p.warning.help会匹配class属性中包含help的所有p元素，因为help在选择器中最后出现。如果写作　p.help.warning,较老版本的Explorer就会匹配class值中包含warning的所有p元素，而不论其中是否出现help。]]></summary>
	  <link rel="alternate" type="text/html" href="/article.asp?id=686" /> 
	  <id>/default.asp?id=686</id>
  </entry>	
		
</feed>
