你们好，最近小未来发现有诸多的小伙伴们对于淘宝详情页设计培训班，淘宝详情页设计这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 第一步，我们需要确保模板被分成几行。从上面的效果图可以看出，我们需要把它分成五行。先用PS切图吧。

2、 table width='790px' border='0'

3、 tr

4、 td background='1.jpg' height='468px'

5、 table width='765px' height='405px' align='center'

6、 tr

7、 td width='757px' height='264px' align='center'

8、 )

9、 /td

10、 tr

11、 td width='757px' height='133px' align='center'

12、 table width='720px' height='127' align='center'

13、 tr

14、 td width='720px' height='110px'ul style='color:#FFF'li1/li

15、 li2/li

16、 li3/li

17、 li4/li

18、 /ul/td

19、 /table

20、 /td

21、 /table

22、 /td

23、 第二步，剪第二行。

24、 tr

25、 td background='2.jpg' height='260px' table width='776px' height='260px'

26、 td width='39px'/td

27、 td width='725px'/td

28、 /table

29、 /td

30、 /tr

31、 第三行，因为是空白的，需要随意改变高度，我们需要把下面的部分剪成三部分。

32、 第一部分：头部

33、 第二部分：中间

34、 第三部分：底部

35、 代码如下：

36、 tr

37、 td

38、 table align='center' width='100%' cellspacing='0' style=' color:#032b7f; font-size:18px;'

39、 td background='3.jpg' height='26' width='100%' /td

40、 tr

41、 td background='4.jpg' width='100%' height='500px'

42、 table width='776px' height='500px'

43、 td width='39px'/td

44、 td width='725px'/td

45、 /table

46、 /td

47、 tr

48、 td width='100%' height='41px' background='5.jpg'

49、 /table

50、 /td

51、 /tr

52、 第四排，这一排有四个小方块，而且是一排。

53、 tr

54、 td height='200px'

55、 table background='6.jpg' width='790px' height='200px'

56、 td

57、 table width='790px' height='171px'

58、 td width='42px' height='165px' /td

59、 td width='160px' height='165px' /td

60、 td width='14px' height='165px' /td

61、 td width='161px' height='165px' /td

62、 td width='13px' height='165px' /td

63、 td width='162px' height='165px' /td

64、 td width='14px' height='165px' /td

65、 td width='162px' height='165px' /td

66、 td width='22px' height='165px' /td

67、 /table

68、 /td

69、 /table

70、 /td

71、 /tr

72、 /table

73、 通过上面的代码，做出了初始效果图，不需要每次都用PS修改模板。你只需要用Dreamweaver填写你要修改的内容，就可以大大提高工作效率，减少重复劳动。

74、 让我们总结一下我们使用的HTML代码：

75、 第一条：

76、 table width='765px' height='405px' align='center'

77、 上面这个是画一个中央表格，宽765像素，高405像素。请记住，每个表都以/table结尾。

78、 第二条：

79、 td width='757px' height='264px' align='center'

80、 在上表中画一个单元格，宽757像素，高264像素，居中。请记住，每个单元格都以/td结尾。如果连续表示是在同一个步骤，不同的列，如：

81、 table width='790px' height='171px'

82、 td width='42px' height='165px' /td

83、 td width='160px' height='165px' /td

84、 td width='14px' height='165px' /td

85、 td width='161px' height='165px' /td

86、 td width='13px' height='165px' /td

87、 td width='162px' height='165px' /td

88、 td width='14px' height='165px' /td

89、 td width='162px' height='165px' /td

90、 td width='22px' height='165px' /td

91、 /table

92、 如果想包一条线，可以用标致tr。这个标签可以以/tr结尾，也可以不写结尾。在上面的代码中，可以看到第三项：没有延续列表。

93、 ul style='color:#FFF'

94、 li1/li

95、 li2/li

96、 li3/li

97、 li4/li

98、 /ul

99、 这个代码主要是一个列表函数，一个四项列表，字体颜色为白色。第四项：我们在第三行可以看到，下面一项和其他代码的不同之处在于增加了一个cellspacing='0 '

100、 table align='center' width='100%' cellspacing='0' style=' color:#032b7f; font-size:18px;'

101、 这段代码是为了删除表格中两行之间的空格，使表格看起来更完整。看完这些，你明白怎么操作了吗？

以上就是淘宝详情页设计这篇文章的一些介绍，希望对大家有所帮助。