在模板編輯狀態下，對/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值可以調整圖片下方“產品介紹”及產品介紹左側的黃色“小圖示”的距離。