下篇

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

发表于485 天前 ⁄ WordPress ⁄ 评论数 8 ⁄ 被围观 3,411 次+

/* 300x250 */

之前看到过好多网站的广告位都做过美化，然而让我最喜欢的就是文章上方的立体广告位，曾在搜索引擎上转悠了好几圈，都没找到这种广告位的代码。
幸好这个难不倒我，今天我把这个代码公布出来，以方便他人，此代码适用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

该日志由 kaychen 于2011年01月20日发表在WordPress分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: WordPress添加立体广告位 让你的广告更显眼 | I'm KayChen +复制链接
关键字: wordpress

您可能还会对这些文章感兴趣！

1. wordpress数据库结构揭密
2. wordpress使用.htaccessr轻松设置防盗链
3. WordPress主题教程电子书PDF版下载
4. 非常实用的8个WordPress数据库技巧
5. WordPress在Windows主机上实现静态化

目前有 8 条留言 其中：访客:8 条, 博主:0 条

1. 

   老胳膊 : 2011年01月21日15:09:57  -49楼 @回复 回复

   到新朋友这窜个门，呵呵
   • 

     kaychen : 2011年01月26日16:36:31 @回复 回复

     要常来啊。我也常去你那坐坐。
2. 

   优趣 : 2011年01月21日16:08:55  -48楼 @回复 回复

   哈哈、这个效果好、貌似很多博客都是用的这个、
   • 

     kaychen : 2011年01月26日16:35:41 @回复 回复

     嗯嗯。这个效果确实不错。
3. 

   晨光博客 : 2011年01月31日12:18:20  -47楼 @回复 回复

   很棒的效果！
4. 

   动感部落 : 2011年03月05日14:46:43  -46楼 @回复 回复

   我也用上了，感谢分享。
   • 

     kaychen : 2011年03月31日15:27:09 @回复 回复

     不客气。
5. 

   第二纪元 : 2011年04月02日18:14:28  -45楼 @回复 回复

   很棒的效果！