首页 » 建站技术 » 浏览内容

CSS实现Google Adsense广告投影效果


2011-03-06 20:48:55 2,525 0 发表评论 字体: 作者:C.K.
标签: css语法WordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

以 336×280 尺寸的广告投影为例:

<div class="google">
  • <div class="lshadow"><!-- 336x280 --></div>
  • <div class="adsense"><!-- Google Adsense 代码放这里 --></div>
  • </div>
  • 这其中第2个div用于实现投影效果,第3个用于存放 Google Adsense 代码。

    将以下附加样式放入主题样式style.css中:

    .google{position:relative;width:476px;height:290px;margin-left: 22px;}
  • .adsense{width:336px;height:280px;border:5px solid #d2d2d2;margin-left:130px;position:absolute;z-index:1;}
  • .adsense:hover{border-color:#565656;}
  • .lshadow{border-color:#e9e9e9 #fff #fff;border-style:solid;border-width:130px 0 0 130px;height:0;width:0;position:absolute;left:0;top:160px;}

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5063 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14151513 位访客

    广告区 Guǎng Gào