淘宝开店流程 | 进货技巧 | 开店卖什么好 | 开店故事 | 微信开店 | 创业项目 | 新闻专题 | 手机
您好,[请登录][免费注册]

53货源网专业网店货源网logo

53货源网首页 > 网店装修

PS切图导出代码上传淘宝店铺图片错位有空隙散屏

2015/7/29 14:11:37

    好些美工同学应该都遇到过这个问题,就是通过PS切图后导出的代码用DW编辑,将图片上传到淘宝后台,然后在DW中将更换图片链接和添加需要的超链接或者热点等操作后,页面显示是正常的。

    但是把代码贴到淘宝装修页面中去,发布之后页面却出现散屏情况,即图片错位,有空隙。

    这种情况,十有八九是使用了PS导出了table布局的代码,然后会在部分浏览器中显示没问题,有些浏览器显示却不正常。

    下面就以图文形式来交大家如何解决这个问题:

方法/步骤

  1. 1、首先可以使用火狐或谷歌浏览器查看下图片错位部分的代码,一般<table></table>标签最后一个<tr>标签中的<img>标签应该都是没有图片路径的。

  2. 其实这里是缺了一个分隔符,虽然高度只有1px,但是确实支撑整个表格的最底层元素。一般在其他浏览器都是没问题的,到了火狐浏览器,就会出现散屏现象。

    只要找到这个分隔符,上传到淘宝后台,将页面代码中缺少的分隔符补充上去就能解决问题了。

  3. 2、打开PS导出的图片文件夹,找到分隔符(一般的命名都是分隔符,大小都是宽1px,高1px),并上传到淘宝后台。

  4. 3、将分隔符图片上传到淘宝后台,获取图片链接。

  5. 4、将发布后显示不正常的代码复制到DW中的Html页面中,找到表格最后一行缺少图片路径的地方。

  6. 5、光标选择src=””,然后按下Ctrl+F键,打开查找和替换窗口,将src=””替换为src="分隔符上传淘宝后的路径",然后点击”替换全部”按钮即可。

  7. 全部替换后,会将所有src=””替换掉,会弹出替换的个数,检查下最后一样缺少分隔符的<img>标签数,不要把其他区域的src=””给替换了。

    为了避免这种情况,尽量的只将显示异常的<table>标签内的代码粘贴到DW中进行编辑。

  8. 6、检查无误后,将代码重新上传页面,发布更新之后,再用各主流浏览器查看,问题解决!

  9. 7、后记:又一美工同学出现这个问题,原因就是整个页面一块儿切图,且切图的时候不细心,水平方向左右两张图都会差1~2个像素,导致最右边侧边出现分隔符。按上边的方法仍旧不能解决,可以给table标签添加这两个样式,就可以解决:

  10. line-height: 0;

    font-size: 0;

注意事项

  • PhotoShop切图后,导出代码默认都是table布局,但是table布局兼容性并不是很好,而且扩展性差,不易修改,最好不要用这种方法。

  • PhotoShop切图时,最好是将每一版块内容分开切割,这样,PS默认导出的table标签中的内容就没那么多,容易维护,即使出了问题,需要修改,那么也不会影响整体页面,毕竟table布局不易修改的。


声明:本站信息来源于网络或会员投稿,不代表本站观点,如有侵犯到您的权益请发邮件到kf@53shop.com我们将在第一时间删除处理。

相关热门文章

更多..

精选商家

淘宝网店怎么开,找免费开网店货源,欢迎来到53网店货源网。本站的货源信息由会员发布,请妥善交易!网上进货防骗技巧》》

关于53货源网-|-网店代理-|-品牌加盟-|-网店大全-|-批发市场-|-免费发布信息-|-广告联系-|-友情链接

投诉、建议联系邮箱:kf@53shop.com (请尽量发邮件联系) QQ:93865423 广告联系 QQ:3508810008 交流QQ群:203212665(禁止任何广告)

© 2006-2023 53shop.com, all rights reserved.网店代理货源网 [闽ICP备06002980号-2]