圖片邊框定義.pdf

ID：55964693

大?。?5.60 KB

頁(yè)數(shù)：3頁(yè)

時(shí)間：2020-06-18

資源描述：

《圖片邊框定義.pdf》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、Zen-Cart有許多商品圖片，使用CSS可以將商品圖片(無(wú)論圖片的長(zhǎng)及寬是若干)自動(dòng)加上框及陰影，增加商品的質(zhì)感。這個(gè)方法不用每個(gè)商品圖片使用影像編輯軟體編修後上傳到網(wǎng)站，節(jié)省使用者許多時(shí)間。下圖左邊是商品圖片，右邊是本範(fàn)例的完成品。1.使用影像編輯軟體製作一長(zhǎng)及寬各為400px的陰影，如果你的商品圖片長(zhǎng)及寬超過(guò)400px，請(qǐng)自行將400px增加至符合你的需求。將圖片存檔為shadow.gif。綠色方框說(shuō)明陰影圖片的範(fàn)圍，製作陰影圖片時(shí)，不需要繪製。注意：陰影必須包括在圖片中。2.將下面的CSS程式碼加入your_template/

2、css/stylesheet.css中。程式碼:.img-wrapper{background:url(../images/shadow.gif)no-repeatbottomright;clear:right;float:left;position:relative;}.img-wrapperimg{background-color:#fff;border:1pxsolid#a9a9a9;padding:4px;display:block;margin:-5px5px5px-5px;position:relative;}3.如何使用

3、。程式碼:

4.在Zen-Cart上應(yīng)用。以新商品為例，在your_templte/template/tpl_modules_products_new_listing.php找到下列程式碼。程式碼:if(PRODUCT_NEW_LIST_IMAGE!='0'){$display_products_image='

4、n_href_link(zen_get_info_page($products_new->fields['products_id']),'products_id='.$products_new->fields['products_id']).'">'.zen_image(DIR_WS_IMAGES.$products_new->fields['products_image'],$products_new->fields['products_name'],IMAGE_PRODUCT_NEW_LISTING_WIDTH,IMAGE_PRO

5、DUCT_NEW_LISTING_HEIGHT).''.str_repeat('',substr(PRODUCT_NEW_LIST_IMAGE,3,1));}else{$display_products_image='';}改為程式碼:if(PRODUCT_NEW_LIST_IMAGE!='0'){$display_products_image='fields['products_i

6、d']),'products_id='.$products_new->fields['products_id']).'">'.zen_image(DIR_WS_IMAGES.$products_new->fields['products_image'],$products_new->fields['products_name'],IMAGE_PRODUCT_NEW_LISTING_WIDTH,IMAGE_PRODUCT_NEW_LISTING_HEIGHT).'

'.s

7、tr_repeat('',substr(PRODUCT_NEW_LIST_IMAGE,3,1));}else{$display_products_image='';}注意：shadow.gif要上傳到y(tǒng)our_template/images。完成。利用css，可以有比較快的方法，以下例子，使用在ZenCartv1.3.x,1.在產(chǎn)品詳細(xì)資料頁(yè)面的圖片上加上邊框，也可以有陰影效果1A.邊框：程式碼:#productMainImageimg{border:0.3emsolid#C2C2C2;}1B.邊框加陰

8、影(淺色和深色)：程式碼:#productMainImageimg{border:0.3emoutset#C2C2C2;}

圖片邊框定義.pdf

圖片邊框定義.pdf

相關(guān)文章

相關(guān)標(biāo)簽