<?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>DesignStudio-50M深蓝 &#187; css</title>
	<atom:link href="http://www.design-studio.cn/blog/post/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.design-studio.cn/blog</link>
	<description>专注于互联网体验...</description>
	<lastBuildDate>Thu, 08 Apr 2010 09:56:02 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS命名规划整理</title>
		<link>http://www.design-studio.cn/blog/post/1112.html</link>
		<comments>http://www.design-studio.cn/blog/post/1112.html#comments</comments>
		<pubDate>Tue, 26 Jan 2010 17:06:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS命名]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1112</guid>
		<description><![CDATA[(一) 常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper

左右中：leftrightcenter
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
(二) 注释的写法：
/*Footer*/
内容区
/*EndFooter*/
(三) id的命名：
(1)页面结构
容器：container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：leftrightcenter
(2)导航：
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题:title
摘要:summary
(3)功能：
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的:current
小技巧：tips
图标:icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四) class的命名：
(1)颜色：使用颜色的名称或者16进制代码，如：

1
2
3
.red&#123;color:red;&#125;
.f60&#123;color:#f60;&#125;
.ff8600&#123;color:#ff8600;&#125;

(2)字体大小，直接使用“font+字体大小”作为名称，如：

1
2
.font12px&#123;font-size:12px;&#125;
.font9pt&#123;font-size:9pt;&#125;

(3)对齐样式，使用对齐目标的英文名称，如：

1
2
.left&#123;float:left;&#125;
.bottom&#123;float:bottom;&#125;

(4)标题栏样式，使用”类别+功能”的方式命名，如：

1
2
.barnews&#123;&#125;
.barproduct&#123;&#125;

(五) 文件名命名：
主要的：master.css
模块：module.css
基本共用：base.css
布局，版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css
(六) 注意事项：
(1)一律小写。
(2)尽量用英文。
(3)不加中杠和下划线。
(4)尽量不缩写，除非一看就明白的单词。
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/1112.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS hack 完全手册 ( IE5.5 IE6 IE7 IE8 FF Opera Safari&#8230;)</title>
		<link>http://www.design-studio.cn/blog/post/352.html</link>
		<comments>http://www.design-studio.cn/blog/post/352.html#comments</comments>
		<pubDate>Thu, 24 Sep 2009 16:54:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS hack]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/archives/352</guid>
		<description><![CDATA[区别 IE5.5、IE6、IE7、IE8、w3c

1
2
3
4
5
6
7
.qq&#123;
background:#f00;                    /* w3c IE8 IE7 IE6*/
background/*\**/:#fdd\9;           /* IE8 IE7 IE6 */       
*background:#00f;        [...]]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/352.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>css布局精髓</title>
		<link>http://www.design-studio.cn/blog/post/326.html</link>
		<comments>http://www.design-studio.cn/blog/post/326.html#comments</comments>
		<pubDate>Tue, 06 Jan 2009 19:31:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css布局]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/archives/326</guid>
		<description><![CDATA[
很好的参考案例，值得研究，打开
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/326.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>容器不扩展问题</title>
		<link>http://www.design-studio.cn/blog/post/189.html</link>
		<comments>http://www.design-studio.cn/blog/post/189.html#comments</comments>
		<pubDate>Wed, 27 Feb 2008 17:50:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=189</guid>
		<description><![CDATA[解决办法：在divGroup里面加上

1
overflow:hidden;zoom:1;

ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/189.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>高度不适应</title>
		<link>http://www.design-studio.cn/blog/post/187.html</link>
		<comments>http://www.design-studio.cn/blog/post/187.html#comments</comments>
		<pubDate>Wed, 27 Feb 2008 11:03:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=187</guid>
		<description><![CDATA[1.问题起因
高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层的对象使用margin或者padding只后。
如下：

1
2
3
4
5
6
7
8
#box &#123;
	background-color:#eee;
&#125;
#box p &#123;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
&#125;

解决：使用空div来占位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#box &#123;
	background-color:#eee;
&#125;
p &#123;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
&#125;
.clear-div &#123;
	height:0px;
	overflow:hidden;
&#125;
.box2 &#123;
	background-color:#aaa;
&#125;

或者为DIV加上border属性
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/187.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中position的absolute和relative</title>
		<link>http://www.design-studio.cn/blog/post/150.html</link>
		<comments>http://www.design-studio.cn/blog/post/150.html#comments</comments>
		<pubDate>Thu, 31 Jan 2008 11:07:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=150</guid>
		<description><![CDATA[之前老弄不明白position到底是怎么定位的，position属性其实是指本体对上级的定位。
默认的属性值都是static，静态。最关键的是relative（相对）以及absolute（绝对）。
只要把其上一级的样式属性position设置为relative就可以了。

1
2
3
&#60;div id=&#34;A&#34;&#62;
     &#60;div id=&#34;B&#34;&#62;some text here&#60;/div&#62;
 &#60;/div&#62;

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/150.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>FireFox文本自动换行处理，如何实现FireFox文本自动换行</title>
		<link>http://www.design-studio.cn/blog/post/55.html</link>
		<comments>http://www.design-studio.cn/blog/post/55.html#comments</comments>
		<pubDate>Mon, 31 Dec 2007 03:47:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web观察]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=55</guid>
		<description><![CDATA[<p>FireFox文本自动换行处理，如何实现FireFox文本自动换行<br /><br/><b>文本自动换行IE中解决方法：</b></p><div class="daima">word-wrap:break-word;<br /><br/>word-break:break-all;</div><p>注：在要换行的内容相应的单元格或者DIV里加入，如：</p><div class="daima">&#60;div style=word-wrap:break-word;&#62;&#60;/div&#62;或&#60;td style=word-wrap:break-word;&#62;&#60;/td&#62;</div><p><b>文本自动换行FireFox中解决方法（脚本）：</b></p><div class="daima">&#60;script type=&#34;text/javascript&#34;&#62;<br /><br/>function toBreakWord(intLen, id){<br /><br/>var obj=document.getElementById(id);<br /><br/>var strContent=obj.innerHTML; <br /><br/>var strTemp=&#34;&#34;;<br /><br/>while(strContent.length&#62;intLen){<br /><br/>strTemp+=strContent.substr(0,intLen)+&#34;&#60;br&#62;&#34;; <br /><br/>strContent=strContent.substr(intLen,strContent.length); <br /><br/>}<br /><br/>strTemp+= strContent;<br /><br/>obj.innerHTML=strTemp;<br /><br/>}<br /><br/>&#60;/script&#62;<br /><br/>&#160;<br /><br/>&#160;</div><p><br /><br/>注：以上脚本放在&#60;/head&#62;前面.<br /><br/><br /><br/>调用时如下写法：</p><p><b>同个页面单处调用：</b></p><div class="daima">&#60;div id=&#34;content&#34;&#62;这里是要应用换行的内容&#60;/div&#62;&#60;script language=&#34;javascript&#34;&#62;toBreakWord(60, &#34;content&#34;);&#60;/script&#62;</div><p><b>同个页面多处调用：</b></p><div class="daima">&#60;div id=&#34;content&#34;&#62;这里是要应用换行的内容&#60;/div&#62;&#60;script language=&#34;javascript&#34;&#62;toBreakWord(60, &#34;content&#34;);&#60;/script&#62;<br /><br/>&#60;div id=&#34;content2&#34;&#62;这里是要应用换行的内容&#60;/div&#62;&#60;script language=&#34;javascript&#34;&#62;toBreakWord(60, &#34;content2&#34;);&#60;/script&#62;</div><p><br /><br/>注：把应用的JS写在&#60;/div&#62;后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的<br /><br/>&#160;</p><div class="daima">&#60;script language=&#34;javascript&#34;&#62;toBreakWord(60, &#34;content&#34;);&#60;/script&#62;</div><p><br /><br/>这段JS，如果不是就要输出。</p><p>&#160;</p>
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/55.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何让Div中的内容对齐底部或者垂直居中</title>
		<link>http://www.design-studio.cn/blog/post/53.html</link>
		<comments>http://www.design-studio.cn/blog/post/53.html#comments</comments>
		<pubDate>Mon, 31 Dec 2007 03:41:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=53</guid>
		<description><![CDATA[<p>&#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&#38;quo 。。。</p>
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/53.html/feed</wfw:commentRss>
		<slash:comments>78</slash:comments>
		</item>
		<item>
		<title>div li 表格应用</title>
		<link>http://www.design-studio.cn/blog/post/52.html</link>
		<comments>http://www.design-studio.cn/blog/post/52.html#comments</comments>
		<pubDate>Mon, 31 Dec 2007 03:40:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=52</guid>
		<description><![CDATA[<p>&#60;html&#62;&#60;head&#62;&#60;style&#62;&#60;!--#table {clear:none;width:300px;border-top:1px #000 solid;}#table ul {clear:left;margin:0px;padding:0px;width:301px;list-style-type:none;border-bottom:1px #0 。。。</p>
]]></description>
		<wfw:commentRss>http://www.design-studio.cn/blog/post/52.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
