it618直播商家商城it618插件手机版首页自定义广告模板
教程导航: 添加轮播图片的方法 为了方便区分与查找不同模块,可以在不同模块之间插入以下代码: <!--=============================================模块1=============================================--> 效果如图: 为了让手机版首页美观实用,插件加了一个自定义广告内容设置,可以自由编辑,为了方便,提供了一些模板: 简单的图片广告 <table width="100%"> <tr><td><a href="广告链接"><img src="广告图片" width="100%"></a></td><td>...</td><td>...</td></tr> <tr>...</tr> </table> 广告内容代码写在<td>与</td>中间,<tr>...</tr>算一行,<td>...</td>算一列,如果想强制宽度,比如一行显示2个同样宽度的图片广告可以这样: <table width="100%"> <tr><td width="50%"><a href="广告链接"><img src="广告图片" width="100%"></a></td><td width="50%"><a href="广告链接"><img src="广告图片" width="100%"></a></td></tr> </table> 一、仿美团手机版首页广告 模板代码: <style> #daogou{padding-top:6px; padding-bottom:5px}#daogou table{width:100%;}#daogou tr td{text-align:center;}#daogou .react{-webkit-box-flex:1;padding:0;border-left:1px solid #ddd;text-align:center}#daogou .imgbox{height:1.2rem;margin:auto;display:block}#daogou .react:first-child{margin-left:0;padding-left:0;border-left:0}#daogou .left{-webkit-box-flex:1}#daogou .info{vertical-align:top;text-align:left;display:inline-block}#daogou .info strong{display:block;color:#55a40f;font-size:13px;margin-top:6px;margin-bottom:10px}#daogou .huilife strong{color:#ff3f0d}#daogou .scense strong{color:#f742a0}#daogou small{display:block;font-size:11px;} </style> <div id="daogou"> <table> <tbody> <tr> <td> <a class="react" href="http://www.cnit618.com/mall_wap-product-14.html" rel="nofollow"> <span class="info"> <strong>我们约吧</strong> <small>恋人家人好朋友</small> </span> <img class="imgbox" src="http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png" /> </a> </td> <td style="border-left:#f1f1f1 1px solid;"> <a class="react huilife" href="http://www.cnit618.com/mall_wap-product-11.html" rel="nofollow"> <span class="info"> <strong>低价超值</strong> <small>十元优惠好生活</small> </span> <img class="imgbox" src="http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg" /> </a> </td> <td style="border-left:#f1f1f1 1px solid;"> <a class="react scense" href="http://www.cnit618.com/mall_wap-product-1.html" rel="nofollow"> <span class="info"> <strong>聚餐宴请</strong> <small>朋友家人常聚聚</small> </span> <img class="imgbox" src="http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png" /> </a> </td> </tr> </tbody> </table> </div> 以上蓝色部分是图片地址,你可以直接引用示例的,也可以自己上传图片。为了保证和示例的效果一样,如果想换图片请模仿示例图片 注意:复制以上代码粘贴时,请在代码模式下粘贴,如图: 推荐在代码模式下修改内容,如果代码修改坏了,可以直接复制以上示例代码,再修改,这样方便些! 修改图片小技巧:可以在正常模式,直接选中图片,点上传图片图标,就可以直接替换图片了,如图: |