css | 田园牧歌

十

精选30个优秀的CSS技术和实例

今天，我爱互联网为大家收集精选了30个使用纯css完成的强大实践的优秀css技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯css和html实现的。

　　单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。

14个可以节省你时间的CSS工具

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的css工具可以有效地节省你设计网站的时间。

优化/格式化类

CSSTidy – css Tidy是一个开源的css分析和优化工具；
CleanCSS - CleanCSS是一个基于CSS Tidy的强大的CSS优化和格式化工具。
CSS Optimizer - CSS Optimizer可以通过优化压缩CSS样式文件大小。
CSS Analyzer – CSS Analyzer可以帮助你检查你的CSS样式是否符合W3C的认证。

字体类

Em Calculator – EM Calculator可以帮助你计算px与em之间的转换。
CSS Font and Text Style Wizard – 这个小工具可以很方便地将你的CSS样式呈现出来。

表格类

CSS Form Code Maker – 很方便地生成“五颜六色的BOX布局”的表格。
JotForm – JotForm是一个“所见即所得”的表格生成器。

导航/按钮类

CSS Buttons – CSS按钮和文本在线生成工具。
CSS Menu Generator – CSS Menu Generator可以同时生成基于CSS和html代码的漂亮的按钮。

生成器

CSS Creator – Css Creator是一个可以创建自适应宽度或者是固定宽度的浮动布局生成器，可以生成带有Header和Footer的三栏布局。
QrONE CSS Designer – QrONE是一个CSS在线生成与编辑器。
Web 2.0 Generator – Web 2.0 Generator可以利用html和CSS生成一个完整的网站布局。
CSS Mate – CSS Mate是一个在线CSS编辑器。

除了上面译文中的14个小工具外，还有如下几款小工具，它们也是非常棒的，你可以打开下面的文章看它们的详细介绍：

CSS Menu Maker - 在线生成丰富多样的CSS导航按钮。
CSS Type Set – 在线轻松调试CSS文本样式。
CSS Frame Generator – 写好DIV架构之后，使用这个在线工具可以很快生成CSS样式结构表。

原文来自：我爱互联网|woiweb|专注互联网设计与开发

九

18个明亮型纯CSS的绘图示例

之前已经发布了一篇关于css3绘图的文章，如果你还没看，那赶紧查看10款令人难以相信的CSS3绘图效果吧。今天继续为大家奉献，以下是我爱互联网从网上搜罗的精心挑选的又18个高标准的纯css3示例，你从中可以了解用新的css3 可以绘制什么样的图。而其中一些甚至只用了CSS1/css 2哦！

又抓到虫子了：IE中奇怪的应用CSS的BUG

　　由于IE系浏览器对标准的支持不够好，导致Web开发中经常需要去处理浏览器兼容性问题，特别有些莫名其妙的问题很让人头疼，今天要说这个问题就是这样的，先从插入CSS的三种方法说起：

外部样式（External Style Sheet）

　　当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

1 <head>

`2`	`<link rel="stylesheet"` `type="text/css"` `href="mystyle.css"` `/>`

3 </head>

内部样式（Internal Style Sheet）

　　当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

1
<head> 

2
<style type="text/css"> 

3
  hr {color: sienna;} 

4
  p {margin-left: 20px;} 

5
  body {background-image: url("images/back40.gif");} 

6
</style> 

7
</head>

内联样式（Inline Styles）

　　由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

`1`	`<p style="color: sienna; margin-left: 20px">This is a paragraph</p>`

多重样式（Multiple Styles）

　　如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况，一般情况下优先级如下：

　　（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

　　之所以说是一般情况是因为可以使用!important来改变这种顺序，比如外部样式如果某个样式项使用了!important来提高优先级，其优先级将比内联样式高。还有个例外的情况就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式：

01
<head> 

02
<!--内部样式-->

03
<style> 

04
    h3{color:green;} 

05
</style> 

06
 
07
<!--外部样式style.css-->

08
<!--h3{color:blue;}-->

09
<link rel="stylesheet" type="text/css" href="style.css"/> 

10
</head> 

11
<body> 

12
    <h3>测试！</h3> 

13
</body>

　　文字的颜色将是蓝色，因为外部样式的蓝色覆盖了内部样式的绿色，这在主流浏览器中表现都是一致的，包括IE在内。然而另外一种方式插入样式，IE就表现出它的另类了。这种方法是使用脚本在外部样式前插入内部样式，即上面的内部样式用脚本创建出来，代码如下：

