低一度

顶部横幅

帕兰映像336*280AD投放样式

2010-4-2 - diyidu - 网页设计 - Views

帕兰映像336*280广告投放样式分享

好早前我就看过帕兰的这个AD投放效果了，觉得很有艺术性，感觉很好。但由于一直忙其他的东西，总是忘了去研究一下它。今天抽空终于把它给仿下来了，希望大家会喜欢。下面说一下怎么实现这个效果（演示效果请参照低一度的分类页面）。

其实原理很简单，利用CSS定位一张背景图片（即那个阴影部分），另外用border属性为AD描边，并设置鼠标经过前后的a和a:hover即可。

DIV代码如下：

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

CSS样式定义代码如下：

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

再来一个完整的案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="广告投放代码,AD样式,帕兰映像" />
<meta name="description" content="此代码内容为仿帕兰映像336*280广告投放样式，来源低一度博客。" />
<title> 仿帕兰映像336*280广告投放样式 - 低一度</title>
<style type="text/css">
<!--
/* 通用*/
.post-top-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;}
-->
</style>
</head>
<body style="text-align:center">
<div class="post-top-ad">
<div class="gg">
<script type="text/javascript"><!--
google_ad_client = "pub-1897595418711131";
/* 336x280, 创建于 09-12-28 */
google_ad_slot = "2017700622";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<p></p>
<p></p>
<p> 整理：<a href="http://www.diyidu.cn/" target="_blank">diyidu</a> 来源：<a href="#" target="_blank">帕兰映像</a> 发布：<a href="http://www.diyidu.cn" target="_blank">低一度博客</a>　</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p></p>
<p></p>
</body>
</html>

关键词 // 广告设计 广告投放 帕兰映像
出处：低一度，链接：http://www.diyidu.cn/post/palan_336ad.html

上一篇：“e搜索”聚合搜索工具上线啦 下一篇：谷歌大范围更新Pr，你升了吗？

随机推荐

to "帕兰映像336*280AD投放样式"

  • 疯子
    #2 疯子 回复该留言 2010-4-2 19:39:41
    这个东西看起来非常的占用界面！
    diyidu 于 2010-4-2 20:47:09 回复
    不至于“非常啦”，就多了一点点。
  • 周哥
    #3 周哥 回复该留言 2010-4-2 20:20:09
    感觉最好别太花俏了，没用。
    diyidu 于 2010-4-2 20:47:49 回复
    呵呵，哥呀，你就不能从设计的角度来看吗？
  • Tony
    #4 Tony 回复该留言 2010-4-2 22:00:59
    点GG走人。。
    diyidu 于 2010-4-3 13:23:42 回复
    谢谢，欢迎。
  • 疾风
    #5 疾风 回复该留言 2010-4-3 1:10:47
    那个站的设计做得不错~~
    diyidu 于 2010-4-3 13:24:35 回复
    帕兰映像是挺不错的一个站。
  • 减肥吗小妹
    #6 减肥吗小妹 回复该留言 2010-4-3 2:12:56
    不错啊，桶哥真有才。。
    diyidu 于 2010-4-3 13:25:17 回复
    哥有才不是一天两天了，一直都很有才啊。
  • 喵喵呜
    #8 喵喵呜 回复该留言 2010-4-3 13:34:00
    不懂啊，点点gg好了。。
    diyidu 于 2010-4-3 13:35:18 回复
    挺好懂的吧？呵呵，谢谢。
  • 雅丹博客
    #9 雅丹博客 回复该留言 2010-4-3 17:31:29
    呵，现在对AD没啥兴趣了，收不到钱。
    diyidu 于 2010-4-3 18:18:35 回复
    装饰页面也不错啊，不会显得那么单调。
  • 对啊博客
    #10 对啊博客 回复该留言 2010-4-3 17:55:08
    帕兰很出名啊，呵呵，应该设计方面也很牛的。
    diyidu 于 2010-4-3 18:19:07 回复
    恩，他的设计很牛B的。
  • 海天无影
    #11 海天无影 回复该留言 2010-4-4 17:42:11
    呵呵，不错，早就想要找的。。
    diyidu 于 2010-4-5 9:26:32 回复
    是吗？呵呵，看来真有人喜欢啊。
  • 猴子
    #13 猴子 回复该留言 2010-4-6 18:30:57
    很漂亮，收藏了！
    diyidu 于 2010-4-6 20:08:23 回复
    呵呵，需要的话就用吧，据说这个样式点击率蛮高的：）
  • 老七
    #14 老七 回复该留言 2010-4-9 22:43:39
    这个阴影效果不错。
    diyidu 于 2010-4-10 1:59:41 回复
    呵呵，是的，据说点击率挺高的。
  • 李超
    #15 李超 回复该留言 2010-4-10 10:05:54
    影子占了不少地方呢。
    diyidu 于 2010-4-10 13:20:19 回复
    恩，这个是比较占地儿，但点击率高啊。
  • LCD
    #16 LCD 回复该留言 2010-6-11 21:50:51
    了解并学习了，谢谢分享！
    diyidu 于 2010-6-11 23:14:06 回复
    不客气，多批评。
  • sem
    #17 sem 回复该留言 2010-7-17 15:13:52
    变了，现在已经不是了。
    diyidu 于 2010-7-17 22:07:26 回复
    你是说帕兰？
  • 痕迹
    #18 痕迹 回复该留言 2010-8-16 1:36:03
    有一个问题：如果是谷歌广告，允许这样吗？
    diyidu 于 2010-8-16 6:45:43 回复
    可以的，这个其实只是添加了背景图片（阴影），并描了边。没有修改到广告代码本身。所以并未违规。

Add comment

验证码