自學做的一個自覺地簡單好看的導覽列的小樣式，用到了一些css3屬性。 很簡單好看的一個導覽欄，喜歡的朋友可以看一下。
先上程式碼 html的：
<nav> <ul> <li>哈哈哈</li> <li>吼吼吼</li> <li>嘿嘿嘿</li> <li>嘎嘎嘎</li> <li class="move"></li> <!--<li class="fly fly1"></li> <li class="fly fly2"></li> <li class="fly fly3"></li> <li class="fly fly4"></li> --> </ul> </nav>
css的：
nav,
ul,
li {
padding: 0;
margin: 0;}
nav {
position: relative;
left: 35%;
top: 20px;
width: 30%;
height: 60px;
background-color: #66CCFF;
box-sizing: border-box;
display: inline-block;
}
ul {
width: 100%;
height: 60px;
vertical-align: middle;
}
li {
display: inline-block;
width: 20%;
text-align: center;
height: 60px;
line-height: 60px;
cursor: pointer;
color: #000000;
transition: color 0.4s ease-in-out;
}
li:hover {
color: #FFFFFF;}
.move {
display: inline-block;
border: 4px solid #FF3333;
height: 0px;
background-color: #FF3333;
position: absolute;
left: 0;
top: 56px;
transition: left 0.4s ease-in-out;}
li:nth-child(1):hover~.move {
left: 0;}
li:nth-child(2):hover~.move {
left: 20%;}
li:nth-child(3):hover~.move {
left: 40%;}
li:nth-child(4):hover~.move {
left: 60%;}開始做的時候，用float完成清單項目在一行的效果，這樣的結果就是順序會顛倒，而且還是以塊元素形式存在，所以同一導航欄其他內容無法排在一行，display：inline-block很好的解決了這一點。
其他小亮點的使用就是，用一個li的空元素當做用來移動的標識，把他絕對定位到第一個位置，然後透過~來設定每個li元素的懸停時候move類別這個li空元素的位置。 （css3的新屬性真的很好用，尤其是過渡tratition屬性）
ps：本想用同樣的原理，來實現當懸停時，實現從下到上的一個顏色變換。不過好像自己的思路不對，我設了四個空元素，把他們高度定為0，絕對定位到底，當懸停時高度變為60px，事實和想像還是有距離。
前兩天終於拖沓的略讀了《css3專業開髮指南》這本書，css3的好多屬性雖然有些還沒有被規範使用，但效果真的很棒。也更加模糊了css，js之間的分界，不再是各管各事，不過對設計的人來說還是方便了不少。
需要學習CSS的同學請關注php中文網CSS影片教學，眾多css線上影片教學可以免費觀看！
#以上是純css做一個簡單好看的導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！
