欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > 织梦模板小教程:内容页广告实现三面环绕效果
这篇文章主要为大家详细介绍了织梦模板小教程:内容页广告实现三面环绕效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

我们在做织梦内容页模板的时候,有些用户实现织梦模板内容页广告三面环绕效果(广告画中画),如下图:

内容页广告实现三面环绕效果

这样的一种广告环绕效果据说能增加广告的点击率,但是很多朋友并不会做这样的效果,下面361模板就给大家分享出制作这种环绕效果的方法。

首先、HTML页面代码

<div id="content">
<div class="blank"><!--设定空白层。1px宽-->
</div>
<div class="ad">
<!--你的广告代码,我的广告位ggad 336x280矩形-->
</div>
<!--文章内容-->{dede:field name='body'/}
</div>

上面的代码361模板都做了文字解释说明,相信大家都能看懂,这里就不再解释了。

其次、页面广告环绕效果CSS样式代码

以下为引用的内容:

#content{
 width:638px;//广告区域宽度
 overflow:hidden; //与实现画中画无关的代码
 margin:10px auto;//与实现画中画无关的代码
 font-size:14px;//与实现画中画无关的代码
}
#content p{
 padding:6px 0px;//与实现画中画无关的代码
 text-indent:2em; //与实现画中画无关的代码
 line-height:1.8em;//与实现画中画无关的代码
 color:#000000;//与实现画中画无关的代码
}
#content p img{
 width: expression(this.width > 285 ? 285: true); 
 //图片最大款图不超过285px;请根据广告代码所占宽度自己修改,消除ie6 ie5.5 ie5 不能解析max-width属性的bug。
 max-width: 280px;//图片最大款图不超过285px;请根据广告代码所占宽度自己修改 。
 float:left;//图片有浮动,请根据广告代码浮动方向修改
 margin-right:5px;
}
.blank{
 float:right;
 height:92px;
 width:1px;
 clear:both;
}
.ad{
 float:right;
 margin-top:22px;
 margin-right:5px;
 clear:both;
}

这里也不再多做累述了,上面一些样式已经做了说明,需要稍微提点一下的是width: expression(this.width > 285 ? 285: true);这句,这句代码的285是可以修改的,可以根据自己的广告尺寸的宽度来做调整。

  361模板小结

上面的效果代码是技术小编的抛砖引玉的,大神勿喷,如果您有好的代码可以联系我们的在线客服,让我们一起分享给更多需要的朋友。

以上就是织梦模板小教程:内容页广告实现三面环绕效果的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 织梦模板 内容页广告 三面环绕

上一篇织梦模板列表页推荐被加粗如何修改掉

下一篇织梦二次开发小课程 给自定义表单添加验证码功能

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在