分類  >  Web前端 >

批改易通CmsEasy產品圖片的較寬內邊距為細線和左側文字說明與小圖標之間的距離

tags:    時間:2013-12-10 08:43:51
修改易通CmsEasy產品圖片的較寬內邊距為細線和左側文字說明與小圖標之間的距離

 

在模板編輯狀態下,對/archive/show_products.html文件里的代碼進行修改:

#image_box {   margin:0 auto;   width:326px;   height:90%;   /*非IE的主流瀏覽器識別的垂直居中的方法*/   display: table-cell;   vertical-align:middle;   /*設置水平居中*/   text-align:center;   /* 針對IE的Hack */   *display: block;   *font-size: 139px;/*約為高度的0.873,200*0.873 約為175*/   *font-family:Arial;/*防止非utf-8引起的hack失效問題,如gbk編碼*/   padding:5px;   border:1px solid #ccc;   _border:none;   background:url({$skin_path}/images/pic_bg.gif) left top no-repeat;   border-right:1px solid #white;    border-bottom:1px solid #white; }


padding:0px;

border:1px solid #ccc;

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

針對上述4行代碼,A、把5px改為0px,使原先看上去又粗又寬又丑的灰色內邊距線沒有了;B、把border-right和border-bottome的#white改為與border一樣的顏色#ccc,使原先看上又粗又寬又丑的邊線變成了1px的#ccc顏色細線;

C、在完成步驟A后,直接用/* */把border-right和border-bottome括起來,也能使原先看上又粗又寬又丑的邊線變成了1px的#ccc顏色細線。

 

.p_info {height:40px;line-height:40px;padding-left:20px;background:url({$skin_path}/images/comment.gif) left center no-repeat;border-bottom:1px dotted #ccc;} 

 

修改padding-left的px值可以調整圖片下方「產品介紹」及產品介紹左側的黃色「小圖標」的距離。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網