CSS制作網頁導航:兩側背景自動延伸

http://www.inspirr.com

方法來源于土豆網的導航，在這里紀錄一下實現的思路。
主要是利用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;}

具體代碼參見：

<!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=utf-8" /> <title>兩側背景自動延伸</title> <style type="text/css"> body,ul,li,a {margin:0; padding:0; font-size:14px;} #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;} li {float:left; list-style:none; margin-right:20px;} a {color:#04a; text-decoration:none;} a:hover {color:#fff;} </style> </head> <body> <div id="a"> <div id="b"> <ul> <li><a href="http://www.webjx.com/category/internet">互聯網談</a></li> <li><a href="http://www.webjx.com/category/interaction">交互設計</a></li> <li><a href="http://www.webjx.com/category/technic">技術言論</a></li> <li><a href="http://www.webjx.com/category/internet">互聯網談</a></li> <li><a href="http://www.webjx.com/category/interaction">交互設計</a></li> <li><a href="http://www.webjx.com/category/technic">技術言論</a></li> <li><a href="http://www.webjx.com/category/internet">互聯網談</a></li> <li><a href="http://www.webjx.com/category/interaction">交互設計</a></li> <li><a href="http://www.webjx.com/category/technic">技術言論</a></li> </ul> <div id="c"></div> </div> <div id="d"></div> </div> </body> </html>

Pain past is pleasure(inspirr)

2011年9月4日星期日

CSS制作網頁導航:兩側背景自動延伸

CSS制作網頁導航:兩側背景自動延伸

没有评论:

发表评论