荷塘月色_淘宝抖音跨境电商卖家论坛社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问移动社区

查看: 28046|回复: 63
打印 上一主题 下一主题

[其他相关] 仅仅一步完美解决宝贝详情页不支持背景图片的难题,装修者必看

  [复制链接]
这里可以设置广告或签名,请到【首页】用户名旁边-【设置】-【个人资料】-【个人信息】-【个人签名】设置
跳转到指定楼层
1#
宏涛 发表于 2014-3-23 01:12:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
习惯写html代码来装修的朋友可能会发现总是无法通过css来设置宝贝详情页的背景图片,阿秋经过多次测试后发现是淘宝平台屏蔽了宝贝详情页css背景图片设置,但是百密一疏,还是可以通过表格设置来达到效果,下面阿秋带大家一起来实现这一点,其实很简单,设置一个表格,<table background="图片地址">即可。如果你通过div+css布局方式,形如<div style="background:url(图片地址)"> 是被屏蔽的,切记!! u5 T5 B' s8 `
本文讲解的是一个简单的例子,但是雏形框架却很完善,对特效不要求非常高的朋友们可以直接拷贝下面的代码,改成自己的。要实现自己想要的效果,朋友们可以根据这个例子自行发挥。
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                        样式,控制内容的显示风格。

/ r  c! O/ L7 E/ T; E& |
上面是本文用到的属性,想知道更多可以在网上收集html和css手册,也可以向阿秋索要。
Css和html手册对于淘宝装修模板(简易模板和sdk模板)设计人员来说是必备的,想往这方面发展的话,就要从这里入手哦。
2.开始书写代码
   (1)整体框架布局   
<table>         <!--表格开始 -->
  <tbody>       <!--表格主体内容开始 -->
    <tr>        <!--1行开始 -->
       <td></td><!-- 该行的单元格具体内容区 ,所有的图片和文字都要在此显示 --》
    </tr>       <!--行结束 -->
  </tbody>      <!--表格主体内容结束-->
</table>        <!--表格结束-->
     (2)填充样式,实现各种效果。
% \1 H0 Q- w* W, a; Y7 u
●  设置表格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" >
                 解释:让图片居中显示。

7 T( `( U4 u/ o2 @5 z
       (3)代码显示
- h9 \, C* P5 v7 ^. y$ |
<table width="742px" cellspacing="10" cellpadding="0" style="border:4px double #477BC8;" background="http://img03.taobaocdn.com/imgextra/i3/641696614/T21fJQXmdbXXXXXXXX_!!641696614.jpg">
<!-- 红色部分是本文的关键 背景图片->
; y& L5 P& d4 C0 Q8 K<tbody style="line-height:20px;font-family:tahoma,arial,宋体,sans-serif;font-size:16px;">5 p9 }  f' }! e' p
    <tr valign="top" align="left" style="text-indent:2em;">
7 ?0 V% v3 `+ ^3 Y# S3 n) I        <td>9 H6 k4 Q( H6 @
            <p align="center"><img  src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2RLNQXjhbXXXXXXXX_!!641696614.gif"></p>5 W1 i3 s3 G0 S; D: S- Q! ?
            <p>淘宝翻滚了整个市场营销观念的智慧与光芒,事实上它定格了众多事业围城的革命价值,这是一场具有时代性质的商业革命,也是如今领导国内 外电子商务领域方向的主力。 纵观整个淘宝成长过程,随着管理制度不断完善,它对于电子商务市场的价值观所影响范畴不可估量。自2003年开办以来,截至 2007年,淘宝整个年度的交易额就已经到了400亿元人民币。而在2010年,淘宝网的年度交易额就再创奇迹,疯涨到了4000亿人民币!三年与10 倍,这一历史奇迹的创造,就是淘宝刻在电子商务时代革命里程碑上最光辉的一笔!" w; x& R5 L4 p7 m+ r! p
            </p>0 }1 Y9 N0 G- o) o9 x
           ! z" O0 n1 O, O" F" [
            <p>    近年来,随着微博和社区在国内的壮大和影响,大家逐渐淡化了传统的广告平台推广营销方式,紧跟着网络潮流开始了新的营销战略路线,走向自我营销的新平 台,用微博与社区带动营销,即具有一定娱乐性质的大众化SNS营销模式。
1 @3 [$ B: }5 U$ I, _) y            </p>
% E8 Y! n) K& W$ n( s            <p><img src="http://img03.taobaocdn.com/imgextra/i3/641696614/T2K3BQXbXXXXXXXXXX_!!641696614.gif"></p>; q; f9 t; P1 I/ p
        </td>
  l3 g% N4 R' K/ ?* g% Y4 E</tr>
4 z! p! e5 k( |- ^- \5 ~, l</tbody>
. N" A0 Q6 J( ?+ L</table>
(4)新手使用指南

' l* Y) J3 ~7 n! m. H/ v' e; l
进入宝贝编辑页,切换到源代码模式

/ d' p6 R/ m( P$ |* [9 e
需要修改的地方:background="改成自己想要的背景图片,可以在图片空间复制"
<p><img src="改成宝贝图片地址,可以在图片空间复制过来"</p>
<p>添加宝贝的详细文本描述</p>

+ z( y$ P8 d, \
  (5)网页显示的效果截图
8 [+ Q  u8 b3 V6 w" a8 E
背景图-”江南游湖“显示成功,没有被屏蔽。

评分

参与人数 1荷币 +5 收起 理由
admin + 5 纯转载!再接再厉!

查看全部评分

微信扫以上二维码分享朋友圈;或手机浏览器分享微信朋友圈;马上获得荷币奖励 奖励规则

(声明:本文由网友发布,不代表本站观点或立场,如有侵权请联系QQ:2377240266处理)

 

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏1
回复

使用道具 举报

2#
过路5678 发表于 2014-3-23 01:37:19 | 只看该作者
不错 支持下
回复 支持 反对

使用道具 举报

3#
┙\'值覺 发表于 2014-3-23 01:37:22 | 只看该作者
好好学习
回复 支持 反对

使用道具 举报

4#
王者手机批发 发表于 2014-3-23 04:13:51 | 只看该作者
看看
回复 支持 反对

使用道具 举报

5#
吴巧珊 发表于 2014-3-23 08:48:20 | 只看该作者
不错 支持下
回复 支持 反对

使用道具 举报

6#
超速虚拟点卡 发表于 2014-3-23 12:46:16 | 只看该作者
支持下
回复 支持 反对

使用道具 举报

7#
增月 发表于 2014-3-23 16:24:50 | 只看该作者
非常谢谢
回复 支持 反对

使用道具 举报

8#
夜观天象 发表于 2014-3-23 20:25:38 | 只看该作者
努力学习奋斗
回复 支持 反对

使用道具 举报

9#
女人 发表于 2014-3-23 22:56:45 | 只看该作者
高手云集
回复 支持 反对

使用道具 举报

10#
М|ssчòμ 发表于 2014-3-24 02:59:54 | 只看该作者
我也来顶一下..
回复 支持 反对

使用道具 举报

11#
Frin 发表于 2014-3-24 12:10:33 | 只看该作者
真麻烦,老要回帖
回复 支持 反对

使用道具 举报

12#
Almost□Blac 发表于 2014-3-24 15:21:10 | 只看该作者
不错,真的不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线客服中心
关闭

微信客服 QQ客服 点击这里给我发送消息

加大群免费领取干货

 
在线客服中心

手机版|荷塘月色_淘宝拼多多抖音小红书论坛_跨境电商商家最喜欢的开店运营经验学习交流社区论坛  
【免责声明:本站内容均来自网友发布,不代表本站观点或立场,如有侵权请联系我们处理】

GMT+8, 2024-11-13 15:13 , Processed in 0.282886 second(s), 53 queries , Gzip On.

快速回复 返回顶部 返回列表