【樣式表】

【樣式表】

【版面管理】 ---> 【版面區塊設定】 ---> 【商店標誌圖】---> 【樣式表】

 

商店標誌圖設定

 

.

【樣式表】

商店標誌圖:本範例須設計一張圖片 【寬 988 x 高180】

預設圖片大小為【寬 988 x 高158】

---------------------------------------------------------------

前台【1.青色框線】標誌圖外框

<--- .store-logo-h  ---> 標誌圖外框

原始:

.store-logo-h {position:relative;height:160px;margin:2px auto 10px auto;background:url('/common/catalog/view/theme/default/image/logo_bg.gif');border:1px solid #ddd;border-radius:7px;}

標誌圖外框的高度預設 height:160px 改成 height:215px 當然也可以照自己的喜好高度做調整。

 

這是去除標誌圖外框的底色圖案,檔名路徑一併去掉。(如果圖寬高都不變動可以不用去動他)

預設 background:url('/common/catalog/view/theme/default/image/logo_bg.gif');

拿掉只剩下 background:; *注意標點符號不能少掉

 

改好如下:

.store-logo-h {position:relative;height:215px;margin:2px auto 10px auto;background:;border:1px solid #ddd;border-radius:7px;}

 

<--- .store-logo-h .logo-box ---> 圖片框

原始:

.store-logo-h .logo-box {left:20px;display:inline-block;margin:25px auto;}

.store-logo-h .logo-box {left:0;display:inline-block;margin:0;}  目前最新預設樣是表已經改為這樣

這是LOGO圖片框架,距離預設是離左邊 left:20px LOGO圖片框的邊界預設是離上下各 margin:25px auto 左右是自動調整距離

 

我們的範例是要採用一整張【寬 988 x 高180】的LOGO圖,所以我們將距離設成離左邊 left:0px LOGO圖片框的邊界預設是離上下各 margin:0px auto 左右是自動調整距離。這樣就能緊密的靠著標誌圖外框。

改好如下:

.store-logo-h .logo-box {left:0px;display:inline-block;margin:0px auto;}

.store-logo-h .logo-box {left:0;display:inline-block;margin:0;}  目前最新預設樣是表已經改為這樣

<--- .store-logo-h .logo-box img ---> LOGO圖片

原始:

.store-logo-h .logo-box img {margin:0;border:0;}

為了讓圖片的四個邊角有和標誌圖外框一樣的圓角我們在裡面加上 border-radius:7px 就能有讓LOGO一樣有圓角效果。

 

改好如下:

.store-logo-h .logo-box img {margin:0;border:0;border-radius:7px;}

加上 border-radius:7px LOGO圖片四邊倒圓角。

.store-logo-h .logo-box img {margin:0;border-radius:7px;}   目前最新預設樣是表已經改為這樣

---------------------------------------------------------------

選單導航列:本範例在前台【2.藍色框線】 往上方做移動

<--- .store-logo-h .boxes .navigator-box ---> 【選單導航列】

原始:

.store-logo-h .boxes .navigator-box {clear:both;width:100%;text-align:right;margin:10px 0 20px 0;}

 

本範例圖片預設會遮住【選單導航列】所以需要往上做移動。如果您的圖不會因為構圖遮擋住可以不必做調動。

 

**所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下:

margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

在這裡,順序非常重要。第一個值一定是上邊界的值,第二個值一定是右邊界的值,第三個值一定是下邊界的值,而第四個值一定是左邊界的值。 **

 

改好如下:

.store-logo-h .boxes .navigator-box {clear:both;width:100%;text-align:right;margin:-5px 0 20px 0;}

 

---------------------------------------------------------------

搜尋列:本範例在前台【3.粉色框線】做上下左右移動邊界各5px

 

 

<--- .store-logo-h .boxes .search-box input ---> 【搜尋列】

 

原始:

.store-logo-h .boxes .search-box input {width:250px;height:20px;border-radius:5px;opacity:0.7;filter:alpha(opacity=70);background:#fff;}

 

本範例圖片預設會遮住【搜尋列】所以需要上下左右移動邊界各5px。如果您的圖不會因為構圖遮擋住可以不必做調動。

改好如下:

.store-logo-h .boxes .search-box input {margin:5px;width:250px;height:20px;border-radius:5px;opacity:0.7;filter:alpha(opacity=70);background:#fff;}

 

 

---------------------------------------------------------------

 

目前位置導覽列:本範例在前台為【4.靛色框線】向下移動位置

<--- .store-logo-h .breadcrumbs --->  【目前位置導覽列】

原始:

.store-logo-h .breadcrumbs {top:110px;width:95%;margin:10px 20px;padding:6px;background:#fff;opacity:0.7;filter:alpha(opacity=70);border:1px solid #ddd;border-radius:5px;color:#000;}

 

 

本範例圖片預設會遮住【目前位置導覽列】所以需要往下移動所以指定預設上方 top:110px 改為 top:170px 。如果您的圖不會因為構圖遮擋住可以不必做調動

 

改好如下:

.store-logo-h .breadcrumbs {top:170px;width:97%;margin:10px 7px;padding:6px;background:#fff;opacity:0.7;filter:alpha(opacity=70);border:1px solid #ddd;border-radius:5px;color:#000;}

 

商店管理系統_商店標誌圖css

 

WebDiY 網路開店 GO! 系統