服务器与VPS
促销优惠信息

自适应一行两列广告代码 网站通用两栏广告代码

查看目录
文章目录隐藏
  1. 两列广告代码效果:
  2. DIV部分:
  3. CSS部分:

前面的文章中,楚狂人分享了一段自适应彩色格子广告代码,那是一段可以通用于任何网站的文字广告代码。今天再次分享两段可以帮助网站盈利的美观的“两列自适应广告代码”,这段两栏图片广告代码可以展示图片也可以展示文字广告!

两列广告代码效果:

自适应一行两列广告代码 网站通用两栏广告代码

双列自适应广告代码

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>

另外,如果你需要的是文字广告,可以参考本站前面的分享:

自适应彩色格子广告代码,网站通用文字广告代码

发布时间:     阅读(97)

文字广告和图片广告哪个好?

我们前面提高,这段双列广告代码可以展示图片也可以展示文字,那么文字广告和图片广告哪个好?文字广告的优点在于可以直接传达信息,易于被搜索引擎抓取,且成本相对较低。对于一些较为理性或需要详细解释的产品或服务,文字广告可以更好地展现其特点和优势。此外,文字广告可以通过各种媒体和渠道进行传播,覆盖面广,可以满足不同用户的需求。

图片广告的优点在于视觉冲击力强,易于吸引用户的注意力,且创意空间更大。图片广告可以通过精美的设计、创意和色彩吸引用户的眼球,引起用户的兴趣和情感共鸣。对于一些需要快速传达信息或强调品牌形象的产品或服务,图片广告可以更好地展现其品牌价值和特点。

因此,文字广告和图片广告各有优缺点,需要根据具体的广告内容和目标受众进行选择。如果广告内容需要直接传达信息或解释产品特点,可以选择文字广告;如果广告内容需要吸引用户注意力或强调品牌形象,可以选择图片广告。同时,也可以根据不同的媒体和渠道进行选择,以达到更好的广告效果。

楚狂人 » 自适应一行两列广告代码 网站通用两栏广告代码

相关推荐

  • 暂无文章

评论 抢沙发

  • (必填)
  • (必填)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