webapp开拓-为淘宝客网站添加一个底部选项卡
我们这个webapp系统是基于PHP+mysql+MUI环境开拓，如果不清楚如何搭建，欢迎留神咨询或者不雅观看之前的文章，那么，我们本日要为大家讲解一下的便是在网站首页添加一个随机推举产品的功能。效果如下，赤色区域为我们要实现的效果
打开我们的工程，配置我们推举商品的CSS，CSS代码如下：
.index-tuijian{
margin-top:0.5em;
margin-bottom:0.5em;
background:#fff;
}
.index-tuijian >label{
margin:1em;
line-height:2em;
background:none;
}
.index-tuijian.mui-grid-view{
padding-right:1em;
background:none;
}
.index-tuijian.imginfo{
line-height:2em;
width:1em;
height:1em;
}
配置好CSS之后，我们须要编写HTML代码
我们利用九宫格的形式，不过由于九宫格超过列数会自动跳到第二行，以是我这里限定数据库取数据为4个数据，同时宫格无论什么时候都是显示4个元素。这里我直接从淘宝客数据库里面通过rand()函数实现每次都随机产生产品抽取4个元素。详细代码如下：
<div class=\"大众index-tuijian\"大众>
<label> 推举</label>
<ul class=\公众mui-table-view mui-grid-view\公众>
<?php
$res1 = mysql_query(\"大众select from yeehot_taobaoke_shop order by rand() limit 4\公众);
while ($row1 = mysql_fetch_array($res1)) {
$img = $row1['img'];
$link = $row1['shortlink'];
echo\公众 <li class='10cbe7fd70f23a83 mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>\公众;
echo\"大众<a href='$link'> \"大众;
echo\公众<img class='e7fd70f23a836490 mui-media-object imginfo' src='$img'>\公众;
echo\"大众<div class='70f23a836490a78b mui-media-body'>\"大众;
echo\"大众\公众. $row1['name'] .\公众\"大众;
//else{
//echo \公众无\"大众;
//}
echo\"大众</div>\"大众;
echo\"大众 </a>\"大众;
echo\"大众 </li>\公众;
}
?>
</ul>
</div>
整体效果如下：
这里，我们就实现了我们的首页推举商品的功能，欢迎连续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一韶光回答大家的。也欢迎收藏与转发，如果须要转载到其他网站，请与我联系，yeehot.com，如果有什么见地或者想法欢迎不才方留言
