DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS實例:Google Adsense代碼廣告投影效果
CSS實例:Google Adsense代碼廣告投影效果
編輯:CSS進階教程     

一直覺得帕蘭的 Google Adsense 廣告修飾得很漂亮。使用背景圖片可以很方便地實現這個投影效果,不過使用 CSS 就足以實現。

以創建一個 300×250 尺寸的廣告投影為例:

<div class="google">
    <div class="shadow"><!-- 300x250 --></div>
<div class="adsense"><!-- Google Adsense --></div>
</div>

這三個 div 容器中,其中第一個子容器用於投影效果,第二個用於 Google Adsense 代碼。附加樣式如下:

.google{position:relative;width:440px;height:260px;}
.adsense{width:300px;height:250px;border:5px solid #d2d2d2;margin-left:130px;position:absolute;z-index:1;}
.adsense:hover{border-color:#565656;}
.shadow{border-color:#e9e9e9 #fff #fff;border-style:solid;border-width:130px 0 0 130px;height:0;width:0;position:absolute;left:0;top:130px;}

主要利用了定位和邊框,利用邊框,可以輕松實現三角形。有兩個遺憾是:投影的漸變無法實現,廣告 hover 效果在 IE6 下無效。不過沒有用到任何圖片,目前已經在芒果上應用。少一些體積省一些流量,可以嘗試一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved