预约成功
产品详情页的处理步骤一：处理图片
第一步：使用PS的切片工具对需要导出的图形进行切片。
第二步：在正式导出之前，点击层前面的小孔图标，取消选中，隐藏文本层，只留下待处理的图像层。
第三步：使用快捷键Ctrl+Shift+Alt+s，或单击“文件”？“存储为web格式”打开“存储为web格式”。选择切片并导出，将图像格式设置为JPG，然后存储切片。
产品详情页的处理步骤二：将图片插入网页
图文混排前，将图文混排的JPG图片上传到淘宝后台的图片空间，然后进入宝贝描述编辑页面。
第一步：将div标记插入baby description并添加样式。单击baby description编辑框中的第一个“source code”按钮，并输入div标记。Div标记成对出现并放置在符号“<>”中，末尾的标记应在“<>”中添加“/”以表示标记的结束。例如，一对div标记可以写成< div></div>（…它指的是div中的特定内容。
第二步：使用CSS设置div的高度和宽度作为图片的宽度和高度。高度和宽度的样式放在div中，格式为“style=your style”，用空格分隔。如果图像像素为750px*406px，则格式为“宽度：750px, 高度：406px代码更改为“<divstyle=”宽：750px；高：406px“></div>”
第三步：使用CSS将div的背景设置为刚上传到空间的图片，格式为“background:（图片地址）”。
设置完成后，返回正常视图查看设置后的效果。
产品详情页的处理步骤三：添加文本并定位
图片设置好后，需要将文本放入网页中。
第一步：在< div>和</div>之间插入P标记。HTML中的P标记引用段落，并使用它来放置属于同一段落的文本。与div类似，它写为“<p>…”</p>
第二步：在<p>和</p>之间插入文本。如果需要换行，可以将</BR>放在需要换行的文本中间。</BR>与div和P标记不同，HTML中的换行符是不成对的。
第三步：向P标记添加文本后，默认情况下，文本与左上角对齐，但在设计草稿中，文本位于右侧。在这种情况下，您需要使用CSS样式中的padding属性将文本放在右边。填充是用于控制标签内空白空间的样式。其内容如下：填充：上右下左；“”Top、right、bottom和left分别表示当前标签的四个方向上的空白大小。将这些单词的空间大小设置为上80px，右下0px，左380px。
第四步：文本的字体、大小、颜色等样式可以返回编辑视图，直接用文本工具进行设置。
最后：保存已经编辑好的宝贝。如有其它需要做图文混排的地方，重复以上步骤。
不过用div+CSS的产品详情页的处理步骤也有它的不足之处，那就是在网页中的字体受消费者所用PC系统中的安装字体限制。因此建议卖家在进行宝贝描述编辑时选用大部分消费者电脑中都安装的字体。环球网校将会持续更新电商设计的相关资讯及技巧，也可以在文末下载详情页设计的图文教程及灵感素材等，我们下期再见！
