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

CSS实现Google Adsense广告投影效果


2011-03-06 20:48:55 2,268 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;}
    1. 网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4921 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13645907 位访客

      广告区 Guǎng Gào