效果圖： 1 2 總結： 1、body部分用無序列表 2、（1）hover 滑鼠移上時的效果。 （2）疑問::before和:before的區別 簡單來說單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。 w3c關於css選擇器的規範： A pseudo-element is made ...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS製作立體導航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"> <style> body{ background: #ebebeb; } .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*製作導航圓角*/ border-radius: 8px; /*製作導航立體效果*/ box-shadow: 0 7px 0 #ba4a45; } .nav a{ display: inline-block; /* a元素的過渡屬性：1、設置所有a標簽過渡；2、過渡時間；3、速度曲線：以慢速開始的過渡效果 */ -webkit-transition: all 0.2s ease-in;/* Safari 和 Chrome */ -moz-transition: all 0.2s ease-in;/* Firefox */ -o-transition: all 0.2s ease-in;/* Opera */ -ms-transition: all 0.2s ease-in;/* IE 9 */ transition: all 0.2s ease-in; } .nav a:hover{ /* 滑鼠移上時的效果；定義2D旋轉10度 */ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); } .nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 14px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; } /*製作導航分隔線效果*/ .nav li::before, .nav li::after{ content:""; position:absolute; top:14px; height: 25px; width: 1px; } .nav li::after{ right: 0; /* 線性漸變 */ background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); } .nav li::before{ left: 0; background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); } /*刪除導航第一個導航項左邊的分隔線*/ .nav li:first-child::before{ background: none; } /*刪除導航最後一個導航右邊的分隔線*/ .nav li:last-child::after{ background: none; } .nav a, .nav a:hover{ color:#fff; text-decoration: none; } </style> </head> <body> <ul class="nav"> <li><a href="">首頁</a></li> <li><a href="">個人簡介</a></li> <li><a href="">作品集</a></li> <li><a href="">博客</a></li> <li><a href="">資源</a></li> <li><a href="">聯繫我</a></li> </ul> </body> </html>
效果圖：
1
2
總結：
1、body部分用無序列表
2、（1）hover
滑鼠移上時的效果。
（2）疑問::before和:before的區別
簡單來說單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。
w3c關於css選擇器的規範：
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.
簡單翻譯：偽元素由雙冒號和偽元素名稱組成。雙冒號是在當前規範中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存 在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。
那麼現在就可以完整的回答標題中的問題了，對於CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。
所以，如果你的網站只需要相容webkit、firefox、opera等瀏覽器，建議對於偽元素採用雙冒號的寫法，如果不得不相容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。
