分享一套淘宝在线装修模板：950唯美淘宝瀑布流模板，模板粉色系，适合服装、鞋包、化妆品、饰品等淘宝网店使用。模板宽度950，模板中的宽度固定为210px，高度任意，美观即可。为达到瀑布流效果，图片高度不能高度一样，最好正方形，长方形各一些。

 

模板在线使用地址：http://www.yubaibai.com.cn/tool/950/pbl950/

模板效果预览：

模板使用说明：

（1）宝贝总数不超过20个，每一列3-5个。

（2）图片宽度固定为210px，高度随意。为达到瀑布流效果，图片高度不能高度一样，最好正方形，长方形各一些。

（3）黏贴宝贝购买地址时，先删除#这个符号

（4）注意下图箭头提示的地方

淘宝装修模板代码：

如果习惯自己修改代码，不喜欢在线编辑，可以直接复制下面的代码，自行修改使用

下面是淘宝瀑布流效果模板代码：

<div class="sg-hd" style="height:80px;background:#FFF url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB27ZnDXVXXXXa9XXXXXXXXXXXX-770458061.gif) no-repeat center center; margin-bottom:10px;overflow:hidden"> <h3 style="font-size:16px;color:#333;font-family:微软雅黑; line-height:70px; text-align:center; padding-left:100px"> { 瀑布流 } </h3> </div> <div class="sg-bd" style="clear:both; overflow:hidden;color:#666;border-left:1px solid #EEE; width:950px; margin:0 auto;border-top:1px solid #EEE;"> <ul style=" float:left; width:236px; overflow:hidden; border-right:1px solid #EEE; font-family:arial; display:inline"> <li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥67 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥68 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥99 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥45 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li> </ul> <ul style=" float:left; width:236px; overflow:hidden; border-right:1px solid #EEE; font-family:arial; display:inline"> <li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥67 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥68 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥99 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li> </ul> <ul style=" float:left; width:236px; overflow:hidden; border-right:1px solid #EEE; font-family:arial; display:inline"> <li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥67 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥68 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥99 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥45 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li> </ul> <ul style=" float:left; width:236px; overflow:hidden; border-right:1px solid #EEE; font-family:arial; display:inline"> <li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥67 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:200px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥68 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li><li style="padding:13px;overflow:hidden;float:left; width:210px;border-bottom:1px dotted #EEE;"> <a style="display:block;width:210px;overflow:hidden;margin:0 auto; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1TozEXnBgXXaQQ9Z__080520.jpg_400x400.jpg) no-repeat center 0;height:310px;" href="#" target="_blank"> </a> <span style="color:#555;display:block; height:20px; line-height:20px; overflow:hidden; margin:6px 0 8px 0"> 标题 </span> <div style="height:20px;"> <span style=" float:left"> <b style=" font-family:arial; margin-right:10px; font-size:14px; color:#faa8a6"> ¥99 </b> <del style="color:#999"> ¥167 </del> </span> <span style="float:right"> <a href="#" _fcksavedurl="#" target="_blank" style="width:38px; height:18px;background:#faa8a6 url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB23.jCXVXXXXaCXXXXXXXXXXXX-770458061.gif) no-repeat -80px 0;display:block;float:right;margin-left:3px;"> </a> </span> </div> </li> </ul> </div> <a name="sgmb"></a>

模板在线使用地址：http://www.yubaibai.com.cn/tool/950/pbl950/

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 yubaibai360@qq.com 举报，一经查实，本站将立刻删除。