01
(function(){ 

02
    var agent = window.navigator.userAgent.toLowerCase(); 

03
    var is_op = (agent.indexOf("opera") != -1); 

04
    var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op; 

05
    var is_ch = (agent.indexOf("chrome") != -1); 

06
 
07
    var cssStr="h3 {color:green;}"; 

08
    var s=document.createElement("style"); 

09
    var head=document.getElementsByTagName("head").item(0); 

10
    var link=document.getElementsByTagName("link"); 

11
    link=link.item(0); 

12
 
13
    if(is_ie) 

14
    { 

15
        if(link) 

16
            head.insertBefore(s,link); 

17
        else

18
            head.appendChild(s); 

19
        document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; 

20
    } 

21
    else if(is_ch) 

22
    { 

23
        var t=document.createTextNode(); 

24
        t.nodeValue=cssStr; 

25
        s.appendChild(t); 

26
        head.insertBefore(s,link); 

27
    } 

28
    else

29
    { 

30
        s.innerHTML=cssStr; 

31
        head.insertBefore(s,link); 

32
    } 

33
})();

　　在Firefox/Chrome/Safari/Opera中测试文字都是蓝色的，符合外部样式如果插入到内部样式前的话，外部样式将覆盖内部样式的原则，然而在IE下却是绿色的，也就是说IE在加载完页面文档，运行了脚本插入了内部样式之后，就把文字颜色设置成绿色了而忽略了后面外部样式。不知道大家是否也碰到这样的问题，欢迎讨论……

九

实用HTML，CSS和JavaScript速查表

速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。

事实上，速查表就是来帮助我们把日常中最常用到的信息聚集起来，方便使用，使我们做工作时更有效率。有了它们，免去了你的大脑花额外时间去记忆它们的烦恼——你只需要打开简表，马上能查到你想要的信息。这篇文章里，你可以看到最实用的HTML，CSS，JavaScript速查表，它们可以当作参考资料，备忘录，能帮助你以最快的速度找到想要的信息。

HTML

精选30个优秀的CSS技术和实例

今天，我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。

　　单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。

1.Hoverbox 图片集

一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。

详细内容 Read more

八

标签li是不是块级元素

块级元素：block-level，相信大家都知道吧（or Google it）。以前在写代码的时候，面对 <li /> 标签总觉得很奇怪。为什么它可以设定高度，但又不像 <h1 /> 这些元素，那种感觉就像它是个“半内联"的（内联：inline[text]-level）元素。详细内容 Read more

七

打败 IE 的葵花宝典：CSS Bug Table

原文发表于：Alipay UED Blog – 打败 IE 的葵花宝典：CSS Bug Table

作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当，以及其他纰漏在所难免，还请大家帮忙更正。谢谢。

	问题	浏览器	DEMO	解决方法
Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1	input[button \| submit] 不能用 margin:0 auto; 居中	IE8	bug \| fixed	为input添加width
2	body{overflow:hidden;}没有去掉滚动条	IE6/7	bug \| fixed	设置html{overflow:hidden;}
3	hasLayout的标签拥有高度	IE6/7	bug \| fixed	*height:0; _overflow:hidden;
4	form>[hasLayout]元素有margin-left时，子元素中的[input \| textarea] 出现2×margin-left	IE6/7	bug \| fixed	form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;}
5	当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed	IE7	bug \| fixed	不在同一个元素上使用不同宽度的 dotted
6	当子元素有position:relative的时候，父元素设置overflow:[hidden\|auto]相当于给子元素设置了position:visible;	IE6/7	bug \| fixed	给父元素设置position:relative;
7	:hover伪类不能改变有position:absolute的子级元素的left/top值	IE7	bug \| fixed	把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0%
8	:focus + selector {} 选择器失效	IE8	bug \| fixed	在失效选择器后面添加一个空选择器, :focus{}
9	列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style	IE8	bug \| fixed	用背景图片替换list-style
10	th 不会自动继承上级元素的 text-align	IE8	bug \| fixed	给th添加text-align:inherit;
11	样式(包括link/style/@import(link)) 最多允许个为是：32	IE6-8	─ 常识	99.99%的情况下，不会遇到
12	:hover 时若background-color为#fff, 失效	IE7	bug \| fixed	把background-color改成background。或者，非#fff \|\| #ffffff
13	忽略’>’后有注释的选择器：selector> /**/ selector{}	IE6	bug \| fixed	官方DEMO有误
14	* html	IE6	─ HACK	只对IE6有效
15	PNG图片中的颜色和背景颜色的值相同，但显示不同	IE6-7	bug \| fixed	利用 pngcrush 去除图片中的 Gamma profiles
16	margin:0 auto; 不能让block元素水平居中	IE6-8	bug \| fixed	给block元素添加一个width
17	使用伪类 :first-line \| :first-letter, 属性的值中出现!important 会使属性失效	IE8	bug \| fixed	!important is evil, don’t use it anymore
18	:first-letter 失效	IE6	bug \| fixed	把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}
19	Position:absolute元素中，a display:block, 在非:hover时只有文本可点击	IE6/7	bug \| fixed	给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求
20	float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐	IE6/7	bug \| fixed	给li设置display:inline 或 float:[方向]
21	dt, dd, li 背景失效	IE6	bug \| fixed	dt, dd, li{position:relative;}
22	<noscript />元素的样式在启用javascript的情况下显示了样式	IE6-8	bug \| fixed	利用js给<noscript />添加display:none;
23	使用filter处理的透明背景图片的透明部分不可点	IE6-8	bug \| fixed	把background:none变成background:url(‘链接’)，链接到本身和图片之外的任何文件
24	li内元素偏离 baseline 向下拉	IE8	bug \| fixed	给li设置display:inline 或 float:[方向]
25	列表中li的list-style不显示	IE6/7	bug \| fixed	给li添加margin-left，留空间来显示（不要加在ul上）
26	图片不能垂直居中	IE6/7	bug/fixed	添加一个空标签，并赋给"Layout", 比如display:inline-block;
27	不能自定义指针样式	IE6-8	bug \| fixed	给指针文件设置绝对路径
28	背景溢出，拖动滚动条后显示正常	IE6	bug \| fixed	给父元素添加overflow:hidden防止溢出，并赋予hasLayout,如果添加_zoom:1;
29	高度超过height定义的高	IE6	bug/fixed	添加_overflow:hidden;(推荐)或者_font-size:0;
30	宽度超过width定义的宽	IE6	bug/fixed	添加_overflow:hidden;
31	双倍边距	IE6	─ 常识	添加display:inline到float元素中
32	margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见	IE6/7	bug/fixed	去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
33	给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面	IE6	bug/fixed	给有斜体文字的元素添加overflow:hidden;
35	3px 间隔：在float元素后的元素，会有3px间隔	IE6	bug/fixed	因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;
35	text-align 影响块级元素	IE6/7	bug/fixed	整理你的float；或者分开设置text-align

