仅仅一步完美解决宝贝详情页不支持背景图片的难题，装修者必看 - 荷塘月色_淘宝抖音跨境电商卖家论坛社区

本文讲解的是一个简单的例子，但是雏形框架却很完善，对特效不要求非常高的朋友们可以直接拷贝下面的代码，改成自己的。要实现自己想要的效果，朋友们可以根据这个例子自行发挥。

1.基本的html代码解惑

设置字体：font-size 字体大小

font-weight 字体粗细

设置表格：table 表格

background 设置背景图，本文的关键

line-height 段落每行的高度

align 对齐(属性值有left right top bottom 分别代左、右、上、下对齐)

设置图片 img 代表图片

src 代表图片的地址，在图片空间复制。

style 样式，控制内容的显示风格。

上面是本文用到的属性，想知道更多可以在网上收集html和css手册，也可以向阿秋索要。

Css和html手册对于淘宝装修模板（简易模板和sdk模板）设计人员来说是必备的，想往这方面发展的话，就要从这里入手哦。

2.开始书写代码

(1)整体框架布局

<td></td><!-- 该行的单元格具体内容区，所有的图片和文字都要在此显示 --》

</tr>

</tbody>

</table>

(2)填充样式，实现各种效果。

● 设置表格table样式

解释：width设置宽度，为什么是742，不是750呢，宝贝详情页不是最大支持750px吗？因为我们设置了边框border ，左右边框加一起8px,合一起正好750px;

cellspacing cesspadding border 以一张图给大家解释

● 设置表格主体tbody样式

解释：line-height段落的行高为20px,这样段落的行与行之间就会有一定的距离，这样设置就会让段落的显示不那么紧凑。Font-family：设置段落所有文字的字体.font-size:设置字体的大小。

● 设置表格一行tr样式

解释：valign=“top”设置表格1行内的内容在垂直方向顶部对齐. Align=”left”设置改行的内容在水平方向居左对齐。Style=”text-indent:2em” 让段落内容首行空两格。

● 设置表格内图片的样式

解释：让图片居中显示。

（3）代码显示

<!-- 红色部分是本文的关键背景图片->
<tbody style="line-height:20px;font-family:tahoma,arial,宋体,sans-serif;font-size:16px;">
<tr valign="top" align="left" style="text-indent:2em;">
      <td>
         <p align="center"><img  src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2RLNQXjhbXXXXXXXX_!!641696614.gif"></p>
         <p>淘宝翻滚了整个市场营销观念的智慧与光芒，事实上它定格了众多事业围城的革命价值，这是一场具有时代性质的商业革命，也是如今领导国内外电子商务领域方向的主力。纵观整个淘宝成长过程，随着管理制度不断完善，它对于电子商务市场的价值观所影响范畴不可估量。自2003年开办以来，截至 2007年，淘宝整个年度的交易额就已经到了400亿元人民币。而在2010年，淘宝网的年度交易额就再创奇迹，疯涨到了4000亿人民币！三年与10 倍，这一历史奇迹的创造，就是淘宝刻在电子商务时代革命里程碑上最光辉的一笔！
         </p>

         <p> 近年来，随着微博和社区在国内的壮大和影响，大家逐渐淡化了传统的广告平台推广营销方式，紧跟着网络潮流开始了新的营销战略路线，走向自我营销的新平台，用微博与社区带动营销，即具有一定娱乐性质的大众化SNS营销模式。
         </p>
         <p><img src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2K3BQXbXXXXXXXXXX_!!641696614.gif"></p>
      </td>
</tr>
</tbody>
</table>

（4）新手使用指南

（5）网页显示的效果截图