-
目前网络上关于HTM5+CSS自适应站越来越多,今天就来说下如何对广告位进行自适应控制。这里我自己测试了三种方法,逐个说一下,大家比较一下。
方法一:
这个方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。
我采取了比较简单粗暴的方法,就是直接在img的父元素上加padding-bottom标签。
前端代码:
<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; }
以上三种方法我都实际运用过,各有各的特点吧,主要看自己的实际需求。如果您有什么更好的解决方法,欢迎评论交流。
网站广告实现自适应大小显示的三种方法
2156人参与 |分类: 站长百科|时间: 2019年03月23日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法