手把手教你制作淘宝详情页的方法

手把手教你制作淘宝详情页的方法

做淘宝的都知道，当看到很多很漂亮的详情页时，想要拥有，却又不想花钱时，这篇文章或许对你有帮助。下面就给大家介绍一下怎么把看中图片形式的详情面变自己自己的淘宝详情页！

第一步，我们要做的是确认这个模板我们要分隔成几行，从上面的效果图可以看出，我们需要分隔成5行下面我们先用PS把图片切割下来

第二步，切割第二行

第三行，由于是空白，又要随意变换高度，所以我们需要把以下部分切割成3部分

第一部分：头部

第二部分：中间

第三部分：底部

代码如下：

第四行，在这一行里面又有4个小格子，并且是在一排

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

下面来总结一下我们所用的的HTML代码:

第一条：

以上一条是画一个宽765像素，高405像素的一个居中的表 ，记住每个表都由

第二条：

以上是是以上的表格中画出一个单元格，宽是757像素，高264像素，并且居中。记住每个单元格都由来结尾。如果连续的表示在同一步，不同列，例如：

如果想要换行可以使用换行标致 此标签可以使用 作结尾，也可以不写结尾在上面的代码中可以看到第三条：无续列表

• 1
• 2
• 3
• 4

此代码主要是列表功能，一个字体颜色为白色的4条列表第四条：我们在第三行可以看到以下一条与其它代码不一样的部分 多了一条cellspacing="0"

这一代码是去除表格中两行间的间隔，使表格看起来更融合。看了这些，你是否已经明白了怎么操作呢？