“收藏夹”视图包含一列缩略图。
使用以下CSS类选择器控制“收藏夹”视图容器的外观:
.s7ecatalogviewer .s7favoritesview
收藏夹视图的位置和高度由视图管理;在CSS中,只能定义宽度。
“收藏夹”视图的CSS属性
背景颜色 |
“收藏夹”视图的背景颜色。 |
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属性
宽度 |
缩略图的宽度。 |
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属性
字体系列 |
字体名称。 |
字体大小 |
字体大小. |
示例 — 要设置14像素Helvetica®字体的标签,请执行以下操作:
.s7ecatalogviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}