三种html5广告添加自适应大小的方法

发布日期:2019-07-26 19:38:00 作者:何以往事

  • 正文内容
  • 相关推荐

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

方法一:

下面方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。
最简单的方法就是直接在img的父元素上加padding-bottom即可

前端代码:

<div class="img-box">
<img src="11.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="1.3.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;
}



搜一下

头像
描述: ღ 我愿用一世阳光换你的微笑 ღ

本文标签:

文章标题:三种html5广告添加自适应大小的方法

文章链接:https://www.dcqzz.cn/post/784

版权声明:若无特殊注明,本文皆为 何以往事 原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

2条评论
  1. avatar

    林夕梦 Lv.1 IBrowse r IBrowse r Android 9 Android 9 回复

    这是一篇好文章,已收藏。

    山西省 网宿科技联通CDN节点

    1. 何以往事 Chrome 76.0.3809.132 Chrome 76.0.3809.132 Windows 7 Windows 7 回复

      回复了林夕梦:表情

      中国 移动