收藏夹视图

上次更新: 2023-11-04
  • 创建对象:
  • Developer
    User

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

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

.s7ecatalogviewer .s7favoritesview

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

收藏夹视图的CSS属性

background-color

收藏夹视图的背景颜色。

width

视图的宽度。

示例 — 要设置宽度为100像素且背景为半透明的收藏夹视图:

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

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

.s7ecatalogviewer .s7favoritesview .s7thumbcell

收藏夹缩略图的CSS属性

margin

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

示例 — 要设置十个像素间距:

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

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

.s7ecatalogviewer .s7favoritesview .s7thumb

收藏夹缩略图的CSS属性

width

缩略图的宽度。

height

缩略图的高度。

边界

缩略图的边框。

注意

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

示例 — 要设置像素为75 x 75、具有浅灰色默认边框和深灰色选定边框的缩略图:

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

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

.s7ecatalogviewer .s7favoritesview .s7label

收藏夹标签的CSS属性

font-famiy

字体名称。

font-size

字体大小.

示例 — 要设置具有14像素Helvetica®字体的标签:

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

在此页面上