新聞-網頁設計，網頁設計公司，高雄網頁設計公司-Power By： Bay Stars Design.

軟體設計
Software Development

品牌及LOGO設計
Brand and LOGO Design

網頁設計公司必讀的文章 ( 81 ) CSS製作圓角導航的另一思路

製作圓角導航其實跟製作圓角邊框是一樣的道理，有一種很常見的方法就是使用CSS絕對定位，切四個圓角的小圖片，然後分別定位在四個角，這樣就可以實現自動伸縮。但是這樣的代碼因為嵌套的DIV過多，而顯得有些複雜，這裡提供另外一種思路，即是通過CSS背景的定位去製作。

在CSS背景屬性中有一項是background-position，即是背景圖像的定位，屬性值可用英文（top | center | bottom | left | center | right）來定位，也可使用數值來定位，使用數值需要注意的是，當只有一個數值時，這個值將用於橫坐標，縱坐標將默認是50%，如果有兩個數值時，則分別是橫坐標、縱坐標。通過background-position這個屬性可以讓背景圖像隨意定位在需要的位置。

在CSS背景屬性中還有另外一項是background-repeat，即背景圖像是否平鋪。通過這個屬性可以決定背景圖像的平鋪方式，是在縱向上平鋪，還是在橫向上平鋪，或者是不平鋪。

結合上面的兩個背景屬性，不使用絕對定位製作圓角導航的思路就出來了，即可通過兩個分別定位左右背景圖像的DIV再嵌套中間導航正文部分的UL，利用三者的長度錯位來實現。HTML結構代碼與CSS樣式代碼：

程序代碼

<!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>Nav</title>
<style type=」text/css」>
body{font-size:12px;}
#navBox {background:#f00 url(images/left.jpg) no-repeat left bottom; height:24px; padding-left:5px;}
#nav {background:#f00 url(images/right.jpg) no-repeat right bottom; padding-right:5px; height:24px;}
ul {list-style:none; line-height:24px; background:#f00 url(images/navBg.jpg) repeat-x; height:24px; margin:0; padding:0;}
li {float:left; width:60px; text-align:center;}
</style>
</head>

<body>
<div id=」navBox」>
<div id=」nav」>
<ul>
<li>導航一</li>
<li>導航二</li>
<li>導航三</li>
<li>導航四</li>
</ul>
</div>
</div>
</body>
</html>

從上面的結構代碼可以看出，在<ul />標籤外面套兩個DIV，給每個DIV設定一個背景圖像，然後分別設定背景圖像的平鋪方式為不平鋪，再設定兩個DIV的背景圖像一個靠左一個靠右，最後是<ul />也就是導航條中間部分的背景，設定它的平鋪方式為橫向平鋪。

圓角的可自動伸縮適應的導航條就做完了，這其中還有一些小地方是值得注意的：

1、外面兩個DIV的padding數值是圓角圖片的寬度；

2、在背景圖像屬性中增加與圖片顏色相近的顏色值，這樣可以在圖片丟失或未加載完成時保證易讀性；

3、如果在一開始沒有設定全局樣式*{margin:0; padding:0;}時，那麼<ul />的屬性裡就必須設定「margin:0; padding:0;」，否則在IE下，導航條的<ul />前面會出現一段空白，這在Firefox下是沒有的。

圓角導航由於可以不用考慮高度的自適應，所以相對於圓角邊框來說要容易上一些，但圓角邊框的製作依然可以根據製作圓角導航的方式來製作，分為上中下三個DIV，上下兩個DIV就跟圓角導航的一樣。

文章來自wow

返回>>