手把手教你制作淘宝详情页的方法（淘宝网的鞋子详情页怎么做）

第一步，我们要做的是确认这个模板我们要分隔成几行，从上面的效果图可以看出，我们需要分隔成5行下面我们先用PS把图片切割下来<tablewidth=”790px”border=”0″><tr><tdbackground=”1.jpg”height=”468px”><tablewidth=”765px”height=”405px”align=”center”><tr><tdwidth=”757px”height=”264px”align=”center”>)</td><tr><tdwidth=”757px”height=”133px”align=”center”><tablewidth=”720px”height=”127″align=”center”><tr><tdwidth=”720px”height=”110px”><ulstyle=”color:#FFF”><li>1</li><li>2</li><li>3</li><li>4</li></ul></td></table></td></table></td>

第二步，切割第二行<tr><tdbackground=”2.jpg”height=”260px”><tablewidth=”776px”height=”260px”><tdwidth=”39px”></td><tdwidth=”725px”></td></table></td></tr>

第三行，由于是空白，又要随意变换高度，所以我们需要把以下部分切割成3部分第一部分：头部第二部分：中间第三部分：底部代码如下：<tr><td><tablealign=”center”width=”100%”cellspacing=”0″style=”color:#032b7f;font-size:18px;”><tdbackground=”3.jpg”height=”26″width=”100%”></td><tr><tdbackground=”4.jpg”width=”100%”height=”500px”><tablewidth=”776px”height=”500px”><tdwidth=”39px”></td><tdwidth=”725px”></td></table></td><tr><tdwidth=”100%”height=”41px”background=”5.jpg”></table></td></tr>

第四行，在这一行里面又有4个小格子，并且是在一排<tr><tdheight=”200px”><tablebackground=”6.jpg”width=”790px”height=”200px”><td><tablewidth=”790px”height=”171px”><tdwidth=”42px”height=”165px”></td><tdwidth=”160px”height=”165px”></td><tdwidth=”14px”height=”165px”></td><tdwidth=”161px”height=”165px”></td><tdwidth=”13px”height=”165px”></td><tdwidth=”162px”height=”165px”></td><tdwidth=”14px”height=”165px”></td><tdwidth=”162px”height=”165px”></td><tdwidth=”22px”height=”165px”></td></table></td></table></td></tr></table>

通过以上代码就做成了开头的效果图，而且不需要你每次都用PS去修改模板，你只需要用Dreamwe*er来填充你要修改的内容即可，可以大大的提高工作效率，减少重复的工作。

下面来总结一下我们所用的的HTML代码:第一条：<tablewidth=”765px”height=”405px”align=”center”>以上一条是画一个宽765像素，高405像素的一个居中的表，记住每个表都由</table>来结尾。

第二条：<tdwidth=”757px”height=”264px”align=”center”>以上是是以上的表格中画出一个单元格，宽是757像素，高264像素，并且居中。记住每个单元格都由</td>来结尾。如果连续的表示在同一步，不同列，例如：<tablewidth=”790px”height=”171px”><tdwidth=”42px”height=”165px”></td><tdwidth=”160px”height=”165px”></td><tdwidth=”14px”height=”165px”></td><tdwidth=”161px”height=”165px”></td><tdwidth=”13px”height=”165px”></td><tdwidth=”162px”height=”165px”></td><tdwidth=”14px”height=”165px”></td><tdwidth=”162px”height=”165px”></td><tdwidth=”22px”height=”165px”></td></table>

如果想要换行可以使用换行标致<tr>此标签可以使用</tr>作结尾，也可以不写结尾在上面的代码中可以看到第三条：无续列表<ulstyle=”color:#FFF”><li>1</li><li>2</li><li>3</li><li>4</li></ul>

此代码主要是列表功能，一个字体颜色为白色的4条列表第四条：我们在第三行可以看到以下一条与其它代码不一样的部分多了一条cellspacing=”0″<tablealign=”center”width=”100%”cellspacing=”0″style=”color:#032b7f;font-size:18px;”>这一代码是去除表格中两行间的间隔，使表格看起来更融合。看了这些，你是否已经明白了怎么操作呢？