收藏夾視圖

收藏夾視圖包含一列縮略圖。

「收藏夾」視圖容器的外觀由以下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

縮圖的高度。

border

縮圖的邊框。

注意

縮圖支援 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;
}

本頁內容