习惯写html代码来装修的朋友可能会发现总是无法通过css来设置宝贝详情页的背景图片，阿秋经过多次测试后发现是淘宝平台屏蔽了宝贝详情页css背景图片设置，但是百密一疏，还是可以通过表格设置来达到效果，下面阿秋带大家一起来实现这一点，其实很简单，设置一个表格，<table background="图片地址">即可。如果你通过div+css布局方式，形如<div style="background:url(图片地址)"> 是被屏蔽的，切记！9 Q' ~# s, i7 T& P. {& C" g4 D1 P
本文讲解的是一个简单的例子，但是雏形框架却很完善，对特效不要求非常高的朋友们可以直接拷贝下面的代码，改成自己的。要实现自己想要的效果，朋友们可以根据这个例子自行发挥。 1.基本的html代码解惑 设置字体：font-size 字体大小 font-family 字体 color 字体颜色 font-weight 字体粗细 设置表格：table 表格 tbody 表格主体 tr 1行 td 1列 background 设置背景图，本文的关键 border 设置边框 设置段落 p 1段 br 换一行 line-height 段落每行的高度 align 对齐(属性值有left right top bottom 分别代左、右、上、下对齐) 设置图片 img 代表图片 src 代表图片的地址，在图片空间复制。 style 样式，控制内容的显示风格。
) T2 g9 O4 ~2 { t. |- | x+ s上面是本文用到的属性，想知道更多可以在网上收集html和css手册，也可以向阿秋索要。 Css和html手册对于淘宝装修模板（简易模板和sdk模板）设计人员来说是必备的，想往这方面发展的话，就要从这里入手哦。 2.开始书写代码 (1)整体框架布局 <table> <!--表格开始 --> <tbody> <!--表格主体内容开始 --> <tr> <!--1行开始 --> <td></td><!-- 该行的单元格具体内容区 ，所有的图片和文字都要在此显示 --》 </tr> <!--行结束 --> </tbody> <!--表格主体内容结束--> </table> <!--表格结束--> (2)填充样式，实现各种效果。 1 w( g* ^% v# s5 V d( G; [
● 设置表格table样式 <table width=”742px” cellspacing=”10” cellpadding=”0” style=”border:4px double #477BC8;”> 解释：width设置宽度，为什么是742，不是750呢，宝贝详情页不是最大支持750px吗？因为我们设置了边 框border ，左右边框加一起8px,合一起正好750px; cellspacing cesspadding border 以一张图给大家解释 ● 设置表格主体tbody样式 <tbody style="line-height:20px;font-family:tahoma,arial,宋体,sans-serif;font-size:16px;"> 解释：line-height段落的行高为20px,这样段落的行与行之间就会有一定的距离，这样设置就会让段落的显示不那么紧凑。Font-family：设置段落所有文字的字体.font-size:设置字体的大小。 ● 设置表格一行tr样式 <tr valign="top" align="left" style=”text-indent:2em;”> 解释：valign=“top”设置表格1行内的内容在垂直方向顶部对齐. Align=”left”设置改行的内容在水平方向居左对齐。Style=”text-indent:2em” 让段落内容首行空两格。 ● 设置表格内图片的样式 <p align="center" > 解释：让图片居中显示。
0 |2 f) s" B7 G# o2 F6 P3 A （3）代码显示
4 v; F6 m5 q+ C: N2 Z6 b0 B* J<table width="742px" cellspacing="10" cellpadding="0" style="border:4px double #477BC8;" background="http://img03.taobaocdn.com/imgextra/i3/641696614/T21fJQXmdbXXXXXXXX_!!641696614.jpg"> <!-- 红色部分是本文的关键 背景图片->2 w0 u6 N8 v, F! f& K [% m
<tbody style="line-height:20px;font-family:tahoma,arial,宋体,sans-serif;font-size:16px;">
3 F% O2 a% T; E$ y# b <tr valign="top" align="left" style="text-indent:2em;">' g% B! b9 x! o
<td>
) W! e" r6 F; t+ [ <p align="center"><img src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2RLNQXjhbXXXXXXXX_!!641696614.gif"></p>$ P9 f& I. ~& A$ }7 O0 ]
<p>淘宝翻滚了整个市场营销观念的智慧与光芒，事实上它定格了众多事业围城的革命价值，这是一场具有时代性质的商业革命，也是如今领导国内 外电子商务领域方向的主力。 纵观整个淘宝成长过程，随着管理制度不断完善，它对于电子商务市场的价值观所影响范畴不可估量。自2003年开办以来，截至 2007年，淘宝整个年度的交易额就已经到了400亿元人民币。而在2010年，淘宝网的年度交易额就再创奇迹，疯涨到了4000亿人民币！三年与10 倍，这一历史奇迹的创造，就是淘宝刻在电子商务时代革命里程碑上最光辉的一笔！( K- J1 Y; j* X( T4 {) w
</p>$ R& K' W; l, ~; W7 ` J8 a
1 L7 W$ ]' D( } l <p> 近年来，随着微博和社区在国内的壮大和影响，大家逐渐淡化了传统的广告平台推广营销方式，紧跟着网络潮流开始了新的营销战略路线，走向自我营销的新平 台，用微博与社区带动营销，即具有一定娱乐性质的大众化SNS营销模式。
$ U1 S* |% [8 ?- u </p>
' K6 U$ l& i- M2 Y: n( A' U' p$ I <p><img src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2K3BQXbXXXXXXXXXX_!!641696614.gif"></p> i: [9 \* L& s" H+ M, a% i! [
</td>4 Z. M/ L [; c# l* u+ q; u
</tr>
' ^" k0 Y/ b0 X1 r% v</tbody>
& u K9 |; b# l& {& M2 S4 P</table> （4）新手使用指南
8 ?6 w0 j' ]" [9 v| 进入宝贝编辑页，切换到源代码模式 |
* i* M, Y: F( ~; Q( P* } | | 需要修改的地方：background="改成自己想要的背景图片，可以在图片空间复制" | | <p><img src="改成宝贝图片地址，可以在图片空间复制过来"</p> | | <p>添加宝贝的详细文本描述</p> |
1 @' @# t2 _- m/ V* D, p （5）网页显示的效果截图 0 s9 P# K$ Q& ?2 a$ x0 p2 q
![]() | | 背景图-”江南游湖“显示成功，没有被屏蔽。 |
| 
[复制链接]
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
