經(jīng)常看到有些網(wǎng)站為了吸引用戶注意，在頁(yè)面底部放置固定橫幅廣告，用戶滾動(dòng)頁(yè)面時(shí)，橫幅廣告一直固定在頁(yè)底，并不隨頁(yè)面滾動(dòng)而滾動(dòng)，當(dāng)然一般允許用戶可以關(guān)閉廣告條，并設(shè)置一定時(shí)間內(nèi)不再顯示此廣告條。本文將介紹使用CSS+Cookie來(lái)實(shí)現(xiàn)這一效果。
源碼下載：點(diǎn)此下載
HTML
首先，我們將橫幅廣告的html代碼放到頁(yè)面最底部，因?yàn)槭亲詈蠹虞d的。也可以使用外部js動(dòng)態(tài)插入到頁(yè)面底部。整個(gè)HTML結(jié)構(gòu)由遮罩層.float_layer，內(nèi)容層.float_content組成，其中.float_bg為廣告部分，內(nèi)容可以是圖片、文字等任意形式的html元素，.float_close是關(guān)閉按鈕，用戶不喜歡廣告可以關(guān)閉展示。
CSS
我們使用CSS將廣告條固定在頁(yè)腳，以及展示半透明遮罩效果、廣告關(guān)閉按鈕等效果。我們知道position: fixed是固定元素位置，配合bottom、right等屬性可以將元素固定在頁(yè)面某個(gè)位置，并不隨頁(yè)面滾動(dòng)而滾動(dòng)。使用opacity屬性可以實(shí)現(xiàn)透明效果。我們給.float_slogan一個(gè)background屬性，將廣告圖片作為背景加入，當(dāng)然你也可以不需要這樣做，直接在上面的html中加入圖片或文字。
