CSS製做圓角導航的另外一思路
製做圓角導航其實跟製做圓角邊框是同樣的道理，有一種很常見的方法就是使用CSS絕對定位，切四個圓角的小圖片，而後分別定位在四個角，這樣就能夠實現自動伸縮。可是這樣的代碼由於嵌套的DIV過多，而顯得有些複雜，這裏提供另一種思路，便是經過CSS背景的定位去製做。css
在CSS背景屬性中有一項是background-position，便是背景圖像的定位，屬性值可用英文（top | center | bottom | left | center | right）來定位，也可以使用數值來定位，使用數值須要注意的是，當只有一個數值時，這個值將用於橫座標，縱座標將默認是50%，若是有兩個數值時，則分別是橫座標、縱座標。經過background-position這個屬性可讓背景圖像隨意定位在須要的位置。html
在CSS背景屬性中還有另一項是background-repeat，即背景圖像是否平鋪。經過這個屬性能夠決定背景圖像的平鋪方式，是在縱向上平鋪，仍是在橫向上平鋪，或者是不平鋪。ui
結合上面的兩個背景屬性，不使用絕對定位製做圓角導航的思路就出來了，便可經過兩個分別定位左右背景圖像的DIV再嵌套中間導航正文部分的UL，利用三者的長度錯位來實現。HTML結構代碼與CSS樣式代碼：url
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]」>
<html xmlns=」[url]http://www.w3.org/1999/xhtml[/url]」>
<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>xml
<body>
<div id=」navBox」>
<div id=」nav」>
<ul>
<li>導航一</li>
<li>導航二</li>
<li>導航三</li>
<li>導航四</li>
</ul>
</div>
</div>
</body>
</html>htm
從上面的結構代碼能夠看出，在<ul />標籤外面套兩個DIV，給每一個DIV設定一個背景圖像，而後分別設定背景圖像的平鋪方式爲不平鋪，再設定兩個DIV的背景圖像一個靠左一個靠右，最後是<ul />也就是導航條中間部分的背景，設定它的平鋪方式爲橫向平鋪。圖片
圓角的可自動伸縮適應的導航條就作完了，這其中還有一些小地方是值得注意的：utf-8
一、外面兩個DIV的padding數值是圓角圖片的寬度；it
二、在背景圖像屬性中增長與圖片顏色相近的顏色值，這樣能夠在圖片丟失或未加載完成時保證易讀性；io
三、若是在一開始沒有設定全局樣式*{margin:0; padding:0;}時，那麼<ul />的屬性裏就必須設定「margin:0; padding:0;」，不然在IE下，導航條的<ul />前面會出現一段空白，這在Firefox下是沒有的。
圓角導航因爲能夠不用考慮高度的自適應，因此相對於圓角邊框來講要容易上一些，但圓角邊框的製做依然能夠根據製做圓角導航的方式來製做，分爲上中下三個DIV，上下兩個DIV就跟圓角導航的同樣。
- 1. 導航條的製做(css)
- 2. UILabel切圓角,另外一半不切圓角
- 3. CSS導航欄製做
- 4. CSS製做導航欄
- 5. 徑向漸變製做圓外角
- 6. 另外一種blast2go的思路
- 7. 純css html5 圓角導航菜單，鼠標經過導航變色
- 8. CSS製作圓角效果
- 9. CSS中，製做導航條實例，外加「new」小提示
- 10. 製做導航
- 更多相關文章...
- • ionic 導航 - ionic 教程
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • 漫談MySQL的鎖機制
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 導航條的製做(css)
- 2. UILabel切圓角,另外一半不切圓角
- 3. CSS導航欄製做
- 4. CSS製做導航欄
- 5. 徑向漸變製做圓外角
- 6. 另外一種blast2go的思路
- 7. 純css html5 圓角導航菜單，鼠標經過導航變色
- 8. CSS製作圓角效果
- 9. CSS中，製做導航條實例，外加「new」小提示
- 10. 製做導航