原文来自：幸福收藏夹

七

说说CSS Hack 和向后兼容

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

css hack

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
可维护：在资源成本和完美间平衡的向后兼容
可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack


/* Opera */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 
{head~body .sofish{display:block;}}

这种写法的优缺点是：

优点：全面，各种HACK都有；清理无用代码里易认
缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack


.sofish{ 
        padding:10px; 
        padding:9px\9; /* all ie */ 
        padding:8px\0; /* ie8-9 */ 
        *padding:5px; /* ie6-7 */ 
        +padding:7px; /* ie7 */ 
        _padding:6px; /* ie6 */ 
}

这种写法的优缺点是：

优点：易记；代码少
缺点：不全面

三、IE 注释


<!--[if IE]>IE only<![endif]-->  
<!--[if !IE]>NOT IE<![endif]-->

这种写法的优缺点是：

优点：安全；向后兼容好；易维护
缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断


// 以jQuery为例，检测是否是IE6，是则加上class="ie6"  
if ($.browser.msie && $.browser.version = 6 ){  
     $('div').addClass('ie6');  
}

这种写法的优缺点是：

优点：全面；易维护；可读性高
缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；
向后兼容的目标：1年
你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；
尽可能省资源
你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)


.sofish{  
        padding:10px; 
        padding:9px\9; /* all ie */ 
        padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */ 
        *padding:5px; /* ie6-7 */ 
        +padding:7px; /* ie7 */ 
        _padding:6px; /* ie6 */ 
}  
/* webkit and opera */ 
@media all and (min-width: 0px){ .sofish{padding:11px;} }  
/* webkit */ 
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
/* opera */  
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
/* firefox * / 
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）


HTML: 添加body class  
<!--[if IE6]--><body class="ie6"><![endif]-->  
<!--[if IE7]--><body class="ie7"><![endif]-->  
<!--[if IE8]--><body class="ie8"><![endif]-->  
<!--[if IE9]--><body class="ie9"><![endif]-->  
<!--[if !IE]--><body class="non-ie"><![endif]-->


.sofish{padding:10px;}  
.non-ie .sofish{padding:12px;} 
.ie9 .sofish{padding:9px;} 
.ie8 .sofish{padding:8px;} 
.ie7 .sofish{padding:7px;} 
.ie6 .sofish{padding:6px;} 
 
/* webkit and opera */ 
@media all and (min-width: 0px){ .sofish{padding:11px;} }  
 
/* webkit */ 
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
 
/* opera */  
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
 
/* firefox * / 
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：


/***** Selector Hacks ******/ 
/* IE6 and below */ 
* html #uno  { color: red } 
 
/* IE7 */ 
*:first-child+html #dos { color: red }  
 
/* IE7, FF, Saf, Opera  */ 
html>body #tres { color: red } 
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body #cuatro { color: red } 
 
