自學做的一個自覺地簡單好看的導覽列的小樣式,用到了一些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中文網其他相關文章!