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

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

相关教程

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

  • 淡雅浅黄 简约风尚 女装女鞋淘宝模板

    淡雅浅黄 简约风尚 女装女鞋淘宝模板

    人气:48805
  • 高雅大牌 舒爽浅色 女包女鞋网店模板

    高雅大牌 舒爽浅色 女包女鞋网店模板

    人气:56240
  • 森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    人气:1
  • 时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    人气:56789
  • 双十一 淘宝活动促销模板 潮流女装

    双十一 淘宝活动促销模板 潮流女装

    人气:33016
  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

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

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

    人气:43216
  • 时尚简约 瀑布流 装饰家居淘宝模板

    时尚简约 瀑布流 装饰家居淘宝模板

    人气:35416