纯css做一个简单好看的导航栏

 自学做的一个自觉地简单好看的导航栏的小样式，用到了一些css3属性。 很简单好看的一个导航栏，喜欢的朋友可以看一下。

   先上代码 html的：

登录后复制

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的同学请关注【创想鸟】CSS视频教程，众多css在线视频教程可以免费观看！     

以上就是纯css做一个简单好看的导航栏的详细内容，更多请关注【创想鸟】其它相关文章！