?!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
webthink-浅谈CSS编码与组织技?/title>
</head>
<body class="single">
<script language="JavaScript" type="text/javascript">
var str00="http://www.webthink.com.cn/blog/";
var str01="名称或邮箱不能为?;
var str02="名称或邮箱格式不?;
var str03="留言不能为空或过?;
var str06="显示UBB表情>>";
var intMaxLen="1000";
var strFaceName="Haha|Hehe|Love|Misdoubt|Music|Nothing_to_say|Sad|Shame|Sleep|Smile|Stop|What|Adore|After_boom|Angry|Cool|Cry|Effort|Faint|Grimace";
var strFaceSize="48";
var strBatchView="";
var strBatchInculde="";
var strBatchCount="";
</script>
<script language="JavaScript" type="text/javascript">LoadActiveStyleSheetInter();</script>
<div id="NaviBarWrapper">
<div id="NaviBar">
<h3>导航</h3>
<ul>
<li><a href="http://www.webthink.com.cn/blog/">Index</a></li>
<li><a href="http://www.webthink.com.cn/blog/search.asp">Search</a></li>
<li><a href="http://www.webthink.com.cn/blog/tags.asp">TagCloud</a></li>
<li><a href="http://www.webthink.com.cn/blog/guestbook.asp">GuestBook</a></li>
<li><a href="http://www.webthink.com.cn/blog/cmd.asp?act=login">Admin</a></li>
</ul>
</div>
</div>
<div id="Wrapper">
<div id="MainPage">
<div id="InnerMainPage">
<div id="Header">
<div id="InnerHeader">
<div id="CostomMenuUp">
<h3>导航</h3>
<ul>
<li><a href="http://www.webthink.com.cn/blog/">Index</a></li>
<li><a href="http://www.webthink.com.cn/blog/search.asp">Search</a></li>
<li><a href="http://www.webthink.com.cn/blog/tags.asp">TagCloud</a></li>
<li><a href="http://www.webthink.com.cn/blog/guestbook.asp">GuestBook</a></li>
<li><a href="http://www.webthink.com.cn/blog/cmd.asp?act=login">Admin</a></li>
</ul>
</div>
<div id="BlogTitleWrapper">
<h1 id="BlogTitle"><a href="http://www.webthink.com.cn/blog/"></a></h1>
<h2 id="BlogSubTitle"> </h2>
</div>
<div id="CostomMenuDown">
<h3>导航</h3>
<ul>
<li><a href="http://www.webthink.com.cn/blog/">Index</a></li>
<li><a href="http://www.webthink.com.cn/blog/search.asp">Search</a></li>
<li><a href="http://www.webthink.com.cn/blog/tags.asp">TagCloud</a></li>
<li><a href="http://www.webthink.com.cn/blog/guestbook.asp">GuestBook</a></li>
<li><a href="http://www.webthink.com.cn/blog/cmd.asp?act=login">Admin</a></li>
</ul>
</div>
</div>
</div>
<div id="Content">
<div id="InnerContent">
<div id="ContentArticle">
<div id="InnerContentArticle">
<div class="article cate4 auth1">
<div class="article-nav"><a class="l" href="http://www.webthink.com.cn/blog/post/50.html">« 在网思树立自己的自信</a><a class="r" href="http://www.webthink.com.cn/blog/post/52.html">CSS hack的一些思?我们该如何面对它?»</a></div>
<h4 class="article-date">2007-7-25 15:22:36</h4>
<div class="article-datebox-wrapper">
<div class="article-datebox">
<div class="article-datebox-year">2007 </div>
<div class="article-datebox-month">Jul</div>
<div class="article-datebox-day">25</div>
<div class="article-datebox-weekday">Wednesday</div>
</div>
</div>
<h6 class="article-header">发布:网? <a href="http://www.webthink.com.cn/blog/style/international/common/edit.asp?act=mngart&id=51">文章管理</a></h6>
<h2 class="article-title">浅谈CSS编码与组织技?/h2>
<div class="article-body"><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p><font face="Times New Roman"> </font></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 尽管我们有种?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> CSS </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">的开发工具，比如</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> TopStyle</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">，比?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> StyleMaster</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">，它们可以让你对当前这个样式表里面定义了哪些规则，涉及哪?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> class</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">，哪?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> ID </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">一目了然，但这不等于说你的样式表就组织清晰了，随写，随看，随改大概是我们常用的开发方式，一开始样式表还有点层次，后面这里加一点，那里加一点，就越来越乱了。所以不妨考虑规范一下你的写作方式?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 大概有两种组织方式，一种是我们常用的，把所有的描述同一个元?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> (</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">和它的子元素</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">) </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">的规则都放到一起来，那么如果需要查阅页面中某个元素究竟受哪些规则影响的时候，就不必在整个样式表中翻来翻去了?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><span style="mso-spacerun: yes"><font face="Times New Roman"> </font></span></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 另一种也值得参考，即，把描述某些特性的规则放到一处，把描述另一些特性的放到另一处，比如说关于颜色的定义，放?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> color.css </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">文件中，描述字体的定义，放到</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> font.css </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">中，描述布局的定义，放到</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> layout.css </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">中，这也能让你的样式表结构清晰，方便理解。最大的优点是，如果你希望换一套配色方案，可以只修改一?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> color.css</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">，完全不必担心其他的规则是否会影响页面的颜色?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 19.5pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">在传统的程序设计中，我们常常提到程序的风格是如何重要，培养良好的编码风格甚至远比掌握程序的语法和语义重要，尽?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> Web </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">设计者不一定要掌握那些程序设计的技巧，但培养良好的</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> CSS </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">编写风格的确是很有用的?/span><span style="FONT-SIZE: 10pt"><font face="Times New Roman"> <span lang="EN-US"><o:p></o:p></span></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 19.5pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p><font face="Times New Roman"> </font></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><strong style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">使用属性缩?/span></strong><strong style="mso-bidi-font-weight: normal"><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 首先，有这么几个常用的属性缩写：</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">font <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">background <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">list-style <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">margin <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">border <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">padding<o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><span style="mso-spacerun: yes"><font face="Times New Roman"> </font></span></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 多数是可以把几个常规属性合并到一起使用的，也就是说，可以给这些简记属性赋予好几个值，每个值之间用空格分隔?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 第三?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">margin, border </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> padding </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">都遵循中顺时针原则，如果给定了四个值，从上方开始每次顺时针?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> 90 </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">度?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 如果给定了三个值，则是上侧一种，左右同一种，下侧一种?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 如果给定了两个值，就是上下一种，左右一种?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 如果只给了一个值，那就是都一样?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 19.5pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">简记属性（属性缩写）的使用，见仁见智，一方面，它的确是可以大大缩短代?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> (</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">如果用得频繁的话</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">)</font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">，另一方面，修改的时候又未免带来不直观和不方便?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 19.5pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"><span style="mso-spacerun: yes"> </span><o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><strong style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">利用继承和默认值?/span></strong><strong style="mso-bidi-font-weight: normal"><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 首先，继承和默认值在</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> W<st1:chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</st1:chmetcnv> </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">标准中都没有严格</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> (must) </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">的规定，浏览器未必真的会像你预期的那样去实现，某些属性的默认值真的是</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> 0 </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">么？在所有浏览器里都?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> 0 </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">么？需要反复尝试后总结经验；再者，如果代码中含有过多的这样?ldquo;隐喻”，就未免不大好读了，某某元素会显示出某某特性，乃是继承自它的父元素……在编写样式表的当天你可能还清楚，过一段时间忘了，就会很奇怪为什么不曾定义这个规则却又显现出那个特性了?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 所以建议，如果你要用到继承和默认值来简化代码的话，最好写下一些注释予以说明?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">利用多个</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> class </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">和多元选择符?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 一?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> HTML </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">元素可以属于多个类，比如这样?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"><td class="subtotal negative">(-$422.72)</td><o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 你可以给“合?rdquo;的那些表格栏设定一个样式，再给包含负数的那些表格栏设定一个样式，把它们叠加在上面?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">.subtotal {font-weight: bold;}<o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman">.negative {color: red;}<o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> 这种特性有时能够让你很灵巧地实现一些功能，即缩短了</span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> HTML </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">代码，又清晰?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> CSS </font></span><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">规则?/span><span lang="EN-US" style="FONT-SIZE: 10pt"><font face="Times New Roman"> <o:p></o:p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 10pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"> </span><span lang="EN-US" style="FONT-SIZE: 10pt"><o:p></o:p></span></p></div>
<h5 class="article-tags">Tags: </h5>
<h6 class="article-footer">
分类:网站建设 | 评论:0 | 引用:0 | 浏览:<span id="spn51"></span>
<script language="JavaScript" type="text/javascript">strBatchCount+="spn51=51,"</script>
</h6>
</div>
<ul id="GetTrackback">
<li><a href="http://www.webthink.com.cn/blog/cmd.asp?act=gettburl&id=51" target="_blank">点击这里获取该日志的TrackBack引用地址</a></li>
</ul>
<div id="MutualityArticle">
<ul>
<li class="tbname">相关文章:</li>
<li class="msgarticle"></li>
</ul>
</div>
<div id="MsgList">
<div style="display:none;" id="divAjaxComment"></div>
</div>
<div class="article" id="divCommentPost">
<p class="posttop"><a name="comment">发表评论:</a></p>
<form id="frmSumbit" target="_self" method="post" action="http://www.webthink.com.cn/blog/cmd.asp?act=cmt&key=4fe77a1f" >
<input type="hidden" name="inpId" id="inpId" value="51" />
<input type="hidden" name="inpArticle" id="inpArticle" value="" />
<input type="hidden" name="inpLocation" id="inpLocation" value="" />
<p><input type="text" name="inpName" id="inpName" class="text" value="" size="25" tabindex="1" /> <label for="inpName">名称(*)</label></p>
<p><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="25" tabindex="2" /> <label for="inpEmail">邮箱</label></p>
<p><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="25" tabindex="3" /> <label for="inpHomePage">网站链接</label></p>
<p><input type="text" name="inpVerify" id="inpVerify" class="verifytext" value="" size="28" tabindex="4" /> <label for="inpVerify"> <img style="border:1px solid black;cursor:pointer;" align="absbottom" src="http://www.webthink.com.cn/blog/function/c_validcode.asp?name=commentvalid" onclick="this.src = str00+ 'function/c_validcode.asp?' + Math.random();" height="20" width="60" alt="" title=""/> 验证(*)</label></p>
<p><label for="txaArticle">正文(*)(留言最长字?1000)</label></p>
<p><textarea name="txaArticle" id="txaArticle" onchange="GetActiveText(this.id);" onclick="GetActiveText(this.id);" onfocus="GetActiveText(this.id);" class="text" cols="28" rows="8" tabindex="5" ></textarea></p>
<p><input name="btnSumbit" type="submit" tabindex="6" value="提交" onclick="JavaScript:return VerifyMessage()" class="button" /></p>
<p><input type="checkbox" name="chkRemember" value="1" id="chkRemember" /><label for="chkRemember">记住?下次回复时不用重新输入个人信?/label></p>
<script language="JavaScript" type="text/javascript">objActive="txaArticle";ExportUbbFrame();</script>
</form>
<p class="postbottom">◎欢迎参与讨论，请在这里发表您的看法、交流您的观点?/p>
<script language="JavaScript" type="text/javascript">LoadRememberInfo();</script>
</div>
<div class="articleclear">article.clear</div>
</div>
</div>
<div id="ContentPanelLeft">
<div id="InnerContentPanelLeft">
<div class="PanelElement" id="divCalendar">
<h3>日历</h3>
<div id="divCalendar2"><script language="JavaScript" type="text/javascript">strBatchInculde+="divCalendar2=calendar,"</script></div>
</div>
<div class="PanelElement" id="divSearchPanel">
<h3>Search</h3>
<ul>
<li>
<form method="post" action="http://www.webthink.com.cn/blog/cmd.asp?act=Search">
<input type="text" name="edtSearch" id="edtSearch" size="20" class="text" />
<input type="submit" value="Search" name="btnPost" id="btnPost" class="button" />
</form>
</li>
</ul>
</div>
<div class="PanelElement" id="divCatalog">
<h3>网站目录</h3>
<ul>
<li><span class="feed-icon"><a href="http://www.webthink.com.cn/blog/sydication.asp?cate=4" target="_blank"><img title="rss" width="20" height="12" src="http://www.webthink.com.cn/blog/IMAGE/LOGO/rss.png" border="0" alt="rss" /></a> </span><a href="http://www.webthink.com.cn/blog/catalog.asp?cate=4">网站建设<span class="article-nums"> (30)</span></a></li><li><span class="feed-icon"><a href="http://www.webthink.com.cn/blog/sydication.asp?cate=5" target="_blank"><img title="rss" width="20" height="12" src="http://www.webthink.com.cn/blog/IMAGE/LOGO/rss.png" border="0" alt="rss" /></a> </span><a href="http://www.webthink.com.cn/blog/catalog.asp?cate=5">网络加?span class="article-nums"> (5)</span></a></li><li><span class="feed-icon"><a href="http://www.webthink.com.cn/blog/sydication.asp?cate=6" target="_blank"><img title="rss" width="20" height="12" src="http://www.webthink.com.cn/blog/IMAGE/LOGO/rss.png" border="0" alt="rss" /></a> </span><a href="http://www.webthink.com.cn/blog/catalog.asp?cate=6">网络运营<span class="article-nums"> (32)</span></a></li><li><span class="feed-icon"><a href="http://www.webthink.com.cn/blog/sydication.asp?cate=7" target="_blank"><img title="rss" width="20" height="12" src="http://www.webthink.com.cn/blog/IMAGE/LOGO/rss.png" border="0" alt="rss" /></a> </span><a href="http://www.webthink.com.cn/blog/catalog.asp?cate=7">网思生?span class="article-nums"> (20)</span></a></li>
</ul>
</div>
<div class="PanelElement" id="divArchives">
<h3>文章归档</h3>
<ul>
<li><a href="http://www.webthink.com.cn/blog/catalog.asp?date=2009-8">2009 August<span class="article-nums"> (1)</span></a></li><li><a href="http://www.webthink.com.cn/blog/catalog.asp?date=2007-9">2007 September<span class="article-nums"> (21)</span></a></li><li><a href="http://www.webthink.com.cn/blog/catalog.asp?date=2007-8">2007 August<span class="article-nums"> (26)</span></a></li><li><a href="http://www.webthink.com.cn/blog/catalog.asp?date=2007-7">2007 July<span class="article-nums"> (39)</span></a></li>
</ul>
</div>
<div class="PanelElement" id="divFavorites">
<h3>网站收藏</h3>
<ul id="ulFavorites">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulFavorites=favorite,"</script>
</ul>
</div>
<div class="PanelElement" id="divLinkage">
<h3>友情链接</h3>
<ul id="ulLinkage">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulLinkage=link,"</script>
</ul>
</div>
<div class="PanelElement" id="divMisc">
<h3>图标汇集</h3>
<ul id="ulMisc">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulMisc=misc,"</script>
</ul>
</div>
</div>
</div>
<div id="ContentPanelRight">
<div id="InnerContentPanelRight">
<div class="PanelElement" id="divPrevious">
<h3>最近发?/h3>
<ul id="ulPrevious">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulPrevious=previous,"</script>
</ul>
</div>
<div class="PanelElement" id="divComments">
<h3>最新评论及回复</h3>
<ul id="ulComments">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulComments=comments,"</script>
</ul>
</div>
<div class="PanelElement" id="divGuestComments">
<h3>最近留言</h3>
<ul id="ulGuestComments">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulGuestComments=GuestComments,"</script>
</ul>
</div>
<div class="PanelElement" id="divTrackbacks">
<h3>最近引?/h3>
<ul id="ulTrackbacks">
<script language="JavaScript" type="text/javascript">strBatchInculde+="ulTrackbacks=Trackbacks,"</script>
</ul>
</div>
</div>
</div>
<div class="panelclear">panel.clear</div>
</div>
</div>
<div id="Footer">
<div id="InnerFooter">
<h3 id="BlogPowerBy">Powered By <a href="http://www.rainbowsoft.org/zblog/" title="RainbowSoft Studio Z-Blog">Z-Blog 1.7 Laputa Build 70216</a></h3>
<h3 id="BlogThemeBy">Theme: Internatinal(beta), Template By <a href="http://haphic.com/blog/" title="haric shine">haphic</a>, Designed by <a href="http://playmyself.com/" title="SkyLanD">SkyLanD</a> & <a href="http://haphic.com/blog/" title="haric shine">haphic</a></h3>
<h2 id="BlogCopyRight">京ICP?[07017583] ?版权所?网博思创网络技?北京)有限公司 | Mail To webmaster@webthink.com.cn<!--这里加入统计代码--></h2>
</div>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
try{
var elScript = document.createElement("script");
elScript.setAttribute("language", "JavaScript");
elScript.setAttribute("src", "http://www.webthink.com.cn/blog/function/c_html_js.asp?act=batch"+unescape("%26")+"view=" + escape(strBatchView)+unescape("%26")+"inculde=" + escape(strBatchInculde)+unescape("%26")+"count=" + escape(strBatchCount));
document.getElementsByTagName("body")[0].appendChild(elScript);
}
catch(e){};
</script>
</body>
</html>
<!-- 2009-11-28 12:38:56 -->