#独家
自适应网站排放的广告大大小小式样的三种方法

我采取了比较简朴粗暴的方法,就是直接在img的父元素上加padding-bottom标签。

目前网络上关于HTM5+CSS自适应站越来越多,今天就来说下如何对广告位进行自适应控制。

前端代码:

<div class=“img-box”>
<img src=“ads.jpg”/>
</div>
CSS

.img-box{
padding-bottom:100%;
}
.img-box img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
margin:auto;
}

方法一:

这个方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面动弹。这里我自己测试了三种方法,逐个说一下,大家比较一下。

方法二:

测试了第一种方法后,我尝试了第二种方法,这个是在模板里进行操作,主要是对CSS的修改,就是使用两个广告位,一个一个大屏幕的,一个小屏幕的。

1、PC端广告位:大屏幕显示,小屏幕隐藏

2、移动端广告位:大屏幕隐藏,小屏显示。

3、我们找到这个站点的主CSS,或者直接在模板或者页面里添加以下CSS内容

在需要显示的地方添加下面前端代码:

<div class=“pcd_ad”>电脑端广告代码</div>
<div class=“mbd_ad”>手机移动端广告代码</div>
CSS

.pcd_ad{display:block;}
.mbd_ad{ display:none}
@media(max-width:768px) {
.pcd_ad{display:none !important;}
.mbd_ad{display:block !important;}
}
上面CSS解释:

display:block  显示的意思

display:none 隐藏的意思

@media(max-width:768px)  判断页面宽度小于768PX的时候显示后面{}的样式。

方法三:

主要是通过css来实现图片高度的自适应问题,这种方法是可以在图片上方垂直居中展示文字的

前端代码:

<div class=“box”>
<span>行内元素垂直居中</span>
<div class=“img-box”>
<img src=“ads.jpg”/>
</div>
</div>
CSS

.box{
width: 50%;
margin: 50px auto;
}
.img-box{
width: 100%;
position:relative;
z-index:1;
}
.img-box img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
margin:auto;
z-index: -1;
*zoom:1;
}
.img-box:before {
content: “”;
display: inline-block;
padding-bottom: 100%;
width: 0.1px;/*必须要有数值,否则无法把高度撑起来*/
vertical-align: middle;
}
上面的三种方法我都实际运用过,各有各的特点吧,主要看自己的实际需要吧。

相关教学:

WordPress增加判断是否投放投放谷歌AdSense广告单元代码
之前,技术宅提到,在我们投放了谷歌AdSense自动广告之后会出现页面级的违规《AdSense页面级违规处理》,关于自动广告的页面级违规,很好处理,我们只需要在谷歌AdSense后台设置网页排除即可,如何设置,很简单,进入广告概览,选择对应的网站,点击编辑,即可进入自动广告设置界面,即可设置需要排除的页面!
点击管理,将页面级违规的链接添加进去保存即可!

资源下载此资源仅限注册用户下载,请先
客服QQ:776262893
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (1)

未尽作者允许,禁止恶行转发,所以版权归原创者所以,如有违规永久封号。

梦凡源巢 编程技术 自适应网站排放的广告大大小小式样的三种方法 https://www.mengfan.co/1002.html

有些东西不是你原路返回就能找得回来的.

常见问题
  • 如果下载失败或者链接失效,请及时联系站长处理。谢谢配合
查看详情
  • 演示站只是用于观看实体模型。并非正常营业,所以有的演示站链接会失效。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务