CSS实现Google Adsense广告投影效果

林继 VPS 知识 2,922 共写了141个字 (2011-03-06 20:48:55) 没有评论 打印 扫描二维码 百度已收录

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

  1. <div class="google">
  2. <div class="lshadow"><!-- 336x280 --></div>
  3. <div class="adsense"><!-- Google Adsense 代码放这里 --></div>
  4. </div>

这其中第2个div用于实现投影效果,第3个用于存放 Google Adsense 代码。

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

  1. .google{position:relative;width:476px;height:290px;margin-left: 22px;}
  2. .adsense{width:336px;height:280px;border:5px solid #d2d2d2;margin-left:130px;position:absolute;z-index:1;}
  3. .adsense:hover{border-color:#565656;}
  4. .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;}

历史上的今天

3月
6

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >