backgroud实现的信息流广告效果实例页面

回到相关文章 »

展示

占位示例图片,信息流效果演示用。

占位示例图片,本信息流广告效果使用background-attachment:fixed实现。

CSS世界京东

占位示例图片,此方法HTML内容自然内嵌,对其他元素布局几乎无干扰。

占位示例图片,只需一行CSS即可实现,唯一问题iOS Safari浏览器不支持。

代码

CSS代码:
.list {
    margin: 8px 0; 
    padding: 16px; 
    background-color: #fff;
}
.adsense {
    display: block;
    height: 576px;
    background: #7069f5 url(./ad.jpg) no-repeat top fixed;
    background-size: 432px;
    color: transparent;
}
HTML代码:
<div class="list">
    <p>占位示例图片...。</p>
    <p><img src="./mm1.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><img src="./mm6.jpg"></p>
</div>
<a href="#" class="adsense" target="_blank">CSS世界京东</a>
<div class="list">
    <p>占位示例图片,...</p>
    <p><img src="./mm3.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><./mm4.jpg"></p>
</div>