店铺装修代码格子模块HTML+CSS新手教程

纯格子代码完全解码：

想要学习更详情的HTML+CSS语言可以百度或谷歌搜索这两门语言的视频教程更深入的学习了解下。通过视频教程可以更好的拓展你的代码知识。

下面为了方便初学的卖家学习，所以就拿一个精简但又比较完整的750宽的纯代码格子来举例。

完整的代码如下：

<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>

可以复制下来拿去练习或测试

把这个格子代码最简单化就是：

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

分解说明：

<table></table>:这个就是整体的表格。

<tr></tr>:这个表示一行。

<td></td>:这个表示一个单元格。

(那么从这上面的例子是不是可以看出这个表格是一行两列，也就是一排两格的。)

分解说明：

1.【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-69171891.jpg"】这个表示背景图，里面蓝色的地址就是黑色的背景纹理图片地址。当然你可以更换别的颜色的背景纹理。背景纹理需要上传淘宝相册空间，然后复制地址替换。

2.【width="750"】这个表示表格的宽度，总宽是750宽的。你改成950那就是首页950自定义使用，当然你这里改了，其它的图片也要相应改大，或者间距也要适当调节。（这个的详细教程由于篇幅请关注我们，下一期给大家讲解）

3.【border="0"】这个是边框，这个不太重要，一般默认0即可。

4.【align="center"】这个是对齐，有三个参数，分别是：左对齐：left居中对齐：center右对齐：right那么我们这个表格整体是居中对齐的。

5.【bgcolor="#f1f1f1"】这个是背景色。#f1f1f1这个是颜色值，（背景颜色值可以百度查询或用PS或其它工具吸取查询）那么一般改变背景色就是改这个，但是注意，这个里面有背景色是中灰色，又有背景纹理，两个同时存在，因为背景纹理大于这个背景色，所以他会显示背景纹理，你要让背景色显示就要把前面的背景纹理代码background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"一起删掉才可以。如下图，我去掉背景纹理后的代码以及显示效果：

显示效果如下：

再来一个效果：我把背景色改成白色的然后还把图片强制加了一个200的高度，其实这个图片是正方形800*800的，强制成200的高如下：

显示效果如下图：这个由于是改成白色背景了可能在手机上看不出来。

6.补充：【background-color:#f60】这个也是背景颜色代码。看下面的代码我在表格后面加了一段样式：style="background-color:#f60;"那么他的颜色值#f60是橙色值，这个样式的层级也大于前面那个

bgcolor="#f1f1f1"所以显示效果最终以橙色显示。当然为了精简代码，你要用内联了，那么前面的那个就可以去掉一个，没必要两个都用上。这个必须写在：style=""这个代码包括的里面。不然无效哦。如下图代码以及显示效果。

显示效果如下：

补充：很多的顾客朋友说要帮他做透明背景的模块。其实就是把背景颜色和背景图代码都去掉就是透明的了哦。背景色代码和背景图代码如下：【background="http://img04.taobaocdn.com/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"】【bgcolor="#f1f1f1"】还有【background-color:#f60】

7.【style="padding:10px10px10px10px;"】这个表示间距。分别是上间距是10px，右间距10px下间距10px左间距10px。可以试着把这三个数字改一下看效果。也可以看下我第二个格子<td>里面是不是style="padding:10px10px10px0px;"最后一个，也就是左边是等于0，如果第二个的最后一个左边也是10px，加上第一个的第二个也就是右边等于10px；那么中间就变成20px了，那么总宽就是760了，所以不可取。

当然总宽是750宽，图片是360，那么10px+360px+10px+360px+10px=750px。大家看一下：

显示效果如下：

如果您就是要这种效果，想让中间的间距宽一些，那这时你就要把两张的图片各减掉5px，图片是360-5=355px；这样总宽也就是750px宽了。如下图：

显示的效果如下：在手机上看起来可能不明显:

8.【<imgsrc="http://img02.taobaocdn.com/imgextra/i2/169171891/TB2g_5FXVXXXXXsXXXXXXXXXXXX-169171891.jpg"width="360"alt="图片"/>】这个就是图片代码。src=""中间的就是图片地址，[width="360"]这个同上是图片的宽度。alt="图片"这个无所谓，图片说明。

9.【height="360"】这个是图片高度，我一般是不限制高度的，高度不限。大家最好是不要限制，如果你限制宽度和高度有的图片不成比例就会变形。不美观。宽度和高度写一个就可以了。看下面的效果，我如果强制加一个不适合的高度=200看下显示效果，是不是图片变形不美观了。

显示效果如下：

因为我的图片实际大小是800px*800px的正方形。如果我把宽度限制在360px，那么高度也会自动变成360px

【注意：其实这个格子的大小是360的宽，高度不限，那么你的图片大小就可以是：宽度只要等于或大于360px，高度随你定，放长的就是长的，短的就是短的。会自动成比例缩放的。如我放的就是800*800的正方形，你可以放其它尺寸的图片，只要宽度不小于360，如果小于了就会强制放大到360，那么放大就会变模糊不清晰。所以只能大于，不能小于。】

淘宝店铺装修教程，请继续关注甩手网店学院专题>>>