我的最愛檢視由一欄縮圖影像組成。
我的最愛檢視容器外觀是由下列CSS類別選取器所控制:
.s7ecatalogsearchviewer .s7favoritesview
收藏夾檢視的位置和高度由檢視管理;在CSS中只能定義寬度。
我的最愛檢視的CSS屬性
background-color |
我的最愛檢視的背景顏色。 |
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屬性
width |
縮圖的寬度。 |
height |
縮圖的高度。 |
border |
縮圖的邊框。 |
縮圖支援 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屬性
font-famiy |
字型名稱。 |
font-size |
字型大小. |
範例 — 使用14畫素Helvetica®字型設定標籤。
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}