650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P4C07-0.jpg" title="sina.jpg" width="300" height="123" border="0" hspace="0" vspace="0" style="width:300px;height:123px;float:left;" /> 在新浪部落格欄目看到其導航條簡潔大方又不失動感美觀，甚是欣賞，開啟源檔案又有新發現:大公司就是不一樣，從不人云亦云，其導航條結構並沒有採用教科書或網頁教程眾口一詞的ul-li-a結構，而是採用“毫無技術含量”的文本平鋪結構，代碼精簡直觀，與新浪網頁風格一樣遵循著簡單即美的理念，體現出開發人員對css深刻的理解和把握。
但是新浪部落格導航條的特效部分是用js指令碼實現的。下面我們嘗試用純html+css來實現它。
第一步，依據新浪的思路我們做一個基本導航條。
代碼：
<style type="text/css">
a:link,a:visited{
float:left; /* 設定浮動使a成為塊元素可設定高寬 */
width:4em; /* 功能表項目寬度：4個預設字型寬<meta charset="gb2312"> */
text-decoration:none;
color:white;
background-color:#e04e00;
padding:0.5em 0.6em; /* 用內邊距調節塊高度及垂直對齊 */
border-right:1px solid ; /* 右邊框做間隔線 */
border-color:#f0700e; /* 間隔線顏色 */
}
a:hover{
background-color:#f0700e;/*同功能表項目間隔線顏色 */
}
</style>
<body>
<div>
<a href="#">娛樂</a>
<a href="#">體育賽事</a>
<a href="#">文史</a>
<a href="#">尚品堂</a>
</div>
</body>
執行結果：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P42956-1.jpg" title="menu.jpg" width="357" height="54" border="0" hspace="0" vspace="0" style="width:357px;height:54px;" />
上述代碼簡潔直觀且只涉及a元素屬性控制，也無須特別技巧，甚至連div元素都可有可無。效果媲美採用ul-li-a複雜結構設計的導航條。既然li元素擁有的屬性a元素同樣擁有，再用li元素來承載a元素來構造菜單，就有多餘之嫌。
以上述代碼為基礎，以下我們嘗試用純html+css來實現剩餘的特效。
第二步，添加滑鼠移至上方時功能表項目增高特效
在上面代碼a:hover選取器中插入下面代碼藍色部分），作用是滑鼠移至上方時功能表項目高度增加一點0.4em），但是高度增加的部分會向下延展，需要將其重新置放。這裡採用了相對定位，這樣比絕對位置要簡單一些，不用考慮與其他元素的互相影響，只要相對於自身原始位置作出上移即可。
a:hover{
background-color:#f0700e;
padding:0.7em 0.6em; /* 增加功能表項目高度增加了0.4em */
position: relative; /* 增加的塊高度會向下延展，需要將塊位置提升 */
top:-0.4em; /* 上移0.4em */
}
執行結果：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P4JX-2.jpg" title="menu2.jpg" width="357" height="54" border="0" hspace="0" vspace="0" style="width:357px;height:54px;" />
比較接近了，功能表項目右上方還差一個小三角“◣”
重溫一下css關於相對定位的描述：元素框相對於自身原始位置位移某個距離。元素仍然保持其未定位前的類型，它原本所佔的空間仍保留。
幸好對功能表項目做了相對定位後“它原本所佔的空間仍保留”，不然該功能表項目原空間會被後面的功能表項目填補，我們的導航條也就面目全非啦。
第三步：添加滑鼠移至上方時功能表項目右上方外加小三角“◣”
注意觀察新浪部落格導航條，這個小三角在功能表項目方框之外，無法用背景圖方法實現。實現這個特效的思路是：在功能表項目中添加一個當滑鼠移至上方時可以進行重新置放的小三角，通過重新置放將小三角移出功能表項目方框。遵循這一思路，我們繼續特效設計。
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P43064-3.gif" title="block.gif" />
1、用css製作小三角
原理：css可以獨立控制塊元素的4個邊框，如果塊元素的邊框寬度相對於內容域足夠大，邊框的外在屬性就會就會充分表現。
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P46418-4.png" title="xsj.png" />
我們需要的小三角可以這樣得到：內容區的高寬為縮小到0，4個邊框寬度為小三角邊長的一半，左下邊框顏色為深紅，上右邊框顏色為透明，這樣一個矩形看起來“像”小三角。絕大多數元素都可以用於製作小三角，以下用div元素製作小三角。
2、小三角div包含於功能表項目中，使小三角能夠與功能表項目聯動。
將小三角div插入到連結中見藍色代碼），a元素必須包含div，作用有二：滑鼠在功能表項目懸停時能連帶觸發小三角div的選取器；a元素作為小三角div的定位基準。
<div>
<a href="#">娛樂<div></div></a>
<a href="#">體育賽事<div></div></a>
<a href="#">文史<div>/div></a>
<a href="#">尚品堂<div></div></a>
</div>
3、當滑鼠移至上方時對小三角div重定位。
以目前使用的css版本，滑鼠在功能表項目懸停時只能觸發a:hover選取器，但a:hover選取器只能控制a元素屬性，而不能控制小三角div的屬性，如果滑鼠在功能表項目懸停時還可以觸發另外一個控制小三角的選取器，那麼解決問題的大門便敞開了。
有沒有與a:hover選取器同時被觸發選取器？有！這就是a:hover的後代選取器，如a:hover div前提是在html中a包含了div）。現在用它產生並定位小三角，其css程式碼片段是：
a:hover div{
/****** 開始產生小三角*****/
width:0px; /*內容區高度寬度為0**/
height:0px;
border-style: solid;
border-width: 0.2em; /*每邊框寬度0.2em，則矩形邊長0.4em，正好是滑鼠移至上方時功能表項目增加的高度*/
border-color:transparent transparent #d00 #d00; /*上右邊框透明，左下邊框為深紅色，形成小三角*/
/****** 開始定位，小三角以滑鼠移至上方時的功能表項目為基準絕對位置 *****/
position:absolute;
top:0; right:-0.4em; /* 小三角關於功能表項目方框右上方定位 */
}
這裡的小三角用了絕對位置，這樣無論功能表項目大小位置如何變化，小三角始終定位在功能表項目a的右上方，適應性廣。
另外不要忘了，功能表項目a已被定位滑鼠移至上方時上移了0.4em）並且小三角被包含在功能表項目a中，所以小三角可以以功能表項目a作絕對位置。這一點非常重要，重溫一下css關於絕對位置的描述：元素框相對於相對於包含它的最近的已定位祖先元素位移某個距離。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
好了，運行一下
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111P43227-5.jpg" title="menu3.jpg" />
成功了。沒有圖片，沒有JS，沒有特別技巧。我們用純html+css，充分運用控制html元素屬性，用最少的元素，最簡潔的代碼實現了新浪特色的導航條。
本文出自 “劉工物語” 部落格，請務必保留此出處http://liuzhenyao.blog.51cto.com/7642920/1292005
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
