[组图]动易系统CSS风格样式3D模型盒和定义规范

您现在的位置：动易技术中心 >> 模板设计教程 >> 动易模板 >> 正文

[组图]动易系统CSS风格样式3D模型盒和定义规范

作者：雅虎文章来源：本站原创点击数：更新时间：2006-12-8

二、CSS定义的运用示例

　　以网页的设计运用实例说明CSS定义的运用：

　　以上面的网页为例进行说明：

定义网页整体背景颜色：

只需定义网页的背景色
body
{
margin:0px;
font-size: 9pt;background: #B77D00;
background-position:center;
text-decoration: none;
scrollbar-face-color: #f6f6f6;
scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #cccccc; scrollbar-3dlight-color: #cccccc; scrollbar-arrow-color: #330000; scrollbar-track-color: #f6f6f6; scrollbar-darkshadow-color: #ffffff;
}

定义三大区块：

注意以下对图片CSS的定义内容

顶部表格定义：宽度为100%全面延伸；背景颜色为深棕色，强制居左对齐
.top_tdbgall /* 顶部表格总背景颜色定义 */
{
width: 100%;background:#694300; float: left;
}
中部表格定义：宽度为993像素的固定尺寸；背景颜色为白色，强制居左对
.center_tdbgall /* 中部表格总背景颜色定义 */
{
float: left;width: 993px;background:#ffffff;
}
底部表格定义：宽度为993像素的固定尺寸；背景颜色不定义，以显示底色
.bottom_tdbgall /* 底部表格总背景颜色定义 */
{
width: 993px;float: left;
}

定义左侧表格的效果：

左侧背景定义：固定宽度为250像素，定义背景色为浅棕色，强制居中
.left_tdbgall /* 左栏表格总背景颜色定义 */
{
width: 250px;background:#B77D00; float: center;
}
左侧表格标题定义：固定宽度为250像素，定义背景图片，高为32像素，文字居中对齐，文字强制不加粗，颜色定义为浅棕色。
　　！背景图片定义时注意图片位置居中、不自动重复排列。
.left_title /* 左栏标题表格背景、文字颜色定义 */
{
font-weight:normal;
color: #D7AC4C;
height: 32px;
text-align: center;
background-image: url(Skin/Gov_C/l_0.gif);
background-position: center;
background-repeat: no-repeat;
width: 250px;
}
左侧表格内容定义：缩进15像素，以使得内容离开背景图片一定的距离。
　　！背景图片定义时注意图片位置居中、自动竖向重复排列。
.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */
{
padding: 15px;
background-image: url(Skin/Gov_C/l_0_1.gif);
background-position: center;
background-repeat: repeat-y;
}
左侧表格间距定义：定义29高度，以使得上下表格有一定的间距。
　　！背景图片定义时注意图片位置居中、不自动重复排列。
.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */
{
height: 29px;
background-image: url(Skin/Gov_C/l_0_2.gif);
background-position: center;
background-repeat: no-repeat;
}

定义中间内容表格的整体样式：

定义中间表格背景宽度与底色，左缩进以使得内容与白背景色有一定的间距：
.main_tdbgall /* 中栏表格总背景颜色定义 */
{
width: 710px;background:#ffffff; float: center;
padding-left:5px;
}

CSS盒模型3D示意图：

　　注意.left_title、left_tdbg1、left_tdbg2 三张图片其大小及GOF透明处理，图片不一定要与其表格一样大小，因为CSS中可以通过“background-repeat”控制图片的重复和“background-position”图片默认位置。

顶部表格效果代码：

下框式的白色通过Dbaib_1这个CSS样式定义进行控制：
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_tdbgall">
  <tr>
    <td width="256" rowspan="2" bgcolor="#754F00"> </td>
    <td height="25" bgcolor="#754F00"></td>
  </tr>
  <tr>
    <td bgcolor="#754F00"><table class="Dbaib_1" border="0" cellspacing="0" cellpadding="0" width="737">
      <tr>
        <td height="38" align="center">{$ShowChannel}</td>
      </tr>
    </table></td>
  </tr>
</table>

网页左侧表格中调用的CSS定义：

与标准模板中的CSS调用一样，实现最大限度的兼容：
<table width="993" border="0" cellpadding="0" cellspacing="0" bgcolor="#B77D00" class="center_tdbgall">
    <tr>
      <td width="250" align="center" valign="top" class="left_tdbgall">
……
          <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=left_title align=middle>用户排行</td>
          </tr>
          <tr>
            <td class=left_tdbg1 vAlign=top height=126>{$ShowTopUser(5)}</td>
          </tr>
          <tr>
            <td class=left_tdbg2></td>
          </tr>
        </table>
        <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=left_title align=middle>明智之选</td>
          </tr>
          <tr>
            <td class=left_tdbg1 vAlign=top height=126> </td>
          </tr>
          <tr>
            <td class=left_tdbg2></td>
          </tr>
        </table>
……

　　为了兼容以前的模板代码，防止过大工作量的改动。整体网页宽度为993时要计算与测试其他版区定义的宽度。

上一页 [1] [2] [3] [4] [5] [6] 下一页

文章录入：雅虎责任编辑：雅虎

上一个文章： [组图]动易2006应用技巧： FLASH全屏播放

下一个文章：动易2005升级到2006模板修改汇总

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

软件产品

SiteFactory™ 内容管理系统

SiteFactory™ 网上商店系统

SiteWeaver™ 内容管理系统

SiteWeaver™ 网上商店系统

SiteWeaver™ 企业门户网站系统