純格子代碼完全解碼：

想要學(xué)習(xí)更詳情的HTML+CSS語(yǔ)言可以百度或谷歌搜索這兩門(mén)語(yǔ)言的視頻教程更深入的學(xué)習(xí)了解下。通過(guò)視頻教程可以更好的拓展你的代碼知識(shí)。

下面為了方便初學(xué)的賣(mài)家學(xué)習(xí)，所以就拿一個(gè)精簡(jiǎn)但又比較完整的750寬的純代碼格子來(lái)舉例。

完整的代碼如下：

<table

background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"
width="750"border="0"align="center"cellpadding="0"cellspacing="0"
bgcolor="#f1f1f1">
<tr>
<td
style="padding:10px10px10px10px;"><img
src="http://img02.taobaocdn.com/imgextra/i2/169171891/TB2g_5FXVXXXXXsXXXXXXXXXXXX-169171891.jpg"
width="360"alt="圖片"/></td>

<tdstyle="padding:10px10px10px0px;"><img
src="http://img02.taobaocdn.com/imgextra/i2/169171891/TB25fmCXVXXXXahXpXXXXXXXXXX-169171891.jpg"
width="360"alt="圖片"/></td>
</tr>
</table>

可以復(fù)制下來(lái)拿去練習(xí)或測(cè)試

把這個(gè)格子代碼最簡(jiǎn)單化就是：

<table>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>

分解說(shuō)明：

<table></table>:這個(gè)就是整體的表格。

<tr></tr>:這個(gè)表示一行。

<td></td>:這個(gè)表示一個(gè)單元格。

(那么從這上面的例子是不是可以看出這個(gè)表格是一行兩列，也就是一排兩格的。)

分解說(shuō)明：

1.【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-69171891.jpg"】這個(gè)表示背景圖，里面藍(lán)色的地址就是黑色的背景紋理圖片地址。當(dāng)然你可以更換別的顏色的背景紋理。背景紋理需要上傳淘寶相冊(cè)空間，然后復(fù)制地址替換。

2.【width="750"】這個(gè)表示表格的寬度，總寬是750寬的。你改成950那就是首頁(yè)950自定義使用，當(dāng)然你這里改了，其它的圖片也要相應(yīng)改大，或者間距也要適當(dāng)調(diào)節(jié)。（這個(gè)的詳細(xì)教程由于篇幅請(qǐng)關(guān)注我們，下一期給大家講解）

3.【border="0"】這個(gè)是邊框，這個(gè)不太重要，一般默認(rèn)0即可。

4.【align="center"】這個(gè)是對(duì)齊，有三個(gè)參數(shù)，分別是：左對(duì)齊：left居中對(duì)齊：center右對(duì)齊：right那么我們這個(gè)表格整體是居中對(duì)齊的。

5.【bgcolor="#f1f1f1"】這個(gè)是背景色。#f1f1f1這個(gè)是顏色值，（背景顏色值可以百度查詢或用PS或其它工具吸取查詢）那么一般改變背景色就是改這個(gè)，但是注意，這個(gè)里面有背景色是中灰色，又有背景紋理，兩個(gè)同時(shí)存在，因?yàn)楸尘凹y理大于這個(gè)背景色，所以他會(huì)顯示背景紋理，你要讓背景色顯示就要把前面的背景紋理代碼background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"一起刪掉才可以。如下圖，我去掉背景紋理后的代碼以及顯示效果：

顯示效果如下：

再來(lái)一個(gè)效果：我把背景色改成白色的然后還把圖片強(qiáng)制加了一個(gè)200的高度，其實(shí)這個(gè)圖片是正方形800*800的，強(qiáng)制成200的高如下：

顯示效果如下圖：這個(gè)由于是改成白色背景了可能在手機(jī)上看不出來(lái)。

6.補(bǔ)充：【background-color:#f60】這個(gè)也是背景顏色代碼?？聪旅娴拇a我在表格后面加了一段樣式：style="background-color:#f60;"那么他的顏色值#f60是橙色值，這個(gè)樣式的層級(jí)也大于前面那個(gè)

bgcolor="#f1f1f1"所以顯示效果最終以橙色顯示。當(dāng)然為了精簡(jiǎn)代碼，你要用內(nèi)聯(lián)了，那么前面的那個(gè)就可以去掉一個(gè)，沒(méi)必要兩個(gè)都用上。這個(gè)必須寫(xiě)在：style=""這個(gè)代碼包括的里面。不然無(wú)效哦。如下圖代碼以及顯示效果。

顯示效果如下：

補(bǔ)充：很多的顧客朋友說(shuō)要幫他做透明背景的模塊。其實(shí)就是把背景顏色和背景圖代碼都去掉就是透明的了哦。背景色代碼和背景圖代碼如下：【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"】【bgcolor="#f1f1f1"】還有【background-color:#f60】

7.【style="padding:10px10px10px10px;"】這個(gè)表示間距。分別是上間距是10px，右間距10px下間距10px左間距10px?？梢栽囍堰@三個(gè)數(shù)字改一下看效果。也可以看下我第二個(gè)格子<td>里面是不是style="padding:10px10px10px0px;"最后一個(gè)，也就是左邊是等于0，如果第二個(gè)的最后一個(gè)左邊也是10px，加上第一個(gè)的第二個(gè)也就是右邊等于10px；那么中間就變成20px了，那么總寬就是760了，所以不可取。

當(dāng)然總寬是750寬，圖片是360，那么10px+360px+10px+360px+10px=750px。大家看一下：

顯示效果如下：

如果您就是要這種效果，想讓中間的間距寬一些，那這時(shí)你就要把兩張的圖片各減掉5px，圖片是360-5=355px；這樣總寬也就是750px寬了。如下圖：

顯示的效果如下：在手機(jī)上看起來(lái)可能不明顯:

8.【<imgsrc="http://img02.taobaocdn.com/imgextra/i2/169171891/TB2g_5FXVXXXXXsXXXXXXXXXXXX-169171891.jpg"width="360"alt="圖片"/>】這個(gè)就是圖片代碼。src=""中間的就是圖片地址，[width="360"]這個(gè)同上是圖片的寬度。alt="圖片"這個(gè)無(wú)所謂，圖片說(shuō)明。

9.【height="360"】這個(gè)是圖片高度，我一般是不限制高度的，高度不限。大家最好是不要限制，如果你限制寬度和高度有的圖片不成比例就會(huì)變形。不美觀。寬度和高度寫(xiě)一個(gè)就可以了?？聪旅娴男Ч胰绻麖?qiáng)制加一個(gè)不適合的高度=200看下顯示效果，是不是圖片變形不美觀了。

顯示效果如下：

因?yàn)槲业膱D片實(shí)際大小是800px*800px的正方形。如果我把寬度限制在360px，那么高度也會(huì)自動(dòng)變成360px

【注意：其實(shí)這個(gè)格子的大小是360的寬，高度不限，那么你的圖片大小就可以是：寬度只要等于或大于360px，高度隨你定，放長(zhǎng)的就是長(zhǎng)的，短的就是短的。會(huì)自動(dòng)成比例縮放的。如我放的就是800*800的正方形，你可以放其它尺寸的圖片，只要寬度不小于360，如果小于了就會(huì)強(qiáng)制放大到360，那么放大就會(huì)變模糊不清晰。所以只能大于，不能小于。】

淘寶店鋪裝修教程，請(qǐng)繼續(xù)關(guān)注甩手網(wǎng)店學(xué)院專(zhuān)題>>>