图片边框定义.pdf

ID：55964693

大小：95.60 KB

页数：3页

时间：2020-06-18

资源描述：

《图片边框定义.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Zen-Cart有許多商品圖片，使用CSS可以將商品圖片(無論圖片的長及寬是若干)自動加上框及陰影，增加商品的質感。這個方法不用每個商品圖片使用影像編輯軟體編修後上傳到網站，節省使用者許多時間。下圖左邊是商品圖片，右邊是本範例的完成品。1.使用影像編輯軟體製作一長及寬各為400px的陰影，如果你的商品圖片長及寬超過400px，請自行將400px增加至符合你的需求。將圖片存檔為shadow.gif。綠色方框說明陰影圖片的範圍，製作陰影圖片時，不需要繪製。注意：陰影必須包括在圖片中。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上應用。以新商品為例，在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要上傳到your_template/images。完成。利用css，可以有比較快的方法，以下例子，使用在ZenCartv1.3.x,1.在產品詳細資料頁面的圖片上加上邊框，也可以有陰影效果1A.邊框：程式碼:#productMainImageimg{border:0.3emsolid#C2C2C2;}1B.邊框加陰

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

图片边框定义.pdf

图片边框定义.pdf

相关文章

相关标签