<?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>Moondy’s Zone &#187; Xhtml/Css</title>
	<atom:link href="http://www.moondyzone.com/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Mon, 18 Apr 2011 10:06:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.moondyzone.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>CSS3测试之——QQ企鹅</title>
		<link>http://www.moondyzone.com/css/599.html</link>
		<comments>http://www.moondyzone.com/css/599.html#comments</comments>
		<pubDate>Tue, 20 Jul 2010 09:03:40 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[CSS3]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=599</guid>
		<description><![CDATA[自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。
言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。
不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：

IE9以下的IE版本，会是左边那种情况；FF以及webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。
虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;CSS3 QQ企鹅&#60;/title&#62;
&#60;!--by moondy  16955732--&#62;
&#60;style&#62;
body {margin:0; padding:0; background:#FFF;}
#qq {position:absolute; margin:50px 30%; width:500px;}
#face{
	position:relative;
	z-index:100;
	width:260px;
	height:200px;
	border-radius:400px 400px 280px 280px;
		-webkit-border-radius:400px 400px 280px 280px;
		-moz-border-radius:400px 400px 280px 280px;
	background:#000;
	background: -webkit-gradient(linear, right top, left bottom, from(#999) ,color-stop(0.20, #333), color-stop(0.73, #000),color-stop(0.95, #000), to(#000));
	background: -moz-linear-gradient(right top, #999,#333 20%, #000 73% ,#000 95% ,#000 155%);
	top:-15px;
}
#eyes{
	position:relative;
	top:-5px;
}
div.eye{
	position:absolute;
	border-radius: [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/599.html/feed</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>斜角导航及滑动门的延伸</title>
		<link>http://www.moondyzone.com/css/562.html</link>
		<comments>http://www.moondyzone.com/css/562.html#comments</comments>
		<pubDate>Sun, 15 Nov 2009 12:02:21 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[斜角导航]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=562</guid>
		<description><![CDATA[下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。
之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;无标题文档&#60;/title&#62;
&#60;style&#62;
ul {margin:0; padding:0;}
li {list-style-type:none;}
.nav {height:45px; font-size:14px; font-weight:bold;}
	.nav a {color:#333; text-decoration:none; display:inline-block; height:45px; line-height:45px; float:left; padding:0 30px 0 60px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) left top no-repeat; position:relative;}
	.nav a span {display:block; height:45px; width:30px; position:absolute; top:0; right:-30px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) right top no-repeat;}
	.nav a:hover {color:#FFF; text-decoration:none; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak.png) left bottom no-repeat;}
	.nav a:hover [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/562.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>a:hover在IE6中的BUG</title>
		<link>http://www.moondyzone.com/css/529.html</link>
		<comments>http://www.moondyzone.com/css/529.html#comments</comments>
		<pubDate>Sun, 16 Aug 2009 08:30:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=529</guid>
		<description><![CDATA[哎，最近工作太忙，都好久没来写点东西了。
这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。
IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：

a:hover &#123;zoom:1;&#125;/*这里可以换成其他很多的属性。*/
a:hover img &#123;……&#125;

在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。
相关文章IE6中select挡住DIV的BUGIE6中出现重复字符的BUGCSS3测试之——QQ企鹅斜角导航及滑动门的延伸对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/529.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>对CSS渲染效率的一些研究</title>
		<link>http://www.moondyzone.com/css/517.html</link>
		<comments>http://www.moondyzone.com/css/517.html#comments</comments>
		<pubDate>Tue, 21 Jul 2009 09:30:45 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[效率]]></category>
		<category><![CDATA[渲染]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=517</guid>
		<description><![CDATA[其实在平时很少注意到CSS渲染效率的问题，不过在很多时候都是细节决定成败，这也是个不容忽视的问题。之前也拜读过网上流传的一篇有关CSS渲染效率的文章，传得太多，也不知原作是谁了。不过并不是太赞同其中的一些观点，所以就本人工作中的一些经验以及看法，说说这个问题，个人观点并非权威，欢迎拍砖。
在这里我们不只是单纯地研究渲染效率的快或慢，应该从一个项目的整体来看。页面渲染的这个过程，是在用户本地进行的，也就是说用户打开页面，载入了HTML代码以及样式表、JS等等相关的文件，浏览器再跟据这些文件把页面渲染出来。关于速度方面，我们更注重的是载入的速度。而渲染速度，的确某些样式的写法会存在渲染速度的差异，但对于当前随便每秒都能运算上亿次的个人电脑来说，把一张背景图平铺100次跟平铺10000次又有多大区别呢？当然，细节，细节决定成败，但细节不等于吹毛求疵，下面说说个人对此侧重点的一些看法。
可能会有影响，但可跟据具体情况忽略的部分
比如说颜色值，color:#F00;、color:#FF0000;、color:red; 这三者都是一样的，至少用人类的感观无法区分其对渲染速度的影响，用简写可能或多或少能减少那么几个字节的体积，不过标准写法是6位大写字符的写法。
display与visibility就不详说了，这本身就是两种不同的表现属性，该用谁就用谁。
注意某些样式的保留属性，比如说：
background:url(image.jpg);这样一句，那么在渲染的时候会默认输出background-color : transparent 、background-attachment : scroll 、background-repeat : repeat 等等属性。在完美主义者的眼里这是对资源的一种浪费，但同样，人类的感观体会不到此影响。其实个人还是认为简写形式有助于减少样式表的体积，而且这也似乎是行内默认的写法了。同样的，border、list-style等也有默认属性，也不用深究了。
背景平铺的问题
对于可平铺的背景来说，很多人喜欢用1px为单位来进行平铺，前面也说了，其实平铺多少次对于个人电脑来说几乎都是一样的，关键在于图片的大小了。对于可平铺的图片，一定范围内的像素值是一样的，所以增大尺寸对于积体的影响并不大，我这里对比了单色1*1跟10*10的图片在jpg跟gif格式下的大小，相差都几有几个字节

其实本人不太建议用1px的图，至少自己在修改的时候无法一眼看出那张图片是什么。而且现在用css sprites也会把可平铺的部分也做进去，这也是对渲染效率的提升了。
再说说会有明显影响的部分
@import 的使用
不建议在页面里使用，他会在页面加载完之后才被加载，有可能使页面闪动或是裸体。如果是样式表过多为了方面管理的话，放在CSS里就好。
某些选择符的使用
渲染的过程也就是对这些选择符的匹配，所以我们可以很容易地理解到，一些比较直接的选择符比如类选择符、ID选择符等的匹配效率高，而一些条件比较繁复点的选择符比如子选择符、属性选择符等的匹配效率相对来就低一些。当所匹配的量比较多的时候，可以明显地感觉到速度的差别。（关于各种选择符，具体可查看CSS手册了）
IE的滤镜
自从标准化的兴起以来，IE滤镜的日子就不好过了，除了不兼容以外，某些滤镜真的蛮耗资源的。现在还在用的可能就是为了处理IE6下图片透明的问题了，建议能不用就不用他吧。
expression的使用
也许这个不能归为渲染的部分，不过他的确相当占资源，如果加得多的话，会让你的页面其慢如牛。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题全兼容的标准三级菜单]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/517.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>解决IE8的兼容问题，X-UA-Compatible meta标签</title>
		<link>http://www.moondyzone.com/css/445.html</link>
		<comments>http://www.moondyzone.com/css/445.html#comments</comments>
		<pubDate>Tue, 09 Jun 2009 02:25:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=445</guid>
		<description><![CDATA[IE8来了，于是不少的项目要求中都会增加了兼容IE8这一条，但当前IE8还很不完善，还算是测试版中，之前某些已经兼容的页面，放到IE8中却变得惨不忍睹，相信很多web desginer都有同感吧。还好IE8提供了一个新的标签X-UA-Compatible，它只能被IE8识别，用来设置IE8的兼容性，就好比现在的vista要去兼容一些旧版的程序一样。
网上找到的相关资料基本上都是同一篇译文，也不知最初的译者是谁了，我就直接转载过来啦。
英文原文：http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
前言
为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，此文章说明文件兼容性的必要性，列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。
了解文件兼容性的必要性
每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。
为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。&#8221;Quirks mode&#8221;为预设，这会使页面以旧版本浏览器的视点显示，&#8221;Standards mode&#8221;(也称为&#8221;strict mode&#8221;)特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的&#60;!DOCTYPE&#62;指令。
若一个网页没有包含&#60;!DOCTYPE&#62;指令，IE6会将它以quirks mode显示。若网页包含有效的&#60;!DOCTYPE&#62;指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含&#60;!DOCTYPE&#62;指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。
随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。
当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于&#60;!DOCTYPE&#62;只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。
IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。
这能让你选择将你的网站更新支持IE8新特点的时机。
认识文件兼容性模式
IE8支持几种文件兼容性模式，它们具有不同的特性并影响内容显示的方式。
•Emulate IE8 mode指示IE使用&#60;!DOCTYPE&#62;指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视&#60;!DOCTYPE&#62;指令。
•Emulate IE7 mode指示IE使用&#60;!DOCTYPE&#62;指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视&#60;!DOCTYPE&#62;指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有&#60;!DOCTYPE&#62;指令。
•IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/445.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>一道看似简单的面试题</title>
		<link>http://www.moondyzone.com/css/428.html</link>
		<comments>http://www.moondyzone.com/css/428.html#comments</comments>
		<pubDate>Mon, 01 Jun 2009 13:23:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[面试]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=428</guid>
		<description><![CDATA[曾经做过一么一题面试题，大体上的要求是这样的：一个新闻列表，日期要紧随标题之后，标题太长时可以自动隐藏，但日期要显示完整。

就这么个题目，看起来似乎很简单，但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后，如果是时间右对齐的话，相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码，自己做做试试。
因为日期是跟在标题后面的，所以这里要用内联标签，但这会在自动隐藏标题的时候出现问题。最后，想到了一种特殊的处理方法。外框的宽度比如说是300px，那么就把ul的宽度定为240px，然后通过绝对定位把日期从文档流中拖出，这时当标题达到ul的宽度的时候将之隐藏，而日期因为浮动而跟随其后，就达到所要的效果了。
PS：原来没有考虑到opera的兼容，现已修正，不过用了hack，暂时没想到好方法了。


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;demo&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
body {font:normal 12px &#34;宋体&#34;,Verdana, Arial, Helvetica, sans-serif;}
ul {margin:0; padding:0;}
li {list-style-type:none;}
a {color:#333; text-decoration:none;}
a:hover {color:#900; text-decoration:none;}
div {width:300px;}
	div ul{display:block; width:240px;}
	div li {display:inline-block; *display:inline; zoom:1; position:relative;}
		div li a {display:block; *display:inline; zoom:1; height:22px; line-height:22px; overflow:hidden;}
		div li span {position:absolute; top:0; right:-60px; padding-left:10px; line-height:22px; color:#999; }
&#60;/style&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;div&#62;
	&#60;ul&#62;
    [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/428.html/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>全兼容的标准三级菜单</title>
		<link>http://www.moondyzone.com/css/416.html</link>
		<comments>http://www.moondyzone.com/css/416.html#comments</comments>
		<pubDate>Tue, 26 May 2009 02:52:11 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=416</guid>
		<description><![CDATA[首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。
可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。


&#60;!DOCTYPE html PUBliC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;三级菜单&#60;/title&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&#34;&#62;&#60;/script&#62;
&#60;!--[if IE 6]&#62;
&#60;script type=&#34;text/javascript&#34;&#62;
$(document).ready(function(){
  $(&#34;#navmenu li&#34;).hover(
    function() { $(this).addClass(&#34;iehover&#34;); },
    function() { $(this).removeClass(&#34;iehover&#34;); }
  );
});
&#60;/script&#62;
&#60;![endif]--&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;js/jquery.js&#34;&#62;
$(document).ready(function() {
  $('.links li code').hide();
  $('.links li p').click(function() {
   [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/416.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE6中select挡住DIV的BUG</title>
		<link>http://www.moondyzone.com/css/312.html</link>
		<comments>http://www.moondyzone.com/css/312.html#comments</comments>
		<pubDate>Mon, 11 May 2009 07:20:34 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=312</guid>
		<description><![CDATA[前阵子碰到一个问题，就是在IE6中select会把浮动的DIV给挡住，通常情况都是用JS控制某个DIV显示隐藏的情况下发生的。这冲时候不管怎么设z-index值都没有用。

我也查了很多资料，说这是IE6的一个BUG（哎，万恶的IE6），解决的办法不外乎两种：1、用DIV模拟一个select出来。2、在隐藏层的底部加一个透明的iframe。第一种感觉花的工夫比较大，暂时就用第二种方法了，我这个原本用的是jquery的框架，这里我就把jquery的帖上来了。在你要调用的JS文件里加上这么一段：

1
2
3
4
5
6
7
8
9
10
11
12
&#40;function&#40;$&#41;&#123;$.fn.bgIframe=$.fn.bgiframe=function&#40;s&#41;&#123;
if&#40;$.browser.msie&#38;amp;&#38;amp;/6.0/.test&#40;navigator.userAgent&#41;&#41;
&#123;s=$.extend&#40;&#123;top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,
src:'javascript:false;'&#125;,s&#124;&#124;&#123;&#125;&#41;;var prop=function&#40;n&#41;&#123;
return n&#38;amp;&#38;amp;n.constructor==Number?n+'px':n;&#125;,html='&#38;lt;
iframe frameborder=&#34;0&#34;tabindex=&#34;-1&#34;src=&#34;'+s.src+'&#34;'+'style=&#34;display:block;
position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;
filter:alpha(opacity=0);-moz-opacity:0;&#34;/&#38;gt;';
return this.each&#40;function&#40;&#41;
&#123;if&#40;$&#40;'&#38;gt; iframe.bgiframe',this&#41;.length==0&#41;
this.insertBefore&#40;document.createElement&#40;html&#41;,this.firstChild&#41;;
&#125;&#41;;&#125;return this;&#125;;&#125;&#41;&#40;jQuery&#41;;

然后在你应用的页面调用

1
2
3
4
5
&#60;script&#62;
  $&#40;document&#41;.ready&#40;function&#40;e&#41;&#123;
   $&#40;'.your_class'&#41;.bgiframe&#40;&#41;;
 &#125;&#41;//其中your_class是被挡住的层的类名。
&#60;/script&#62;

相关文章a:hover在IE6中的BUG全兼容的标准三级菜单IE6中出现重复字符的BUGCSS3测试之——QQ企鹅斜角导航及滑动门的延伸对CSS渲染效率的一些研究]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/312.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>HTML 4.01 / XHTML 1.0 标签参考手册</title>
		<link>http://www.moondyzone.com/css/296.html</link>
		<comments>http://www.moondyzone.com/css/296.html#comments</comments>
		<pubDate>Wed, 06 May 2009 06:42:34 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[手册]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=296</guid>
		<description><![CDATA[记得在初期的时候，工作中时不时都要去查一查CSS手册，后来慢慢地经验多了也就基本上不用查手册了。但是为了向WEB标准靠拢，近来都比较常用到HMTL手册。不管怎么说，这两本手册也应该是一个WEB前端人员必备的吧。CSS手册之前发过，这里把HMTL的发上来吧。
下载：xhtml_reference.rar
相关文章CSS 2.0中文手册(含索引)CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/296.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>如何让块级元素实现display:inline-block</title>
		<link>http://www.moondyzone.com/css/292.html</link>
		<comments>http://www.moondyzone.com/css/292.html#comments</comments>
		<pubDate>Fri, 01 May 2009 13:36:28 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=292</guid>
		<description><![CDATA[关于display:inline-block，手册上是这样解释的：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。这个属性算是有点冷门吧，也许有些朋友平时也不怎么会用到这个属性。不过在某些情况下给一些内联元素用display:inline-block，比如说a标签或span标签，会省不少工夫，比如说之前发的一个滑动门效果就是这样用的。
不过在这里又发现了一个问题，在块级元素上这个属性无效，比如说加在DIV上但此DIV还会是行布局。其实在这里也只是想深入研究一下而已，在实际项目中完全可以用别的方法避免这个问题的产生。所以也查阅了不少资料，其实内联元素也并非是真正支持display:inline-block，只是因此触发了hasLayout属性，而使其拥有了display:inline-block 的特性。而应用到块元素上时，同样也只是被触发了hasLayout属性，所以还是分行布局。而关于hasLayout，可能有很多朋友会觉得陌生，大家可以参阅一下这篇文章《On having layout》，原文件的链接好像有点问题，我这里链的是蓝色理想上的一篇转载。
接下来就应该说说如何解决这个问题了，有两种方法。
1、先定义display:inline-block ，再定义display:inline，不过要分开定义才有效，这好像是IE的一个BUG。

1
2
div &#123;display:inline-block;...&#125;
div &#123;display:inline;&#125;

2、直接定义display:inline，然后再触发块级元素的hasLayout，如何触发在之前提到的那篇文章有详细说明。

1
div &#123;display:inline; zoom:1;...&#125;

相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/292.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS滑动门技术详解</title>
		<link>http://www.moondyzone.com/css/285.html</link>
		<comments>http://www.moondyzone.com/css/285.html#comments</comments>
		<pubDate>Wed, 29 Apr 2009 13:08:47 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=285</guid>
		<description><![CDATA[其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起，特别是一些新手朋友，所以我在这里写篇详解，希望能有所帮助。
说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容，就如下图所示：

在以往的一些教程中，都喜欢把背景图切成一宽一窄两部分进行拼接，其实一张图就足矣。

在这里，我们只用了&#60;a&#62;跟&#60;span&#62;两个标签，样式可以定义三种状态，可以说是最简单的一种方式了。此为本民工原创，如有雷同纯属巧合，转载请注明出处。


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;无标题文档&#60;/title&#62;
&#60;style&#62;
body {font-size:12px;}
.nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;}
.nav a {display:inline-block; margin:0 -4px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;}
.nav a span {display:inline-block; height:25px; line-height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right bottom no-repeat; padding-right:15px;}
.nav a:hover {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;}
.nav a:hover span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/285.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>网站优化——Yslow评分标准</title>
		<link>http://www.moondyzone.com/css/279.html</link>
		<comments>http://www.moondyzone.com/css/279.html#comments</comments>
		<pubDate>Sat, 25 Apr 2009 08:37:40 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[yslow]]></category>
		<category><![CDATA[优化]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=279</guid>
		<description><![CDATA[YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。Yshow=why slow?是用于用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度。
今天用Yslow评了一下我前不久做的一个站的页面，结果是73分。

这里一共有13条主要规则，而想要满足这13条规则达到网站速度的最佳优化，并不是一个WEB前端技术员能独立完成的。其中第2、3、4及13条，需要网络服务器相关的技术来解决，这也是我这页面评分不高的原因了。下面具体来说明一下这13条规则：
1、Make fewer HTTP requests&#8211;更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片。
        80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。要做到这一点有很多方法，比如使用CSS Sprites整合图片、合并CSS文件（不需要划分为什么色彩样式、布局样式、文字样式之类的）、合并JS文件。
2、Use a CDN&#8211;使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上。
        这是有关服务器线路的问题，我也不是太了解，放在国内的话大体上也就是电信、网通、双线、多线的意思了。
3、Add an Expires header&#8211;为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。
        设置静态文件的过期时间，最开始的时候我找了好久也没找到这个过期时间要怎么加，原来这个也不属于前端人员的范畴，找服务器管理人员去了解下吧。
4、Gzip components&#8211;压缩静态资源内容，减少网络传输时间。
        这个应该很熟悉了，Gzip的思想就是把文件先在服务器端进行压缩，然后再传输，在客户端再进行解压。对于当前的PC机配置来说，这点点的解压工程实在是微乎其微。不过跟上一条一样，也是属于服务器管理人员的范畴了。
5、Put CSS at the top&#8211;将CSS放在页面头部，能够更快渲染页面。
        这个很容易理解，而且绝大部分人也都会这么做的。无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。
6、Put JS at the bottom&#8211;将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载。
        跟上一条一样，很多人都习惯了把JS也放在头部，这样不仅会阻塞其它资源的下载，而且JS一般都是用来交互的，如果页面都还没有出来，何来的交互呢？所以JS还是要放到底部加载。
7、Avoid CSS expressions&#8211;不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死。
        expressions其实就像是其它语言中的if……else……可以在CSS中进行逻辑判断，但是这样的代价是非常大的，曾经我为了满足IE6下的图片大小自适应用了这么个语句，结果页面慢如蜗牛。
8、Make JS and CSS external&#8211;将CSS和JS使用外部的独立文件。
        看起来跟第1条有点矛盾，不过这应该看具体情况了。javascript和css都有缓存，独立成外部文件的话，有利于提高用户再次访问时的效率。而某些大站比如yahoo，会把CSS及JS都写在页面里，那是因为访问量太大，尽可能的减少请求数。如果你的网站访问量还不是那么地惊人的话，还是独立出来比较好。
9、Reduce DNS lookups&#8211;减少DNS查找。
        这一点虽然也是服务器方面的问题，不过还是很好理解。也就是说不要把同一个网站的内容分散在不同的服务器上。比如说，一个图片站，因为空间大小的关系把某一部分图片放在了另一个服务器上，那么这一部分的图片在浏览的时候就会慢很多。
10、Minify JS&#8211;最小化压缩JS，减少JavaScript和CSS文件的体积。
        这个应该见得多了，我们应该经常会见到被压成一行的JS以及CSS文件，压缩工具在网上随处都可见。
11、Avoid redirects&#8211;避免无意义的跳转。
        这里有一种现象常常会被开发者所忽略，这种现象发生在当URL本该有斜杠（/）却被忽略掉时，这时候会返回一个301的状态码，然后浏览器重新发起一次请求，这其中就浪费掉了时间。
12、Remove duplicate scripts&#8211;去除重复的脚本，不光是文件，甚至是同功能的函数。
       这个道理很浅显，我想也不用说明太多了。
13、Configure ETags&#8211;配置实体标签。
        Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这也是服务器人员的工作范畴，有兴趣的可以了解下。
后记，其实写这文章之前，有很多概念都是模模糊糊的，所以也查阅了很多资料。不过现在都清晰啦，这也是一种不错的学习方法呢。
相关文章新版本Yslow 22项评分标准CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/279.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>完美的DIV三行三列自适应高度布局</title>
		<link>http://www.moondyzone.com/css/251.html</link>
		<comments>http://www.moondyzone.com/css/251.html#comments</comments>
		<pubDate>Thu, 16 Apr 2009 08:04:36 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[布局]]></category>
		<category><![CDATA[自适应高度]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=251</guid>
		<description><![CDATA[我们一般拿出来讨论的自适应高度的DIV布局，都是指有背景区分的，不用区分的三列布局很容易。不过在实际应用中很少有网站这样用，大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何，而只是讨论实现这种布局的一种较完美的解决方案而已。
所谓自适应高度，也就是不管某一列撑长而其它列的高度也跟跟相应地撑长，这个效果如果用TABLE的话是轻而易举的，而用DIV就没那么容易了。之前本民工也尝试了不少办法，比如用JS控制、padding-bottom一个很大的负值……但都觉得不够完美。后来在蓝色理想找到一个国外的站，感觉这是目前为止最完美的一种解决方案了，不用hack、不用JS、兼容性强……他们把这种布局称之为：完美的圣杯。

原理其实很容易，理解之后应该可以解决很多样的布局方案。见上图，.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
今天刚装上了运行代码的插件，贴上来试试。


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;demo&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
body {margin:0;	padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
	.threecol .colmid {right:20%; background:#CCC;}
	.threecol .colleft {right:60%; background:#DDD;}
	.threecol .col1 {width:58%;	left:101%;}
	.threecol .col2 {width:18%;	left:23%;}
	.threecol .col3 {width:18%;	left:85%;}
.footer {clear:both; width:100%; [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/251.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>兼容浏览器的DIV最小高度自适应</title>
		<link>http://www.moondyzone.com/css/245.html</link>
		<comments>http://www.moondyzone.com/css/245.html#comments</comments>
		<pubDate>Tue, 07 Apr 2009 09:57:14 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[兼容]]></category>
		<category><![CDATA[最小高度]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=245</guid>
		<description><![CDATA[其实这个问题经常会碰到：容器需要跟据其内容自适应高度，但在内容不够时又要保持一个最小高度。最初的时候我也曾饱受其困扰，因为IE6不支持min-height的属性，IE6中直接用height就可实现最小高度自适应。而在IE7跟FF中，用了height属性的话就不能自动撑长了。所以就有这么一种解决方法，给IE7跟FF设定min-height以及height:auto，而另外用一个IE6的hack来解决IE6下的问题。
不过本民工一向不喜欢用hack，能不用就尽量不用，所以经多方考证找到另外一种方法：

1
div &#123;height:auto !important; height:300px; min-height:300px;&#125;

由于用了!important，所以IE7跟FF会认height:auto属性，而IE6的话就只认height属性了。不过要注意，不要设置overflow:hidden属性，在某些需要清除浮动的场合可能会用上overflow:hidden。
相关文章解决IE8的兼容问题，X-UA-Compatible meta标签全兼容的标准三级菜单CSS实现兼容浏览器的文字阴影效果兼容各浏览器的FLASH透明方法页面复制的完美解决方案CSS3测试之——QQ企鹅]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/245.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>也谈一谈css sprites技术</title>
		<link>http://www.moondyzone.com/css/240.html</link>
		<comments>http://www.moondyzone.com/css/240.html#comments</comments>
		<pubDate>Sun, 05 Apr 2009 08:54:32 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[css sprites]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=240</guid>
		<description><![CDATA[其实说起来，css sprites算不上一门什么高深的技术，应该只能算是一种技巧吧。也就是通过背景图的定位（background-position ）把页面中所用到的图标、背景图之类的整合到一张整的背景图里，从而大大减少了页面请求数，提高了页面浏览的性能。
 其实本民工最初这样用的时候并不知这就叫css sprites，只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图，是腾讯主站背景图的一部分：

定位的样式其实只用一句：

1
background: url&#40;&#34;your_url.gif&#34;&#41; x y no-repeat;

关于CSS中的坐标，图片的最左上角为（0,0）,而定位图片内部的位标的话，x、y都是负值。还有，可以把需要repeat的跟no-repeat的图分开，如果放在一起的话那么就需要考虑一下图片的延展性就可以了。
 实现css sprites并不难，只要有点耐心与细心就可以了。在制图的时候建议用Fireworks，他可以把图片精确定位到某个坐标，这是PS做不到的。采用css sprites对页面性能的提升是毋庸置疑的，只是在后期的修改与维护上麻烦了点而已，具体怎么用，可以跟据项目的具体情况来决定了。比如说，本民工的博客就没这样用，因为跟本就没用到几张图片，嘿嘿。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/240.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>总结一下CSS的缩写方法</title>
		<link>http://www.moondyzone.com/css/227.html</link>
		<comments>http://www.moondyzone.com/css/227.html#comments</comments>
		<pubDate>Tue, 24 Mar 2009 13:50:42 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[CSS简写]]></category>
		<category><![CDATA[CSS缩写]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=227</guid>
		<description><![CDATA[关于写CSS，本民工比较习惯于手写，很多写样式软件写写得快是快，但写出来的东西总会觉得有种“不干净”的感觉。个人看法而已哈，不过既然是手写，CSS的缩写当然是要注意的，会让你的CSS看起来很简洁，也容易阅读。接下来，把经常用到的一些简写形式来总结一下。
颜色（color）
16进制的色彩值，如果每两位的值相同，可以缩写一半，
例如：#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸（margin、padding）
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1； 
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 
本民工的计算方法是按顺时针数，上右下左。
例如：margin:1em 0 2em 5px;
边框（border）
边框的属性如下：
border-width:1px; 
border-style:solid; 
border-color:#000; 
缩写的顺序其实都可以互换，不过推荐用以下的缩写顺序：
语法是border:width style color; 
例如上面的可缩写为：border:1px solid #000;
背景(Backgrounds)
背景的属性如下：
background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 
另外要注意的是position属性在缩写时如果只想定义其中一个，也需要把另一个加上。
字体(fonts)
字体的属性如下：
font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:&#8221;Lucida Grande&#8221;,sans-serif; 
可以缩写为一句：font:italic small-caps bold 1em/140% &#8221;Lucida Grande&#8221;,sans-serif;
要注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
不过font-family值大部分情况下都会全局定义，所以也不是经常用到。
列表(lists)
取消默认的圆点和序号用这句：list-style-type:none;
list的属性如下:
list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif); 
可以缩写为一句：list-style:square inside url(image.gif);
这个平时也用得少咯。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/227.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>什么是Ｗ3Ｃ标准？</title>
		<link>http://www.moondyzone.com/css/224.html</link>
		<comments>http://www.moondyzone.com/css/224.html#comments</comments>
		<pubDate>Mon, 02 Mar 2009 10:13:29 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[web标准]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=224</guid>
		<description><![CDATA[做为一个Web Desginer，不可能不跟ＷＥＢ标准打交道。但说起什么是Ｗ3Ｃ标准，却未必都能说得出。其实这种概念上的东西并不需要像记语法那样牢牢记住咯，理解以及应用才是关键。就好比之前一直按自己经验中的一个“标准”来做东西，直到后来才知道这个“标准”其实就是叫Ｗ3Ｃ标准。下面的东西基本上都摘自网络，就当做一个备忘咯。
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
　　1．结构标准语言
　　（1）XML
　　XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
　　（2）XHTML
　　XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
　　2. 表现标准语言
　　CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
　　3.行为标准
　　（1）DOM
　　DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
　　(2) ECMAScript
　　ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究如何看待W3C标准解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/224.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>先写HTML？还是先写CSS？</title>
		<link>http://www.moondyzone.com/css/222.html</link>
		<comments>http://www.moondyzone.com/css/222.html#comments</comments>
		<pubDate>Sun, 15 Feb 2009 08:05:03 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=222</guid>
		<description><![CDATA[关于这个问题，各人有各人的习惯吧，以前在公司的时候，有位同事的风格习惯很不一样，搞得有点相互不兼容，呵呵。
在构建一个页面的时候，是先写好HTML代码呢？还是先写好CSS呢？按标准来说，是先把HTML页面写好，再写CSS来定义，而且看起来很酷！但是在实际操作中，几乎不可能一次性把HTML先写好而不用修改的，也许因为构建思路的问题、或者一些事先没预料到的特殊问题、又或者因为浏览器兼容的问题……都有可能再去改动到HTML代码。当然，这样的改动是小意思了，主要是这样的方法不方便测试，在你的CSS没有写完之前，页面里会有很多还未定义的标签，预览的话页面有可能会乱，而且也不便于问题的排察。
大多数情况下，我还是建义HTML跟CSS同时进行，每写了一段之后用多个浏览器进行测试。至于写多少测试一下就要看各人的经验水平了。本人习惯的写法步骤是这样的：
写先好页面的布局部分，也就是外套，头部，中间部分以及中间部分的左、中、右，以及版权部分。我一般是先定义样式，然后再在DW里把该样式插入。
然后再写各部分的内容。比如说头部，我们可以在里面加LOGO部分，以及NAV部分等等。而NAV里我们有可能还会定义sub……就这样一层层地由外至内。
在这里，本民工也只是说说个人的一些见解，欢迎指正，共同学习、共同提高。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/222.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>总结下CSS布局中浮动元素的闭合方法</title>
		<link>http://www.moondyzone.com/css/206.html</link>
		<comments>http://www.moondyzone.com/css/206.html#comments</comments>
		<pubDate>Mon, 09 Feb 2009 07:32:11 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[清除浮动]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=206</guid>
		<description><![CDATA[我想只要是跟DIV+CSS打交道的朋友，肯定都碰到过闭合浮动元素的问题，或者叫做清除浮动元素。因为按照CSS的规范，浮动的元素（float）会被移出文档流，当它的高度超出其父容器的高度时，父容器不会自动伸长以闭合浮动元素。这就是我们所碰到的闭合浮动元素的问题。
解决此问题的方法有很多，下面一一分析一下。
一、额外标签法。
这是最常见是一种方法，也是W3C推荐使用的一种方法。此方法的做法就是在内容的末尾加上一个空标签，常用的做法是：
.clearfloat {clear:both;}
然后在内容的末尾加上
&#60;br class="clearfloat" /&#62;
或者
&#60;div class="clearfloat"&#62;&#60;/div&#62;

当然你也可以使用其它的块级元素，但是用&#60;br&#62;的话，在IE中能清除浮动但不能闭合元素。额外标签法的标准写法应该是这样的：
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
这样基本上就能适应所有的状况了。
此方法最为通用，但是由于增加了一个空标签，某些有“洁僻”的朋友会觉得HTML代码显得不够简洁。
二、使用after伪类
使用after伪类的做法就是在指定的现在内容末尾添加新的内容，通常是加一个小“.”，并把它隐藏，可以通过它来闭合浮动元素。但是，Win/IE6并不支持after伪类，所以还不得不单独针对Win/IE6进行hack处理。
.clearfloat {
display:inline-block;
}
/* Hack Begine \*/ 这里出现的反斜杠（\）是为了区分Win/IE跟Mac/IE，只针对Win/IE进行hack
* html .clearfloat {
height:1%;
}
.clearfloat {
display:block;
}
/* End Hack */

把此类加在浮动元素的父容器上就可以清除浮动。但本民工不喜欢用这种方法，因为我觉得用hack方法太烦琐不好掌握，而且又远离标准。
三、设置父容器的overflow
把父容器的overflow属性设为hidden或auto同样也能清除浮动，但是单单设置overflow属性在IE6中会不起作用，需要触发一下layout，一般可以指定一个维度，或者是用zoom:1;。
#clearfloat {
overflow:auto;
height:1%;
}
此方法用起来也很方便的，但是overflow有可能会影响到浏览器的表现，所以用此方法时多调试一下。另外，此方法能在浏览器表现正常，但是在Dreamweaver中浮动元素还是会乱。
四、浮动外部元素，float-in-float
给浮动元素的父容器也加上浮动属性，浮动元素能闭合浮动元素。此方法很方便，效果也好，但缺点也很明显，父容器并不是想浮动就浮动，相邻元素有可能会发生变化，再嵌套一层DIV的话又会觉得有些烦琐，所以此方法有可能会给布局增加难度。
总结
想要兼容浏览器闭合浮动元素的方法还是很多的，具体情况具体分析，在这里说的也未必详尽，如果哪位朋友有更好的方法或不同的意见，欢迎讨论与分享！
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/206.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DIV+CSS布局中常用的列表元素（ul ol li dl dt dd）详解</title>
		<link>http://www.moondyzone.com/css/200.html</link>
		<comments>http://www.moondyzone.com/css/200.html#comments</comments>
		<pubDate>Sun, 08 Feb 2009 02:41:44 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[列表]]></category>
		<category><![CDATA[布局]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=200</guid>
		<description><![CDATA[虽然DIV不像TABLE那要需要把容器内的内容都加载了才能显示，但是为了标准化，当然还是越少嵌套越好。
常用的列表元素有ul ol li dl dt dd，其中ul li用得比较多。先说说ol与ul，其实两者是一样的。
&#60;ol&#62;是有序列表

1
2
3
4
5
6
7
8
9
&#60;ol&#62;
&#60;li&#62;……&#60;/li&#62;
&#60;li&#62;……&#60;/li&#62;
&#60;li&#62;……&#60;/li&#62;
&#60;/ol&#62;
页面显示为：
1……
2……
3……

&#60;ul&#62;是无序列表
页面显示为li前是大圆点而不是123……
dl dt dd的用法

1
2
3
4
5
&#60;dl&#62;//dl为内容块
&#60;dt&#62;内容标题&#60;/dt&#62;//dt为内容块的标题
&#60;dd&#62;内容1&#60;/dd&#62;//dd为内容
&#60;dd&#62;内容2&#60;/dd&#62;
&#60;/dl&#62;

dt 和dd中可以再加入 ol ul li p等标签。熟练运用这些列表元素，可以在布局时减少DIV的嵌套。
相关文章完美的DIV三行三列自适应高度布局CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/200.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

