看 思否 的时候，被首页的格子小广告创意吸引了，回来就大概也写个简单的demo，分享给大家
我首页广告区域长宽为320px*247px
所以我按我的写了7行10列 30px*30px
demo如下，当然您网站需要自定义，可请鹏仔喝奶茶哦
CSS
<style>
.ad_gezi{
width: 300px;
}
.ad_gezi a{
width: 30px;
height: 30px;
display: block;
float: left;
}
.ad_gezi img{
width: 30px;
height: 30px;
}
.no_ad{
cursor:default;
}
.ad_gezi_1 a:nth-child(2n){
background: #CAE1FF;
}
.ad_gezi_2 a:nth-child(2n+1){
background: #CAE1FF;
}
.ad_gezi_1 a:nth-child(2n+1){
background: #ADD8E6;
}
.ad_gezi_2 a:nth-child(2n){
background: #ADD8E6;
}
</style>HTML
<div class="ad_gezi"> <div class="ad_gezi_1" style="width: 100%;"> <a target="_blank" class="add_ad" href="http://iqzhan.cn/"><img src="http://www.iqzhan.cn/favicon.ico" alt=""></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_2" style="width: 100%;"> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_1" style="width: 100%;"> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_2" style="width: 100%;"> <a target="_blank" class="add_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_1" style="width: 100%;"> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_2" style="width: 100%;"> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> <div class="ad_gezi_1" style="width: 100%;"> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> <a target="_blank" class="no_ad" href="javascript:;"></a> </div> </div> <a target="_blank" style="display:block; text-align:center; color: #9B30FF; font-size: 16px; line-height: 16px;" href="#">广告位促销，月曝光3万，5毛/天</a>
个人小程序
