對于在寶貝描述中僅使用圖片，或大部分使用圖片對寶貝進行說明的賣家來說，減少純圖片，轉而用圖文混排的方法，將更符合淘寶對寶貝描述的要求。
圖文混排的寶貝詳情頁：圖文結合的寶貝詳情頁，能用文字的部分便用文字，圖片作為輔助信息，不將文字介紹轉化為圖片。
純圖片的寶貝詳情頁：詳情頁絕大多數內容均為圖片，甚至連文字說明也做成圖片。
名詞解釋
div是網頁中經常用來進行網頁布局的一個標簽，它本身就是一個容器，可以用來放置其它的元素。
CSS是用來進行網頁風格設計的，可以使人更能有效地控制網頁外觀，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。
圖文混排的思路
把圖片做為div的背景，然后用CSS控制文字在DIV中的位置，從而來實現圖文混排。
使用div+CSS進行圖文混排的好處
使代碼量比使用表格實現的圖文混排更少，便于一淘搜索引擎和其它搜索引擎順利收錄寶貝描述的內容，對后期修改寶貝描述、進行SEO優化都有很在大的好處。
注意事項
設計效果圖時，盡管使文字區域為矩形。如果把文字整體排成圓形，那么將來純文本將很難用CSS。
矩形文字區塊示意
處理圖片
在進行混排之前需要用大部分賣家都會選用的圖像加工軟件Adobe Photoshop對圖片進行處理，將需要進行混排的圖片導出為JPG格式，便于混排時候的編輯。如果賣家有別的工具能夠將需要處理的圖像生成JPG格式，也可以選用其他工具。
第一步：使用PS的切片工具對需要導出的圖形進行切片。
第二步：正式導出之前，點擊圖層前的小眼圖標，取消選中，將文字層隱藏，只留下需要處理的圖片層。
第三步：使用Ctrl+shift+alt+S的快捷鍵，或者點擊“文件?存儲為web格式”打開“存儲為web格式”，選中切片后導出，將圖片格式設置為JPG，然后存儲切片。
將圖片插入網頁
在進行圖文混排前，先將進行圖文混排的JPG圖片上傳到淘寶后臺的圖片空間，然后再進入寶貝描述的編輯頁面。
第一步：在寶貝描述中插入div 標簽，并加入樣式。在寶貝描述編輯框中點選第一個“源碼”按鈕，輸入div標簽。div這個標簽是成對出現，且放在符號“<>”中，結尾的標簽要在“<>”中加入“/”，來表示標簽結束。如一對div標簽，寫法就是<div>…</div>（…是指div中具體的內容）。
第二步：用CSS設置div的高度和寬度為圖片的寬度和高度，高度和寬度的樣式放在div中格式為“style=”你的樣式””，并以空格隔開。如圖片像素為750px*406px，則格式為“width:750px, height:406px”，代碼會變為“<div style=”width:750px; height:406px”></div>”。
第三步：用CSS設置div的背景為剛剛上傳到空間的圖片，格式為“background: (圖片的地址)”。
設置完了之后，回到正常視圖可以看到設置后的效果。
加入文本并定位
圖片設置好后，便需要將文字排入網頁。
第一步：在<div>和</div>之間插入p標簽，p標簽在HTML中是指段落，用它來放置屬于同一個段落的文本。同div類似，它的寫法是“<p>…</p>”。
第二步：在<p>和</p>之間插入文本內容。如果需要換行，可以將</br>放置在需要換行的文字中間來實現。</br>在HTML中表示換行，不同于div和p標簽，它不是成對出現的。
第三步：在p標簽中加入文字后，默認情況下這些文字是對齊左上角的，而在設計稿中這些文字是偏右的，這時需要用CSS樣式中的padding屬性將文本的定位到右邊。Padding是用來控制標簽內部的空白空間的一個樣式，它的寫法是：“”padding:top right bottom left;”” top、right、bottom和left分別代表當前標簽的上右下左四個方向的留白大小，將這些文字的留白大小定為上80px， 右和下為0px，左為380px會比較合適。
第四步：文字的字體、字號、顏色等樣式，可返回編輯視圖直接用文字工具來設置。
完成的效果
最后：保存已經編輯好的寶貝。如有其它需要做圖文混排的地方，以上步驟。
重點提示：
不過用div+CSS它也有它的不足之處，那就是在網頁中的字體受消費者所用PC系統中的安裝字體限制。因此建議賣家在進行寶貝描述編輯時選用大部分消費者電腦中都安裝的字體，比如Windows XP的系統自帶常用字體是宋體、黑體、仿宋、楷體和隸書，而Windows Vista、Windows 7和Windows 8中，系統自帶常用字體多了一個微軟雅黑。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 告別純圖片：打造完美詳情頁
