Rumah >hujung hadapan web >tutorial css >纯css做一个简单好看的导航栏
自学做的一个自觉地简单好看的导航栏的小样式,用到了一些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在线视频教程可以免费观看!
Atas ialah kandungan terperinci 纯css做一个简单好看的导航栏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!