!
也想出现在这里? 联系我们
广告位
当前位置:首页>用户投稿>自适应网站投放的广告大小显示的三种方法(网站自适应广告代码)

自适应网站投放的广告大小显示的三种方法(网站自适应广告代码)

前言:

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

方法一:

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

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

前端代码:

CSS

方法二:

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

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

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

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

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

CSS

上面CSS解释:

display:block  显示的意思

display:none 隐藏的意思

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

方法三:

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

前端代码:

CSS

上面的三种方法我都实际运用过,各有各的特点吧,主要看自己的实际需要吧。

给TA打赏
共{{data.count}}人
人已打赏
用户投稿

Java枚举类型(enum) 详解以及7种常见的用法

2023-2-2 18:44:07

用户投稿

资源网站文章底部美化版下载按钮代码

2023-2-3 18:42:58

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索