前面的文章中,楚狂人分享了一段自适应彩色格子广告代码,那是一段可以通用于任何网站的文字广告代码。今天再次分享两段可以帮助网站盈利的美观的“两列自适应广告代码”,这段两栏图片广告代码可以展示图片也可以展示文字广告!
两列广告代码效果:
DIV部分:
老规矩,这段DIV部分插入网页Html页面任何你想展示此广告的位置。这段代码的第一行是一个图片广告,下面这一行才是双列广告代码,根据自己网站的展示需要,您可以把第一行删除,或者增加下面一行的数量,复制粘贴即可。这段双列广告代码只是抛砖引玉,具体运用时大家可以自由发挥。
<div class="slad"> <!--图片横幅广告--> <a href="" target="_blank"><img src="图片地址"></a> <!--自适应文字广告--> <div class="zuo text-ad"><a href="" target=" _blank"="" style="background:#01AAED;">广告招商虚位以待</a></div> <div class="you text-ad"><a href="" target=" _blank"="" style="background:#2F4056;">广告招商虚位以待</a></div> </div>
CSS部分:
css代码放入网站的style.css,或者你当前网站模板的CSS文件中即可。
/**广告位CSS**/ .slad { background: #fff; overflow: hidden; clear: both; margin: 10px 0 0; padding: 8px; } .slad img { max-width: 100%; } .slad .text-ad { width: 50%; } .slad .text-ad a { margin: 6px 0 0; display: block; height: 60px; line-height: 60px; color: #fff; font-size: 24px; text-align: center; } .zuo { float: left; } .you { float: right; } @media(max-width:999px) { .slad .text-ad { width: 100%; } }
还有一段相对简单的两列DIV代码,可以放置广告也可以放其他网站内容。
一行两列代码(DIV+CSS):
<title>两个DIV并排</title> <style> .div-a{ float:left;width:49%;border:1px solid #000} .div-b{ float:left;width:49%;border:1px solid #000} </style> <div class="div-a">第一个DIV盒子</div> <div class="div-b">第二个DIV盒子</div>
另外,如果你需要的是文字广告,可以参考本站前面的分享:
发布时间: 阅读(154)
文字广告和图片广告哪个好?
我们前面提高,这段双列广告代码可以展示图片也可以展示文字,那么文字广告和图片广告哪个好?文字广告的优点在于可以直接传达信息,易于被搜索引擎抓取,且成本相对较低。对于一些较为理性或需要详细解释的产品或服务,文字广告可以更好地展现其特点和优势。此外,文字广告可以通过各种媒体和渠道进行传播,覆盖面广,可以满足不同用户的需求。
图片广告的优点在于视觉冲击力强,易于吸引用户的注意力,且创意空间更大。图片广告可以通过精美的设计、创意和色彩吸引用户的眼球,引起用户的兴趣和情感共鸣。对于一些需要快速传达信息或强调品牌形象的产品或服务,图片广告可以更好地展现其品牌价值和特点。
因此,文字广告和图片广告各有优缺点,需要根据具体的广告内容和目标受众进行选择。如果广告内容需要直接传达信息或解释产品特点,可以选择文字广告;如果广告内容需要吸引用户注意力或强调品牌形象,可以选择图片广告。同时,也可以根据不同的媒体和渠道进行选择,以达到更好的广告效果。