海天无影Blog

投影样式的图片显示形式

/ 1492阅 / 25评 / 0

现在海天的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”,点击这里下载[down title="图片投影"]http://www.diyidu.cn/themes/Sandbox_dyd/style/bg_ad.gif[/down]

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

[/code]

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

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

发表回复

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