• 网站所有资源均来自网络,如有侵权请联系站长删除!站长QQ:1295341837

网站模版添加电脑手机自适应大小html5广告的方法脚本

网站制作学习 Mlingkun 2019-03-08 696 次浏览

现在随着HTM5+CSS3越来越流行,自适应站点也越来越多,但是自适应站点会遇到一个问题,添加的广告不会自适应,添加了PC端的广告后,使用手机浏览,会发现广告严重变形或者显示不全或者根本不显示,今天就教下大家如何对广告位也进行自适应控制。


方法一说明:

该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。

简洁的方法就是直接在img的父元素上加padding-bottom就行了


-----------------页面代码----------------

<div class="img-box">

<img src="123.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----------------


方法二说明:

这些全部要在模板里进行操作,主要是对CSS的修改,思路就是使用两个广告位,一个一个大屏幕的,一个小屏幕的。

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

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

首先小伙伴们先放弃一个东西,就是后台的广告管理!接下来所有事情都应该在模板里进行了!


1.我们先找到这个站点的主CSS,或者不用找CSS,直接在模板或者页面里添加以下CSS:


-----------------CSS----------------


.pcd_ad{display:block;}

.mbd_ad{ display:none}

@media(max-width:768px) {

.pcd_ad{display:none !important;}

.mbd_ad{display:block !important;}

}


-----------------CSS----------------


上面CSS的意思大概:

display:block  这是显示的意思

display:none 这是隐藏的意思

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


2.我们要找到自己想添加广告的地方,然后插入以下代码:


-----------------页面代码---------------


<div class="pcd_ad">电脑端广告代码</div>

<div class="mbd_ad">手机移动端广告代码</div>


-----------------页面代码----------------



方法三说明:

主要是用css来实现图片高度的自适应问题,这种方法是可以在图片上方垂直居中展示文字的,如果不需要可以选择最下方更简洁的代码


-----------------页面代码----------------

<div class="box">

<span>行内元素垂直居中</span>

<div class="img-box">

<img src="123.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;

}

-----------------CSS----------------


三种方法不同的情况下随便使用。