• 谈天说地
  • 仿思否首页 格子广告 给网站添加格子广告代码


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



个人小程序