純css做一個簡單好看的導覽列

來源:互聯網
上載者:User
自學做的一個自覺地簡單好看的導覽列的小樣式,用到了一些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線上視頻教程可以免費觀看!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.