<?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>张经纬的博客 &#187; CSS</title>
	<atom:link href="http://www.zhangjingwei.com/archives/category/web-developer/css-web-developer/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zhangjingwei.com</link>
	<description></description>
	<lastBuildDate>Fri, 14 Oct 2011 09:01:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>CSS3 的显示与隐藏</title>
		<link>http://www.zhangjingwei.com/archives/css3-show-and-hide/</link>
		<comments>http://www.zhangjingwei.com/archives/css3-show-and-hide/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 04:38:24 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1480</guid>
		<description><![CDATA[演示地址：http://www.zhangjingwei.com/demo/css-menu.html &#60; !DOCTYPE html&#62; &#60;head&#62; &#60;title&#62;menu mockup&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; .show {display: none; } .hide:focus + .show {display: inline; } .hide:focus { display: none; } .hide:focus ~ #list { display:none; } @media print { .hide, .show { display: none; } } &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;p&#62;Here's a list&#60;/p&#62; &#60;div&#62; &#60;a href=&#34;#&#34; class=&#34;hide&#34;&#62;[hide]&#60;/a&#62; &#60;a href=&#34;#&#34; class=&#34;show&#34;&#62;[show]&#60;/a&#62; &#60;ol id=&#34;list&#34;&#62; [...]]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/css3-show-and-hide/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Rel与CSS的联合使用</title>
		<link>http://www.zhangjingwei.com/archives/rel-licensecss/</link>
		<comments>http://www.zhangjingwei.com/archives/rel-licensecss/#comments</comments>
		<pubDate>Mon, 08 Feb 2010 09:13:47 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[rel]]></category>
		<category><![CDATA[sns]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1372</guid>
		<description><![CDATA[Rel-License 是微格式的开发标准之一，简单的说就是通过给引用标签（通常是链接）加上REL属性，来标明所引用链接/数据与文章的关系。 WordPress很早就引入了rel标准，在我们添加新链接的时候就可以看到“关系”属性。 早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系，但它对网页开发来说并无意义，值得庆幸的是随着浏览器的逐渐升级，我们可以利用CSS属性选择器以及REL来做一些有意思的功能。 这是一段带有REL属性的HTML结构。 &#60;ul&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;civil&#34;&#62;小李&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;party&#34;&#62;局长&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; 页面中他呈现这个样子 因为局长和小李是两个不同的阶级，所以我们应该有区分他们，我打算在小李和局长后面增加两张图片让他表现出这个样式。 过去，我们需要在两个链接标签上增加不同的class来实现这种样式，并且我们需要针对不同的样式书写不同的CSS .c,.b &#123;background:url&#40;01.png&#41; right center no-repeat;&#125; .b &#123;background-image:url&#40;02.png&#41;;&#125; &#60;ul&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;civil&#34; class=&#34;c&#34;&#62;小李&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;party&#34; class=&#34;b&#34;&#62;局长&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; 现在，我们可以利用REL属性以及属性选择器来完成这个工作。 a&#91;rel~=&#34;civil&#34;&#93;&#123;background:url&#40;01.png&#41; right center no-repeat;&#125; a&#91;rel~=&#34;party&#34;&#93;&#123;background:url&#40;02.png&#41; right center no-repeat;&#125; 同时，我们的HTML结构也可以剔除那些多余的样式了。 &#60;ul&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;civil&#34;&#62;小李&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34; rel=&#34;party&#34;&#62;局长&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; 另外:ie6不支持属性选择器，但我们可以用JS来修复这个问题。]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/rel-licensecss/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firefox的新属性 pointer-events</title>
		<link>http://www.zhangjingwei.com/archives/pointer-events/</link>
		<comments>http://www.zhangjingwei.com/archives/pointer-events/#comments</comments>
		<pubDate>Tue, 01 Dec 2009 17:16:02 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[pointer-events]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1297</guid>
		<description><![CDATA[Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持，这次Firefox把他扩展到了常见的HTML元素上。 pointer-events的语法为 pointer-events: auto &#124; none &#124; visiblePainted &#124; visibleFill &#124; visibleStroke &#124; visible &#124; painted &#124; fill &#124; stroke &#124; all &#124; inherit 其中auto和none可针对所有的元素使用，其它的值只针对SVG。 （as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML [...]]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/pointer-events/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Overflow Auto &amp;&amp; Position Relative</title>
		<link>http://www.zhangjingwei.com/archives/overflow-auto-and-position-relative/</link>
		<comments>http://www.zhangjingwei.com/archives/overflow-auto-and-position-relative/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 03:30:29 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Overflow]]></category>
		<category><![CDATA[Position]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1142</guid>
		<description><![CDATA[常见的双倍边距类问题都遇到过，但很少遇到这种有意思的，所以记录一下。 这个BUG是发生在Standards模式下（就是包含XHTML或者HTML4.0的DOCTYPE时） 看这段代码 &#60; !DOCTYPE&#62; ul &#123;margin:0; padding:0;&#125; li &#123;list-style:none;&#125; #test&#123;overflow:auto;height:200px; widows:200px; border:1px solid #000;&#125; #test li &#123;position:relative;&#125; &#60;div id=&#34;test&#34;&#62; &#60;ul&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;li&#62;测试&#60;/li&#62; &#60;/ul&#62; &#60;/div&#62; 原本我认为溢出的文字会触发滚动条，但并没有呈现。 http://www.zhangjingwei.com/demo/overflow&#038;position/demo_01.html 在IE6或者IE7内，溢出的文字呈现绝对定位（position:absolute）的形式。 解决方法： 在父级元素元素上设置属性position:relative http://www.zhangjingwei.com/demo/overflow&#038;position/demo_02.html 来源：http://rowanw.com/bugs/overflow_relative.htm]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/overflow-auto-and-position-relative/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>CSS 的模块化思想</title>
		<link>http://www.zhangjingwei.com/archives/css-block/</link>
		<comments>http://www.zhangjingwei.com/archives/css-block/#comments</comments>
		<pubDate>Mon, 02 Feb 2009 15:41:48 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[模块化]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=553</guid>
		<description><![CDATA[在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这个其实就是模块化思想。（作者也提了这一点）。 我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。 1、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。 例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用） * &#123;margin:0;padding:0;border:none;outline:none;&#125; .cb &#123;clear:both;&#125; .blank10 &#123;height:10px; font-size:1px; overflow:hidden; clear:both;&#125; 2、在页面中按照结构模块化书写样式表，避免样式之间的干扰，并且方便浏览。 例如下面的这个结构 &#60;!-- 左边 --&#62; &#60;div&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;/div&#62; &#60;!-- 右边 --&#62; &#60;div&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;/div&#62; 有一部分同学可能会这样写 .wrap_content_box &#123;float:left;&#125; .wrap_content_box h2 &#123;...&#125; &#60;!-- 左边 --&#62; &#60;div class=&#34;wrap_content_box&#34;&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;/div&#62; &#60;!-- 右边 --&#62; &#60;div class=&#34;wrap_content_box&#34;&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;h2&#62;...&#60;/h2&#62; &#60;/div&#62; 刚刚看上去的时候效果很不错，一切都很完美，代码少，效果也实现了，但如果有一天，我们需要将所有h2的样式变的各不相同时，情况仿佛不乐观了。 [...]]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/css-block/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>取消透明度继承的方法</title>
		<link>http://www.zhangjingwei.com/archives/fix_opacity/</link>
		<comments>http://www.zhangjingwei.com/archives/fix_opacity/#comments</comments>
		<pubDate>Mon, 19 Jan 2009 16:00:28 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[继承]]></category>
		<category><![CDATA[透明度]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=521</guid>
		<description><![CDATA[文中的内容使用叠盖的方法组合而成，已经没有继承了，文章标题，有歧义，回复中有朋友提出来了这一点，这里补充说明。 最近做活动页面的时候，遇到一个透明层的问题。当父级元素设置透明度后，子元素继承(inherit)了父元素的透明度值。在网上找了一下，虽然Google到一个取消透明度继承的,但是那个方法用到太多的CSS HACK，指不定什么时候浏览器升级了，这些HACK就成了地雷。于是自己琢磨了一个办法，取消了透明度的继承，并且没有使用到HACK。 思路： 利用相对定位和绝对定位。相对定位撑开高度，绝对定位充当透明层。相对定位的元素盖在绝对定位的层上。 问题： 绝对定位中没有内容，要事先声明有一个绝对高的高度，但是不能超过32768像素。 Demo： http://www.zhangjingwei.com/demo/fix_opacity/ 样式表如下 body &#123; background:url&#40;http://www.google.com/intl/en_ALL/images/logo.gif&#41; repeat; &#125; #wrap_1 &#123; width:300px; padding:20px; color:#F00; background:#000; position:relative; filter:alpha&#40;opacity=50&#41;; -ms-filter:&#34;alpha(opacity=50)&#34;; -moz-opacity:0.5; -khtml-opacity: 0.5; opacity:0.5; &#125; #wrap_2 &#123; width:300px; padding:20px; color:#F00; position:relative; /*父元素为相对定位*/ overflow:hidden; &#125; #wrap_2_content &#123; position:relative; /*内容相对定位，盖在透明层上*/ &#125; #wrap_2 .fixopacity &#123; width:340px; background:#000; height:32768px; /*一个足够高的高度*/ position:absolute; /*使用绝对定位*/ top:0; left:0; z-index:-1; [...]]]></description>
		<wfw:commentRss>http://www.zhangjingwei.com/archives/fix_opacity/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>

