看 思否 的时候，被首页的格子小广告创意吸引了，回来就大概也写个简单的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>

个人小程序