公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝装修代码

CSS代码制作图片格子代码

2015-03-20 02:57:54

淘宝店铺的宝贝详情页面装修宽度有限,如果把宝贝图片一个接一个从上往下排序,长度过长会影响客户体验度。如下图,运用格子方框把几个宝贝有序排列起来,简单且美观。卖家在淘宝店铺装修时应该注意对空间的有效利用。下图的方框无法通过后台编辑框得到实现,只能通过CSS代码。想要方框的卖家们,你们有福了。下面就来跟唯艺学习如何用CSS代码制作方框把,还可以改变颜色哦。



完整的图片格子代码

<table
background="背景图片地址"
width="750"border="0"align="center"cellpadding="0"cellspacing="0"
bgcolor="#f1f1f1">
<tr>
<td
style="padding:10px10px10px10px;"><img
src="图片地址"
width="360"alt="图片描述"/></td>
<tdstyle="padding:10px10px10px0px;"><img
src="图片地址"
width="360"alt="图片描述"/></td>
</tr>
</table>


如何用代码设置图片格子

第一、设置格子背景图片
【background="背景图片地址"】就是格子方框里的背景。想要替换另外的背景图片,必须得把作为背景得图片上传至淘宝相册空间,复制粘贴地址即可。
 


第二、设置格子宽度
【width="750"】里面的参数750是可以根据自身情况自行调试。


第三、设置格子位置
【align="center"】这里可以设置格子的位置,"center"为居中,“left”为居左, “right”为居右。


第四、设置格子背景颜色
【bgcolor="#f1f1f1"】此处的代码#f1f1f1为背景颜色代码。颜色代码可以去百度搜索获得。如果卖家只想显示背景颜色而非背景文理,则把“背景图片地址”代码删除掉。效果如下:
 


第五、设置格子边框颜色
【background-color:#f60】#f60的颜色值是橙色。具体代码如下:


 
效果图:
 


第六、设置格子间距
【style="padding:10px10px10px10px;"】10px处的排序为:上间距,右间距,下间距,左间距。把左边距变为0后显示的效果为:


 
这样制作的图片格子是不是在视觉上有突出的感觉?如果你要在宝贝详情页面上增加爆款或关联宝贝,可以使用这种代码。最后,唯艺温馨提示,放在方框内的图片宽度不要小于格子宽度,否则图片会自动放大,变模糊。卖家应多学习用代码装修店铺,打破后台编辑功能的局限。卖家还需注意,虽然代码可以实现不同颜色的功能,风格、色彩统一的原则不要随意破坏。



      本文出自唯艺网店装修平台(www.weiyi5.cc,转载请注明出处!

0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 家居首饰淘宝模板 新秀系列 高雅背景

    家居首饰淘宝模板 新秀系列 高雅背景

    人气:34730
  • 奢侈名表 简约奢华 饰品珠宝淘宝模板

    奢侈名表 简约奢华 饰品珠宝淘宝模板

    人气:38980
  • 活泼绚丽 清新蓝色 户外包包淘宝模板

    活泼绚丽 清新蓝色 户外包包淘宝模板

    人气:39477
  • 时尚彩妆 全屏轮播 服装配件网店模板

    时尚彩妆 全屏轮播 服装配件网店模板

    人气:30789
  • 好茶汇聚 素雅浅色 食品保健淘宝模板

    好茶汇聚 素雅浅色 食品保健淘宝模板

    人气:30571
  • 活力欧美 帅气男装 服装配件淘宝模板

    活力欧美 帅气男装 服装配件淘宝模板

    人气:40233
  • 英伦雅致 潮流鞋靴 精品鞋包网店模板

    英伦雅致 潮流鞋靴 精品鞋包网店模板

    人气:57481
  • 旅行眼镜 炫酷欧美 服装配件网店模板

    旅行眼镜 炫酷欧美 服装配件网店模板

    人气:43216