<?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>web集结号 &#187; css技巧</title>
	<atom:link href="http://www.songlecn.com/tag/css%e6%8a%80%e5%b7%a7/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.songlecn.com</link>
	<description>专注于web表现层技术</description>
	<lastBuildDate>Wed, 04 Nov 2009 02:46:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>css圆角效果又一则</title>
		<link>http://www.songlecn.com/2009/03/450/</link>
		<comments>http://www.songlecn.com/2009/03/450/#comments</comments>
		<pubDate>Mon, 09 Mar 2009 02:19:28 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css圆角]]></category>
		<category><![CDATA[css技巧]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=450</guid>
		<description><![CDATA[<script type="text/javascript">
function runcode_open_new(element)
{
	var code = document.getElementById(element).value;
	var win = window.open("", "", "");
	win.opener = null;
	win.document.write(code);
	win.document.close();
}
function runcode_copy(element)
{
	var codeobj = document.getElementById(element);
	var meintext = codeobj.value;
	try {
	 if (window.clipboardData)
	   {
	   window.clipboardData.setData("Text", meintext);
	   }
	   else if (window.netscape)
	   {
	   netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
	   var clip = Components.classes['@mozilla.org/widget/clipboard;1']
					 .createInstance(Components.interfaces.nsIClipboard);
	   if (!clip) return;
	   var trans = Components.classes['@mozilla.org/widget/transferable;1']
					  .createInstance(Components.interfaces.nsITransferable);
	   if (!trans) return;
	   trans.addDataFlavor('text/unicode');
	   var str = new Object();
	   var len = new Object();
	   var str = Components.classes["@mozilla.org/supports-string;1"]
					.createInstance(Components.interfaces.nsISupportsString);
	   var copytext=meintext;
	   str.data=copytext;
	   trans.setTransferData("text/unicode",str,copytext.length*2);
	   var clipid=Components.interfaces.nsIClipboard;
	   if (!clip) return false;
	   clip.setData(trans,null,clipid.kGlobalClipboard);
	   }
	} catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。');		codeobj.focus();
	}
	codeobj.select();
   return false;
}
</script>css圆角效果又一则，配合少许图片和js实现的css圆角，还不错，简单 &#60;script type=&#34;text/javascript&#34; src=&#34;http://www.songlecn.com/wp-content/supload/2009/03/09/cb.js&#34;&#62;&#60;/script&#62; &#60;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#34;http://www.songlecn.com/wp-content/supload/2009/03/09/corner.css&#34;&#62; &#60;body&#62; &#60;SCRIPT LANGUAGE=&#34;JavaScript&#34;&#62; var abc; function k1(event){ abc = new createCornerDiv(200, null , null , 'test',event); out_biaozhi=true; } function k2(event){ abc = new createCornerDiv(350, null , null ,'&#60;div style=&#34;font-size:12px;&#34;&#62;事件名：&#60;input type=&#34;text&#34; value=&#34;test&#34; id=&#34;&#34; /&#62;&#60;br/&#62;'+ '事件开始时间：&#60;input type=&#34;text&#34; value=&#34;test&#34; id=&#34;&#34; /&#62;&#60;br/&#62;'+ '事件结束时间：&#60;input type=&#34;text&#34; value=&#34;test&#34; id=&#34;&#34; /&#62;&#60;br/&#62;'+ '&#60;input type=&#34;button&#34; value=&#34;创建活动&#34; /&#62;&#38;nbsp;&#38;nbsp;&#60;a [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/03/450/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>最全的CSS浏览器兼容问题整理</title>
		<link>http://www.songlecn.com/2009/03/438/</link>
		<comments>http://www.songlecn.com/2009/03/438/#comments</comments>
		<pubDate>Sat, 07 Mar 2009 02:05:47 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>
		<category><![CDATA[浏览器兼容]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=438</guid>
		<description><![CDATA[从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.  CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;    例如：    &#60;#div id=”imfloat”&#62;    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/}  3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;   4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。    比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：    #box{ width: 80px; height: 35px;}html&#62;body #box{ width: auto; height: auto; [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/03/438/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>5个CSS书写技巧</title>
		<link>http://www.songlecn.com/2009/03/434/</link>
		<comments>http://www.songlecn.com/2009/03/434/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 23:55:44 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=434</guid>
		<description><![CDATA[5个CSS书写技巧 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset. 不要使用* { margin: 0; padding: 0; } 。我个人很爱用，原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单选按钮，如果有，又重新给单选按钮重设就好了嘛。 2. 按字母顺序来排列css 不按字母顺序排的 div#header h1 { z-index: 101; color: #000; position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px; } 按字母顺序排的 div#header h1 {  border-bottom: 1px solid #dedede;  color: #000;  font-size: [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/03/434/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>在ie6中DIV最小高度的解决方法</title>
		<link>http://www.songlecn.com/2009/03/399/</link>
		<comments>http://www.songlecn.com/2009/03/399/#comments</comments>
		<pubDate>Mon, 02 Mar 2009 03:39:07 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>
		<category><![CDATA[ie6]]></category>
		<category><![CDATA[overflow]]></category>
		<category><![CDATA[最小高度]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=399</guid>
		<description><![CDATA[IE6下默认的字体尺寸大致在 12 &#8211; 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层 要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 或者 都可以阻止 IE 的自作聪明。 推荐使用overflow来解决问题]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/03/399/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10个CSS简写技巧让你永远受用</title>
		<link>http://www.songlecn.com/2009/02/382/</link>
		<comments>http://www.songlecn.com/2009/02/382/#comments</comments>
		<pubDate>Sat, 28 Feb 2009 04:12:19 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>
		<category><![CDATA[css简写]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=382</guid>
		<description><![CDATA[CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降 　　今天，暴风彬彬整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。不过没关系，看过本文之后，你一能能掌握CSS代码优化的技巧，今后让你的每一个CSS样式表都看起来整洁而简短吧。 属性值为0 书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写: padding: 10px 5px 0px 0px; 试试这样吧: padding: 10px 5px 0 0;   移除选择器 　　选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。 div#logowrap 尝试扔掉多余的选择器吧: #logowrap 在这个例子中所谓的那个选择器就是div   *总爱和你开玩笑 　　要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如: * {     margin: 0; } 这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置: #menu * {     margin: 0; } 这样的声明是指将#menu下的所有元素的margin设为0。   背景 　　背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成: background-image: url(”logo.png”); background-position: top center; [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/02/382/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>几种有用的CSS技巧</title>
		<link>http://www.songlecn.com/2009/01/57/</link>
		<comments>http://www.songlecn.com/2009/01/57/#comments</comments>
		<pubDate>Thu, 22 Jan 2009 02:47:40 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css技巧]]></category>
		<category><![CDATA[web2.0]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=57</guid>
		<description><![CDATA[1、重置浏览器的默认设置 首先将以下代码加到你的全局css文件中： 下载: css1.css1 2 3 4 5 6 7 8 9 10 11 12 /*1.Reset browser defaults then reset the browser font size*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td &#123;margin:0; padding:0; &#125; table &#123; border-collapse:collapse; border-spacing:0; &#125; fieldset,img &#123; border:0; &#125; address,caption,cite,code,dfn,em,strong,th,var&#123;font-style:normal;font-weight:normal;&#125; ol,ul &#123; list-style:none; &#125; caption,th &#123; text-align:left; &#125; h1,h2,h3,h4,h5,h6 &#123; font-size:100%; font-weight:normal; &#125; q:before,q:after &#123; content:“; [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/01/57/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