/* Opera 9.27 and below, safari 2 */ 
html:first-child #cinco { color: red } 
 
/* Safari 2-3 */ 
html[xmlns*=""] body:last-child #seis { color: red } 
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) #siete { color: red } 
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:first-of-type #ocho {  color: red } 
 
/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
        #diez  { color: red  } 
} 
 
/* iPhone / mobile webkit */ 
@media screen and (max-device-width: 480px) { 
        #veintiseis { color: red  } 
} 
 
/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #trece  { color: red  } 
 
/* Safari 2 - 3.1, Opera 9.25 */ 
*|html[xmlns*=""] #catorce { color: red  } 
 
/* Everything but IE6-8 */ 
:root *> #quince { color: red  } 
 
/* IE7 */ 
*+html #dieciocho {  color: red } 
 
/* Firefox only. 1+ */ 
#veinticuatro,  x:-moz-any-link  { color: red } 
 
/* Firefox 3.0+ */ 
#veinticinco,  x:-moz-any-link, x:default  { color: red  } 
 
 
/***** Attribute Hacks ******/ 
/* IE6 */ 
#once { _color: blue } 
 
/* IE6, IE7 */ 
#doce { *color: blue; /* or #color: blue */ } 
 
/* Everything but IE6 */ 
#diecisiete { color/**/: blue } 
 
/* IE6, IE7, IE8 */ 
#diecinueve { color: blue\9; } 
 
/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; } 
 
/* IE6, IE7 -- acts as an !important */ 
#veintesiete { color: blue !ie; } /* string after ! can be anything */

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。

最后，还是那句，希望看到你更好的方法！

原文来自：幸福收藏夹

我的日历
2012年二月

一二三四五六日

« 一

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29
文章索引
- 2012年一月 (10)
- 2011年十二月 (10)
- 2011年十一月 (30)
- 2011年十月 (20)
- 2011年九月 (35)
- 2011年八月 (37)
- 2011年七月 (49)
- 2011年六月 (58)
- 2011年五月 (10)
- 2011年四月 (59)
- 2011年三月 (25)
- 2011年二月 (7)
- 2011年一月 (13)
- 2010年十二月 (17)
- 2010年十一月 (26)
- 2010年十月 (34)
- 2010年九月 (51)
- 2010年八月 (98)
- 2010年七月 (113)
文章分类
- WordPress (17)
- 互联网新闻 (4)
- 创意设计 (48)
- 前端开发 (462)
- 在线旅游 (7)
- 生活随记 (5)
- 网站建设 (5)
- 网络前沿 (157)
- 软件开发 (7)
我的标签
ajax canvas chrome cms css css3 firefox flash google html html5 http IE IE6 IE8 IE9 iPad java javascript jquery mysql page php svg tap web WordPress 个性互联网免费免费图标前端前端开发动画团购图标在线旅游开发微博旅游社区网址导航网页设计软件
文章搜索
最近文章
最近评论
- Stan Chu 在关于上的评论
- 迪尔马奇在 30个非常有趣的404错误页面设计欣赏上的评论
- 金银币价格在国内独立博客发展的障碍上的评论
- 万艾可在国内独立博客发展的障碍上的评论
- Don 在 WordPress与Tumblr：传统博客与轻博客之争上的评论
网络前沿
最新消息
草根网文
友情链接

Posts tagged ‘css’

精选30个优秀的CSS技术和实例

1.Hoverbox 图片集

详细内容

14个可以节省你时间的CSS工具

18个明亮型纯CSS的绘图示例

Twitter Fail Whale

Homer Simpson 详细内容

又抓到虫子了：IE中奇怪的应用CSS的BUG

实用HTML，CSS和JavaScript速查表

HTML

HTML帮助手册

精选30个优秀的CSS技术和实例

1.Hoverbox 图片集

标签li是不是块级元素

推荐60多个CSS GALLERY画廊网站

打败 IE 的葵花宝典：CSS Bug Table

说说CSS Hack 和向后兼容

一、CSS 选择器 Hack

二、CSS 属性 Hack

三、IE 注释

四、浏览器探测：JS/后端程序判断

五、个人推荐写法

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

我的日历

文章索引

文章分类

文章搜索

最近文章

最近评论

网络前沿

最新消息

草根网文

About

页面

功能

Posts tagged ‘css’

订阅内容

1.Hoverbox 图片集

HTML

1.Hoverbox 图片集

一、CSS 选择器 Hack

二、CSS 属性 Hack

三、IE 注释

四、浏览器探测：JS/后端程序判断

五、个人推荐写法

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

我的日历

文章索引

文章分类

我的标签

文章搜索

最近文章

最近评论

友情链接

About

页面

功能