收藏夹视图

“收藏夹”视图由一列缩略图图像组成。

使用以下CSS类选择器控制收藏夹视图容器的外观:

.s7ecatalogsearchviewer .s7favoritesview

收藏夹视图的位置和高度由视图管理;在CSS中,只能定义宽度。

“收藏夹”视图的CSS属性

背景颜色

“收藏夹”视图的背景颜色。

width

视图的宽度。

示例 — 设置宽为100像素的“收藏夹”视图,其中半透明的灰色背景。

.s7ecatalogsearchviewer .s7favoritesview { 
 width: 100px; 
 background-color: rgba(221, 221, 221, 0.5); 
}

通过以下CSS类选择器可控制收藏夹缩略图之间的间距:

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell

收藏夹缩略图的CSS属性

margin

每个缩略图周围垂直边距的大小。 实际缩略图间距等于为 .s7thumbcell 设置的上边距和下边距之和。

示例 — 设置10像素间距。

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell { 
 margin: 5px; 
}

通过以下CSS类选择器控制单个缩略图的外观:

.s7ecatalogsearchviewer .s7favoritesview .s7thumb

收藏夹缩略图的CSS属性

宽度

缩略图的宽度。

height

缩略图的高度。

边界

缩略图的边框。

注意

缩略图支持state属性选择器,该选择器可用于将不同的外观应用到不同的缩略图状态。 特别是,state="selected"对应于用户最近选择的缩略图。 state="default" 对应于其余的缩略图。并且在鼠标悬停时使用state="over"

示例 — 设置缩略图75 x 75像素,默认边框为浅灰色,选定边框为深灰色。

.s7ecatalogsearchviewer .s7favoritesview .s7thumb { 
 width: 75px; 
 height: 75px;  
} 
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

通过以下CSS类选择器控制缩略图标签的外观:

.s7ecatalogsearchviewer .s7favoritesview .s7label

“收藏夹”标签的CSS属性

字体系列

字体名称。

字体大小

字体大小.

示例 — 使用14像素Helvetica字体设置标签。

.s7ecatalogsearchviewer .s7favoritesview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 14px; 
}

在此页面上