DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS制作網頁導航:兩側背景自動延伸
CSS制作網頁導航:兩側背景自動延伸
編輯:CSS進階教程     

方法來源於土豆網的導航,在這裡紀錄一下實現的思路。

主要是利用 position 屬性的 absolute relative 配合 z-index 來實現的,通過position:absolute將需要平鋪的背景層疊在另一背景上,這樣即可以實現同一位置的兩個背景,再使用z-index將內容提升到最高階顯示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互聯網談</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互設計</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技術言論</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

首先將其中一個背景樣式寫在<div id=”a”>上,然後是將另一個背景樣式寫在<div id=”d”>上,<div id=”b”>為內容層,<div id=”c”>是另一個背景樣式層,可以自由的出現在<div id=”b”>裡面的任何一個位置。如土豆網中間的那個有弧線的背景。

然後是樣式方面:

#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}

具體代碼參見:


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

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