记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > 投影样式的图片显示形式

投影样式的图片显示形式

Tags: | | 作者:海天无影

现在海天的BLOG还没有放AD,但不担保以后海天回放上诸如百度、GoogleAdsense等之类的广告,在说不定以后海天也会像万戈同学一样卖广告位呢(此处YY中)!既然要投放广告,而且海天的BLOG的样式是那么的简洁,那就不能随便安置这个AD了,最起码得有个好看的外观才能配得上啊。

这次就给推荐一个有投影样式的图片AD显示形式,海天感觉是蛮好看的,有立体感,呵呵。

这个投影样式的显示图片效果,是在低一度博主那找到的。原理就是利用CSS定位一张背景图片(即投影部分),再用border属性为AD描边,最后设置好鼠标划过前后的a和a:hover样式即可。

CS样式代码如下:

.ad {margin:10px 0 10px 120px; padding-left:115px; background:url("bg_ad.gif") no-repeat left bottom;}
.gg {border:5px solid #000; width:336px; height:280px;}
.gg:hover {border:5px solid #c00909;}

调用方式:

<div class="ad">
<div class="gg">
这里放您的广告代码
</div>
</div>

其中css样式代码中的背景图片“bg_ad.gif”,点击这里下载 download-下载,图片投影

具体样式可以点击运行查看:



提示:可以先修改部分代码再运行 注意:如需评论后运行请重新刷新页面

当然里面的图片你们可以自己换成喜欢的,本来海天准备把BLOG里所有图片都加这个投影样式的,想想算了,加了的话,如果图片宽的话,那个投影还不知道显示到哪了。

再额外赠送一个海天刚看到的《叶问2》的超长预告片,嘿嘿发现现在甄子丹演电影是越来越好了!赞~

日志信息 »

该日志于2010-04-24 10:43由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

13条评论▼点击进行评论

  1. 叶问2都要出来了?够快的。
    海天赶紧放上AD吧,虽然不能给你做广告主,但做点击赞助人还是可以的,哈哈。

    • 叶问2是暑假期间出来
      哈哈,好的等过段时间就加广告,现在主要还没想好加哪~

  2. 挺好,点击率应该很高

    • 广告吗?还是说的叶问2啊 呵呵

  3. 看来这代码是未雨绸缪 为以后的广告准备的

    • 哈哈 看到好代码就收藏起来
      以后用啊 呵呵~

  4. 囧,我点了运行代码,怎么没有出什么效果呢,还是和普通的一样啊?什么情况。我用的Opera。

    • 你的是显示空白的?还是图片没显示出来?
      难道这个不支持opera?

  5. 叶问2出来了没啊 好帅 想看 :lol:

    • 哈哈 我也觉得很帅
      甄子丹演电影越来越不错了~

  6. 叶文2出来了,这么快

    • 其实还没出呢,要到暑假期间
      这个是超长预告片

  7. 这个效果放在侧边栏好像有点太宽了,放在问内到可以考虑考虑。

    • 恩 是的 放文章内的
      应该不错吧,呵呵~

  8. 这短片看着是比较过瘾,不知道什么时候能出DVD。

    • 哈哈 是啊 发现现在甄子丹演电影越来越不错的了
      按上映时间 应该是7月份左右才能出DVD

  9. 祝博主早日挂上广告啊~
    呵呵

    • 哈哈 谢谢
      希望广大博主都能收入多多啊~

  10. 我第一次见这个样式是在波兰映射那看到的

  11. 我的真好网都懒得挂广告了,哎,百度给的钱太少了。

    • 呵呵 我现在百度就挂这一个玩玩 2个多月 大概40块钱了~

  12. 这个暂时用不到。 还不打算放AD。。 嘿嘿。

    • 嘿嘿 有点流量的话 还是能加上的

      • 呵呵。 暂时收藏起来

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« 想过关不只是打败BOSS这么简单,这就是人生 再看《阿凡达》 »