艺灵设计

全部文章
×

宝贝描述背景与文字分离

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-12 14:20:02 - 阅: - 评:0 - 积分:0

前面有提到过淘宝店铺自定义全屏背景的使用方法,当时用的是图片当背景的方法,在宝贝详情页里面又是怎么样的呢,当时也是做背景了,这是废话,但需要注意一个细节!还是听洒家来详细道来,这个是洒家的真实经历。

13年8月上旬未一人独闯杭州,13号时在第三家面试公司停脚。店长给了我一张图,大致如下面这种,
宝贝描述背景与文字分离
要求:图片与文字分离,在宝贝页面中展现出来,不错位。这题对于我们写代码的来说,那是小菜一碟。图片做背景,文字位于图片上,margin,padding都可以实现;图片不做背景,文字进行定位relative,absolute也都可以实现。

随后洒家便在电脑前进行操作,当时紧张死了。第一次亲自上机操作,这可得小心才是。洒家打开ps,处理了下图片,然后打开了dw,正要写样式时,店长说:“店未开通css样式,用内联样式写”。这个对我来说,丝毫不是问题。就这样我的双手在键盘上敲了一会儿,本地测试成功后将代码拷进了店铺一个宝贝的页面中,确定后再来看宝贝描述,空白一片!尼马,当时想死的心都有了,脸上一脸汗(这个到底是冷汗还是热汗自己也说不清,8月份的杭州是异常的热......),当时使用的是直接当div背景的写法。洒家当时真是慌了手脚,立马回到dw中进行了测试,一边测试一边默念不科学百万次......

后来折腾了好久,还是没有整明白为什么。作为一个写代码的,虽然是刚毕业出来的吧,但之前在校时神马新浪,腾讯洒家全完整排版过,大小网站页面练手的也不下20个,今天在这小河沟里翻了船,洒家是一万个伤心啊......

第一次感觉到了淘宝比那个让人吐血三千尺而不止的ie6更加坑爹!后来店长让我用table试试。话说这么垃圾的几年前就已经被淘汰的table能够解决此问题?!尼马这也太不科学了吧!事实证明,table确实能够解决此问题。从那以后,洒家对表格是另眼相看。

在正常情况下,设置背景图片时使用background-image的写法是能够正常显示的,但在宝贝详情页里面却显示不出来,就算是你付费了css,设置好的类背景在这里面也是无法显示的!但是table却可以实现将图片直接做背景!预览地址:http://trade.taobao.com/trade/detail/trade_snap.htm?spm=a1z09.1.11.62.3liTbP&tradeID=453825790780614

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2013-11-12/114.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 宝贝描述 背景图片 图文分离 table背景图片 淘宝店铺装修

上一篇: 淘宝店铺装修中的那些牛人   下一篇: 马尔杜克家12号最新炫酷banner

评论区