二维码
搬瓦工 locvps

目前网络上关于HTM5+CSS自适应站越来越多,今天就来说下如何对广告位进行自适应控制。这里我自己测试了三种方法,逐个说一下,大家比较一下。

方法一:

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

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

前端代码:

Markup
<div class="img-box"><img src="ads.jpg"/></div>

CSS

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内容

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

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

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大体意思

display:block  显示的意思

display:none 隐藏的意思

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

方法三:

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

前端代码:

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

CSS

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;}

以上三种方法我都实际运用过,各有各的特点吧,主要看自己的实际需求。如果您有什么更好的解决方法,欢迎评论交流。

locvps
评论专区
  • 昵 称必填
  • 邮 箱必填
  • 网 址选填
◎已有 0 人评论
BudgetVM
作者介绍
总干事

总干事

总干事作为本站编辑,主要负责VPS优惠、域名优惠和站长百科三个栏目。
80vps henghost
budgetvm sugarhosts
二维码
点击关闭
  • 在线客服1

    在线客服2

    在线客服3

分享:

支付宝

微信