动易SW系统CSS风格样式3D模型盒和定义规范

二、CSS定义的模型示例

　　在页面设计中，CSS的定位与套用中的盒模型影响其定位与样式，以下以CSS盒模型的3D示意图，以方便清楚调用时的层次、关系和相互影响，便于理解和记忆。

动易网页设计CSS盒模型3D示意图

　　以网页中部左栏为例：

以下是“用户排行”html代码：
  <table class=center_tdbgall cellSpacing=0 cellPadding=0 width=760 align=center border=0>
    <tr>
      <td class=left_tdbgall vAlign=top width=180 rowSpan=2>
      
        <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr onclick="new Element.toggle(’userlist’)">
            <td class=left_title align=middle>用户排行</td>
          </tr>
　　<tbody id=userlist>
          <tr>
            <td class=left_tdbg1 vAlign=top height=126>{$ShowTopUser(5)}</td>
          </tr>
　　</tbody>
          <tr>
            <td class=left_tdbg2></td>
          </tr>
        </table>
      
      </td>
　……

　　其中，在中部表格开始商用了“table class=center_tdbgall”，则“.center_tdbgall”可控制中部表格的背景与宽度，这里加上了“cellSpacing=0 cellPadding=0 width=760 align=center border=0”等定义，是为了方便在DW这些可视化网页编辑软件中进行编辑而加的定义。如果对CSS非常熟悉，且有一定的空间能力，则此处可只写成：

　　所有的定义由“.center_tdbgall”来完成对表格样式的定义与控制即可。即使是现在已经加了“cellSpacing=0 cellPadding=0 width=760 align=center border=0”等定义也不用担心，一旦“.center_tdbgall”中定义了与其相同的元素，如“width: 100% ”，则会是CSS中的定义优先于网页中固定的HTML代码定义。

　　其他定义的解释见下表：

以下是“用户排行”html代码：
<table class=center_tdbgall cellSpacing=0 cellPadding=0 width=760 align=center border=0>

以“.center_tdbgall”预置能控制中部表格的样式，如改成深色背景、重新定义其宽度。

以“.left_tdbgall”预置能控制中部左侧表格的样式，如改成深色背景、重新定义其宽度。

<table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" border=0>

“style="WORD-BREAK: break-all"”控制其文字强制换行，“width="100%"” 控制其宽度随着“.left_tdbgall”的宽度定义自动缩放。

以“.left_title”预置能控制中部左侧表格内，“用户排行”文字所在标题单元格中无链接文字、背景、宽度等样式。

</tr>
　　<tbody id=userlist>

“tbody ”是一组控制所括元素样式、重复等内容的定义，可运用在栏目循环列表的模板设计中。“id=userlist”以“#userlist”的风格定义预置能控制所调用显示的无链接文字、背景、宽度等样式。这里为本内容使用时的特殊定义。

<tr>
<td class=left_tdbg1 vAlign=top height=126>{$ShowTopUser(5)}</td>

以“.left_tdbg1”预置能控制中部左侧表格内，显示中无链接文字、背景、宽度等样式。

          </tr>
　　</tbody>
          <tr>
            <td class=left_tdbg2></td>

以“.left_tdbg2”预置能控制中部左侧表格底部背景、宽度等样式，同时也可以控制与下一个表格的间距、高度等定义。

</tr>
        </table>
      
      </td>
　……

　　因此，要使得所定义的表格与CSS风格样式能适用于不同的设计需求，一般区域中需要四个以上的定义，才有可能通过修改样式定义来实现页面风格设计需要，如考虑到白底黑字、黑底白字等不同的网页风格设计。

至少四个的CSS定义：
.***_tdbgall　　 /* 表格总背景颜色定义 */
.***_title 　　　/* 标题表格背景、文字颜色定义 */
.***_tdbg1 　　/* 内容表格背景、文字颜色定义 */
.***_tdbg2 　　/* 底部表格背景、文字颜色定义 */
……

　　另外对于本区域中还有有链接的文字，则需要进一步考虑“a.***”的定义，或是在其表格外加div层单独控制本区域中的有链接文字的样式，这里不再细述。

Home << 1 2 3 4 5 6 >> End

作者：雅虎发布时间：2008年09月20日点击数：【收藏】【打印文章】

上一篇：没有了！　　下一篇：《动易网站管理系统》模板制作示例

动易雅虎

推荐阅读

动易SW系统CSS风格样式3D模型盒和定义规范

作者：雅虎发布时间：2008年09月20日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论