8

WordPress添加立体广告位 让你的广告更显眼

之前看到过好多网站的广告位都做过美化,然而让我最喜欢的就是文章上方的立体广告位,曾在搜索引擎上转悠了好几圈,都没找到这种广告位的代码。
幸好这个难不倒我,今天我把这个代码公布出来,以方便他人,此代码适用wordpress、dedecms等任何网站管理系统。
CSS代码如下:

 

.google {
 POSITION: relative; WIDTH: 440px; MARGIN-BOTTOM: 10px; HEIGHT: 260px; MARGIN-LEFT: 43px; _margin-bottom: 20px
}
.adsense {
 Z-INDEX: 1; BORDER-BOTTOM: #d2d2d2 5px solid; POSITION: absolute; BORDER-LEFT: #d2d2d2 5px solid; WIDTH: 300px; HEIGHT: 250px; MARGIN-LEFT: 130px; BORDER-TOP: #d2d2d2 5px solid; BORDER-RIGHT: #d2d2d2 5px solid
}
.adsense:hover {
 BORDER-BOTTOM-COLOR: #565656; BORDER-TOP-COLOR: #565656; BORDER-RIGHT-COLOR: #565656; BORDER-LEFT-COLOR: #565656
}
.shadow {
 BORDER-BOTTOM: #fff 0px solid; POSITION: absolute; BORDER-LEFT: #fff 130px solid; TEXT-INDENT: -1000em; WIDTH: 0px; HEIGHT: 0px; OVERFLOW: hidden; BORDER-TOP: #e9e9e9 130px solid; TOP: 130px; BORDER-RIGHT: #fff 0px solid; LEFT: 0px
}

页面代码如下:

<div class=google>

<div class=shadow> /*300×250*/</div>

<div class=adsense>

广告位

</div></div>

再来看下效果:

其实效果就是本文章上方的样式。

kaychen

8 Comments

Comments are closed.