SiteFactoryCMS:特殊CSS定义说明

CSS定义除了常规应用外，系统中部分内置的CSS定义有着特殊的应用和用途，本节将对一些特殊CSS定义进行详细说明。

控制主布局的定义

在CSS定义中，布局定义主要控制DIV区块的相对或绝对定位位置、宽度等（如float、width等定义）。默认模板的布局主要有二处，在前面小实验中我们也涉及到了这二处的定义：

“/* ==整体布局定义开始== */”：定义网页头部（head）、网页头部导航菜单（menu）、网页中部主要内容（main_bg）和网页底部（foot）的宽度为980像素或 982像素（因为部分浏览器将border的宽度也算在宽度内，所以增加2个像素），顶部（top_all）、中部（center_all）和底部（bottom_all）不定义宽度（无固定宽度定义时，DIV区块的宽度则自动延伸为100%）。

“/* ==center_all(中部)定义开始== */”：定义了网页中部（main_bg）的背景，网页中部左侧（main_left）、网页中部右侧（main_right、 main_right_box）、中部右侧（r_main）、中部（main_box）和中部中间（c_main、c_main_box）的定位与宽度。

温馨提示：在默认模板中以，采用了正（main_right_box）、负（main_right）边距定位的方法，以实现左宽度固定、右宽度不固定的页面布局效果。详细请参阅上节模板版式布局说明中的相关说明。

控制兼容的定义

由于各浏览器对CSS规范的支持性与解析标准目前尚未统一，在同样的CSS样式定义有时在各浏览器中显示效果不相同。在默认的CSS定义中，为了实现最大化兼容各浏览器（本文主要考虑兼容FireFox、IE7和 IE6三种浏览器）及其显示效果，需要针对其各自不同的解析差异分别进行定义，如：

.childclass_main
{
margin-left: -5px;
}

*+ html .childclass_main
{
margin-left: -5px;
}

* html .childclass_main
{
margin-left: -10px;
}

在上述定义中，“.childclass_main{***}”的定义FireFox、IE7和IE6这三个浏览器都能解析， “*+html . childclass_main {***}”的定义只有IE7解析（即在样式名前加“*+html空格”），“* html .childclass_main {***}”的定义只有IE6解析（即在样式名前加“*html空格”）。根据根据CSS优先级规则，则各浏览器分别解析其指定的CSS定义。

温馨提示：根据CSS优先级规则，若同一CSS文件中存在同名的样式定义，浏览器将优先解析显示最后面的样式定义。

a元素的链接图片

通过对a元素和a元素伪类动态链接hover状态不同背景定义，以实现动态链接文字动态背景效果。如在网页头部导航菜单中对menubox a和menubox a:hover定义不同的背景图片：

#menubox a {
……
background: url(images/menubox.gif) no-repeat 5px 7px;
}

#menubox a:hover {
……
background: url(images/menubox_hover.gif) no-repeat 5px 7px;
}

缩略图按比例缩放的定义

利用对缩略图外框和其包含图片的定义，以实现缩略图按比例缩放。

在以下定义中，先定义缩略图外框（pe_u_thumb）的高度为120像素，并定义超出高度即隐藏内容（overflow: hidden;）。再定义缩略图外框和其包含图片（pe_u_thumb img）的宽度为160像素，不定义图片的高度（即以宽度为准按比例缩放）。

/* 定义缩略图外框大小，控制隐藏超出的图片内容 */

.pe_u_thumb, .p_thumb_l_pic {
height: 120px;
overflow: hidden;
text-align: center;
border: 1px solid #ccc;
}

/* 定义缩略图宽度，按比例缩放 */

.pe_u_thumb, .pe_u_thumb img {
width: 160px;
}

这样，缩略图外框内的图片会以定义宽160px按比例缩放，如果超过缩略图外框定义的高度，则不显示超出部分的图片。这个方法一是可以统一整体缩略图外框的尺寸，同时缩略图能按比缩放不变形。

包含选择符定义的应用

在CSS定义中，可以使用“包含选择符”以单独对某种元素包含关系定义的样式表，即元素A里包含样式名B，在元素C中也包含样式名B，可以用包含选择符的方式定义元素A和元素C中的样式名B。如：

.information_new li {***}、.p_list_r{***} li、.product_new li{***}……
.left_box dd{***}、.user_box dd{***}、.r_announce dd{***}……
.c_friendsite img{***}、.imgtitle img{***}、.pe_u_thumb img{***}……
.c_title .more{***}、.class_title .more{***}……

在上述定义中，分别对li、dd、img和.more在各CSS元素范围内进行了定义。这种方法可以不需要在 CSS元素范围内重新新建不同的样式名，即使是同一个样式名也可以在不同CSS元素中以包含选择方式进行定义，以减少样式名的定义。请仔细查阅默认CSS 中的相关定义，关于CSS定义规范请参阅相关书籍。

正负边距实现循环间距的定义

在二列式左右循环的定义中，我们会出现这样一个困惑，因为程序是显示左右循环栏目列表，而左右二个列表间我们希望空些间距（如5px）。但是无论我们如何定义列表的间距，在循环显示时左右二个列表都会有此间距，而我们只要左列表的右侧有空距就行了。查看父栏目二列式左右循环定义：

.childclass_main /* 定义二列式左右循环的样式、宽度与左负边距*/
{
margin-left: -5px;
}

.childclass_main_box /* 定义二列式左右循环的样式、宽度与左负边距 */
{
float: left;
border: 1px solid #9bbde6;
width: 379px;
margin: 5px 0px 0px 5px;
}

这里我们使用了正负边距的方法解决这个问题：首先定义单个栏目列表区块（childclass_main_box）的左边距为5px，此时左右二个列表间距均向左缩进了5个像素；然后再定义整体循环栏目列表外围的区块的左边距为-5px，这样在视觉上抵消了左列表左侧的间距，实现了所要实现的效果。

信息列表自动回行的定义

在表格式（table）布局中，多列式布局取决于元素的位置。在DIV+CSS布局中，多列式布局取决于区块的宽度定义，通常用固定值或百分比来控制列数循环。在CSS格式化代码中，通常会将一些html元素用于格式排列（如ul、li、dl、dt、dd等）。通过对特定区块中的li定义宽度，则可以实现信息列表自动回行。以下定义即定义了li的宽度为50%，以实现二列式信息排列。

.information_new li
{
width: 50%;
float: left;
border-bottom: 1px dotted #ccc;
}

其他在栏目循环等样式中都采用了宽度定义的循环方法。如一列式上下循环样式列表：

WIKI使用导航

站长百科导航

站长专题