【网站代码】三种html5广告添加自适应大小的方法

• 目前网络上关于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;
• }
•