百变鹏仔 2020-3-9
看 思否 的时候,被首页的格子小广告创意吸引了,回来就大概也写个简单的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>
个人小程序