<?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>李清海&#039;s blog &#187; css</title>
	<atom:link href="http://www.liqinghai.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.liqinghai.com</link>
	<description>Just another wordpress weblog</description>
	<lastBuildDate>Tue, 08 Jun 2010 06:14:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
	
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.liqinghai.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>21+漂亮的Ajax Css表格</title>
		<link>http://www.liqinghai.com/21-fresh-ajax-css-tables/</link>
		<comments>http://www.liqinghai.com/21-fresh-ajax-css-tables/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 15:26:47 +0000</pubDate>
		<dc:creator>grubylee</dc:creator>
				<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://www.liqinghai.com/?p=195</guid>
		<description><![CDATA[貌似没有多少设计师愿意谈到表格设计。本文将介绍21种用CSS样式表设计的漂亮表格，并且结合Ajax技术对表格模式的数据进行排序和筛选。要是你也不知道如何设计一个漂亮的表格的话，相信这篇文章应该很有帮助的。 英文原文：21+ Fresh Ajax CSS Tables 1) Tablecloth – 一个轻量极的CSS表格,易于使用,比较清新.. 2) Create a table like Orbitz’s airline flights- 这个CSS表格教程告诉我们如何创建一个表格。并且在鼠标移动到一个单元格时，将提示单元格所在的行、列。 3) A CSS styled table- 这个对于一些功能对比的表格应该是相当合适的鸟，比如说IDC啊，产品销售什么的。 4) Sortable Table 额，这个可以进行数据检索啦。 5) Row Locking with CSS and JavaScript 停留的地方，需要用户再次点击解锁。 作者还发布了另一个教程，使用单选框锁定表格 6) Vertical scrolling tables 表格数据太多的话，可以使用一个滚动条。 7) Replicating a Tree table &#8211; 一个树形结构的CSS表格。 8 ) Paginate, sort and [...]]]></description>
			<content:encoded><![CDATA[<p>貌似没有多少设计师愿意谈到表格设计。本文将介绍21种用CSS样式表设计的漂亮表格，并且结合Ajax技术对表格模式的数据进行排序和筛选。要是你也不知道如何设计一个漂亮的表格的话，相信这篇文章应该很有帮助的。</p>
<p>英文原文：<a title="Permanent Link to 21+ Fresh Ajax CSS Tables" rel="bookmark" href="http://www.noupe.com/css/21-fresh-ajax-css-tables.html">21+ Fresh Ajax CSS Tables</a></p>
<p>1) <a rel="nofollow" href="http://cssglobe.com/lab/tablecloth/">Tablecloth</a> – 一个轻量极的CSS表格,易于使用,比较清新.. <img src='http://www.liqinghai.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':grin:' class='wp-smiley' /> </p>
<p style="text-align: center;"><a href="http://pic.liqinghai.com//2009/09/c1.gif"><img class="size-full wp-image-196 aligncenter" title="c1" src="http://pic.liqinghai.com//2009/09/c1.gif" alt="c1" width="416" height="173" /></a></p>
<p style="text-align: left;"><span id="more-195"></span></p>
<p style="text-align: left;">2) <a rel="nofollow" href="http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html">Create a table like Orbitz’s airline flights</a>- 这个CSS表格教程告诉我们如何创建一个表格。并且在鼠标移动到一个单元格时，将提示单元格所在的行、列。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c2.gif"><img class="aligncenter size-full wp-image-197" title="c2" src="http://pic.liqinghai.com//2009/09/c2.gif" alt="c2" width="416" height="173" /></a><br />
3) <a rel="nofollow" href="http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/">A CSS styled table</a>- 这个对于一些功能对比的表格应该是相当合适的鸟，比如说IDC啊，产品销售什么的。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c4.gif"><img class="aligncenter size-full wp-image-198" title="c4" src="http://pic.liqinghai.com//2009/09/c4.gif" alt="c4" width="416" height="173" /></a><br />
4) <a rel="nofollow" href="http://www.phatfusion.net/sortabletable/index.htm">Sortable Table</a> 额，这个可以进行数据检索啦。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c5.gif"><img class="aligncenter size-full wp-image-199" title="c5" src="http://pic.liqinghai.com//2009/09/c5.gif" alt="c5" width="416" height="173" /></a></p>
<p>5) <a rel="nofollow" href="http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html">Row Locking with CSS and JavaScript</a></p>
<p>停留的地方，需要用户再次点击解锁。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c3.gif"><img class="aligncenter size-full wp-image-200" title="c3" src="http://pic.liqinghai.com//2009/09/c3.gif" alt="c3" width="416" height="173" /></a>作者还发布了另一个教程，使用<a rel="nofollow" href="http://www.askthecssguy.com/examples/rowlock/example9.html">单选框锁定表格</a></p>
<p>6) <a rel="nofollow" href="http://www.cssplay.co.uk/menu/tablescroll.html">Vertical scrolling tables</a> 表格数据太多的话，可以使用一个滚动条。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c6.gif"><img class="aligncenter size-full wp-image-201" title="c6" src="http://pic.liqinghai.com//2009/09/c6.gif" alt="c6" width="416" height="173" /></a></p>
<p>7) <a rel="nofollow" href="http://www.maxdesign.com.au/presentation/tree-table/">Replicating a Tree table</a> &#8211; 一个树形结构的CSS表格。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c7.gif"><img class="aligncenter size-full wp-image-202" title="c7" src="http://pic.liqinghai.com//2009/09/c7.gif" alt="c7" width="416" height="173" /></a></p>
<p>8 ) <a rel="nofollow" href="http://dev.nozav.org/rails_ajax_table.html">Paginate, sort and search a table with Ajax and Rails</a> -这个例子提供一个动态接口，不需要重载整个页面，实现对表的更改。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c9.gif"><img class="aligncenter size-full wp-image-203" title="c9" src="http://pic.liqinghai.com//2009/09/c9.gif" alt="c9" width="416" height="173" /></a></p>
<p>9) <a rel="nofollow" href="http://www.maxdesign.com.au/presentation/tree-table/">Collapsible tables with DOM and CSS </a> &#8211; 此脚本中允许添加被折叠的表和展开表格的页脚箭头图像。</p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c8.gif"><img class="aligncenter size-full wp-image-204" title="c8" src="http://pic.liqinghai.com//2009/09/c8.gif" alt="c8" width="416" height="173" /></a></span></p>
<p>10) <a href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/">TableSorter plug-in for jQuery</a> &#8211; <span onmouseover="_tipon(this)" onmouseout="_tipoff()">它的主要功能包括多列排序，为TH元素提供RowSpan和</span>colspan支持<span onmouseover="_tipon(this)" onmouseout="_tipoff()">和其他功能支持。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c10.gif"><img class="aligncenter size-full wp-image-205" title="c10" src="http://pic.liqinghai.com//2009/09/c10.gif" alt="c10" width="417" height="121" /></a></span></p>
<p>11) <a href="http://www.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way">Stripe your tables the OO way</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c11.gif"><img class="aligncenter size-full wp-image-206" title="c11" src="http://pic.liqinghai.com//2009/09/c11.gif" alt="c11" width="416" height="173" /></a></p>
<p>12) <a href="http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php">MOOTOOLS javascript  Table Row &amp; Column highlighting</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c12.gif"><img class="aligncenter size-full wp-image-207" title="c12" src="http://pic.liqinghai.com//2009/09/c12.gif" alt="c12" width="416" height="173" /></a></p>
<p>13) <a href="http://icant.co.uk/csstablegallery/">CSS Table Gallery</a>-93样式表展示</p>
<p><a href="http://pic.liqinghai.com//2009/09/c13.gif"><img class="aligncenter size-full wp-image-208" title="c13" src="http://pic.liqinghai.com//2009/09/c13.gif" alt="c13" width="416" height="173" /></a></p>
<p>14) <a href="http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm">jQuery Table Filter</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c14.gif"><img class="aligncenter size-full wp-image-210" title="c14" src="http://pic.liqinghai.com//2009/09/c14.gif" alt="c14" width="416" height="173" /></a></p>
<p>15) <a href="http://www.millstream.com.au/upload/code/tablekit/">Sortable/Resizable/Editable TableKit</a> <span style="background-color: #e6ecf9;" onmouseover="_tipon(this)" onmouseout="_tipoff()">TableKit是HTML表格增强集合使用原型框架。</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"> TableKit行目前实行分段，列排序，列调整大小和单元格编辑使用Ajax。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c22.gif"><img class="aligncenter size-full wp-image-211" title="c22" src="http://pic.liqinghai.com//2009/09/c22.gif" alt="c22" width="416" height="173" /></a></span></p>
<p>16) <a href="http://www.kryogenix.org/code/browser/sorttable/">Make all your tables sortable</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c16.gif"><img class="aligncenter size-full wp-image-212" title="c16" src="http://pic.liqinghai.com//2009/09/c16.gif" alt="c16" width="416" height="173" /></a></p>
<p>17) <a href="http://www.alistapart.com/articles/zebratables/">Zebra Tables</a> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Alistapart为我们提供一个</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">很好的例子:</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">使用JavaScript和DOM的应用背景色的样式表单元格。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c17.gif"><img class="aligncenter size-full wp-image-214" title="c17" src="http://pic.liqinghai.com//2009/09/c17.gif" alt="c17" width="416" height="173" /></a></span></p>
<p>18 ) <a href="http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting">Standardista Table Sorting</a> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">是一种JavaScript模块，可让您任意列排序的HTML数据表。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c18.gif"><img class="aligncenter size-full wp-image-215" title="c18" src="http://pic.liqinghai.com//2009/09/c18.gif" alt="c18" width="416" height="173" /></a></span></p>
<p>19) <a href="http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html">GridView3 Example</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c19.gif"><img class="aligncenter size-full wp-image-216" title="c19" src="http://pic.liqinghai.com//2009/09/c19.gif" alt="c19" width="416" height="173" /></a></p>
<p>20) <a href="http://joomlicious.com/mootable/">Mootable</a> 因为他们是从标准表了，他们很好地降解。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c20.gif"><img class="aligncenter size-full wp-image-217" title="c20" src="http://pic.liqinghai.com//2009/09/c20.gif" alt="c20" width="416" height="173" /></a></p>
<p>21) <a href="http://tool-man.org/examples/sorting.html">Drag &amp; Drop Sortable Lists with JavaScript and CSS</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c21.gif"><img class="aligncenter size-full wp-image-218" title="c21" src="http://pic.liqinghai.com//2009/09/c21.gif" alt="c21" width="416" height="173" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.liqinghai.com/21-fresh-ajax-css-tables/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10款武装Web开发者的Firefox扩展插件</title>
		<link>http://www.liqinghai.com/10-popular-web-designer-tools-for-firefox/</link>
		<comments>http://www.liqinghai.com/10-popular-web-designer-tools-for-firefox/#comments</comments>
		<pubDate>Tue, 01 Sep 2009 15:45:07 +0000</pubDate>
		<dc:creator>grubylee</dc:creator>
				<category><![CDATA[SoftWare]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.liqinghai.com/?p=129</guid>
		<description><![CDATA[貌似不少使用WordPress的童鞋都是G.F.W组合，当然还使用流行的twitter啦。Firefox可以说是各位童鞋做主题时必不可少的好朋友了。下面为各位童鞋推荐10款插件武装一下自己的Firefox吧。有喜欢的自己下载啦，欢迎留言说说使用心得哦。 ColorZilla 各位童鞋看到别人网站上有好看的颜色，自己也想调出来怎么办呢？各种配色方案如何借鉴呢？当然是使用各类取色工具啦，像我以前就使用yinheli同学推荐的ColorPix。但是能不能在浏览器上直接进行呢？可以的，你安装ColorZilla插件吧。 download ColorZilla Firebug Firebug是Firefox下的一款优秀的开发类插件。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。 download Firebug FireFTP FireFTP是应用于Firefox的一个FTP扩展，设置简单，使用方便。详细介绍可以移步Firefox 的 FTP 扩展：FireFTP查看详细介绍。 download FireFTP IE Tab 许多旧网站对一些比较新的浏览器支持不是太好，浏览的时候会出现错位的问题。安装 IE Tab之后，在工具栏添加IE Tab按钮，点击就可以直接在 Firefox 的标签页中以内嵌的 IE 引擎浏览该网页，而不必去打开IE浏览器。 download IE Tab Picnik 是基于 Flash 的在线图形编辑工具 Picnik 的 Firefox 扩展，除了快捷发送网页中图片到 Picnik 进行处理和编辑之外，还能对于网页进行截图，然后发送到 Picnik。 download Picnik Stylish 可以自己设置页面显示的CSS，而且这个插件还可以搜索别人编辑好的脚本，方法为其实插件安装好之后，在状态栏的图标点右键，里面有选项“查找适合该页面的样式”，然后就可以找到网友们写好的CSS。 download Stylish Web Developer Toolbar Web Developer Toolbar 是一款运行于 Firefox 等Webkit内核浏览器基础之上的网页开发工具插件，内建强大的调试和设置功能，为众多的网页开发人员提供想当实用的功能，几乎是每个网页设计师必备的工具。 [...]]]></description>
			<content:encoded><![CDATA[<p>貌似不少使用<a href="http://www.liqinghai.com/tag/wordpress/">WordPress</a>的童鞋都是G.F.W组合，当然还使用流行的<a href="http://www.liqinghai.com/twitter/">twitter</a>啦。Firefox可以说是各位童鞋做主题时必不可少的好朋友了。下面为各位童鞋推荐10款插件武装一下自己的Firefox吧。有喜欢的自己下载啦，欢迎留言说说使用心得哦。</p>
<h4>ColorZilla</h4>
<p>各位童鞋看到别人网站上有好看的颜色，自己也想调出来怎么办呢？各种配色方案如何借鉴呢？当然是使用各类取色工具啦，像我以前就使用<a title="yinheli's blog" href="http://philna.com/">yinheli</a>同学推荐的ColorPix。但是能不能在浏览器上直接进行呢？可以的，你安装ColorZilla插件吧。<br />
<span id="more-129"></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/271">download ColorZilla</a></p>
<h4>Firebug</h4>
<p>Firebug是Firefox下的一款优秀的开发类插件。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。<a href="https://addons.mozilla.org/en-US/firefox/addon/1843"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">download Firebug</a></p>
<h4>FireFTP</h4>
<p>FireFTP是应用于Firefox的一个FTP扩展，设置简单，使用方便。详细介绍可以移步<a title="Firefox 的 FTP 扩展：FireFTP" href="http://fairyfish.net/2009/02/22/fireftp/">Firefox 的 FTP 扩展：FireFTP</a>查看详细介绍。<a href="https://addons.mozilla.org/en-US/firefox/addon/684"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/684">download FireFTP</a></p>
<h4>IE Tab</h4>
<p>许多旧网站对一些比较新的浏览器支持不是太好，浏览的时候会出现错位的问题。安装<a href="https://addons.mozilla.org/en-US/firefox/addon/1419" target="_blank"> </a>IE Tab之后，在工具栏添加IE Tab按钮，点击就可以直接在 Firefox 的标签页中以内嵌的 IE 引擎浏览该网页，而不必去打开IE浏览器。<a href="https://addons.mozilla.org/en-US/firefox/addon/1419"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/1419">download IE Tab</a></p>
<h4>Picnik</h4>
<p>是基于 Flash 的在线图形编辑工具 Picnik 的 Firefox 扩展，除了快捷发送网页中图片到 Picnik 进行处理和编辑之外，还能对于网页进行截图，然后发送到 Picnik。<a href="https://addons.mozilla.org/en-US/firefox/addon/4889"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/4889">download Picnik</a></p>
<h4>Stylish</h4>
<p>可以自己设置页面显示的CSS，而且这个插件还可以搜索别人编辑好的脚本，方法为其实插件安装好之后，在状态栏的图标点右键，里面有选项“查找适合该页面的样式”，然后就可以找到网友们写好的CSS。<a href="https://addons.mozilla.org/en-US/firefox/addon/2108"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/2108">download Stylish</a></p>
<h4>Web Developer Toolbar</h4>
<p>Web Developer Toolbar 是一款运行于 Firefox 等Webkit内核浏览器基础之上的网页开发工具插件，内建强大的调试和设置功能，为众多的网页开发人员提供想当实用的功能，几乎是每个网页设计师必备的工具。<a href="https://addons.mozilla.org/en-US/firefox/addon/60"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/60">download Web Developer Toolbar</a></p>
<h4>User Agent Switcher</h4>
<p>貌似这个可以伪装成其他浏览器进行测试的。<a href="https://addons.mozilla.org/en-US/firefox/addon/59"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/59">download User Agent Switcher</a></p>
<h4>FireShot</h4>
<p>fireshot提供了一套编辑和注释工具，可以截取可视页面或者全部页面。Fireshot截取的图片，可以保存为PNG、JPG、GIF以及BMP格 式。并且firefox用户可以上传，拷贝，导出到第三方图像编辑器，也可以通过电子邮件上传或者打印。Fireshot甚至还有pro版本。</p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/5648">download FireShot</a></p>
<h4>SeoQuake</h4>
<p>SEOquake是基于Firefox和IE浏览器的一款功能强大的工具， 其可以帮助网站管理者更好地对网站进行优化及推广。SEOquake还允许用户对一些SEO技术参数进行分析并且了解每一个的细节。这个号称SEO终极完 美工具SEOquake越来越受到广大站长的喜爱，也是每一位SEO的必备选择。</p>
<p>Google、Yahoo、MSN、百度等搜索引擎的收录及链接情况,Del.icio.us、Technorati、Digg等web2.0网站 的收藏数目及Dmoz目录收录地址,PR值、Alexa排名、WHOIS信息、域名年龄、主机IP、查看源码等,关键词分析，关键词密度；站内链接，导出 链接,只要开启SEOquake功能，几乎是打开网页的同时就能看到这些数据。 另外它还结合了主要搜索引擎的搜索结果，并在每个结果下面显示这些SEO数据。当然，你想显示什么，完全可以自由设置。<a href="https://addons.mozilla.org/en-US/firefox/addon/3036"></a></p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/3036">download SeoQuake</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.liqinghai.com/10-popular-web-designer-tools-for-firefox/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
