(自学收获)纯css网页小部件--导航栏

本文介绍了一种使用HTML和CSS创建简洁美观导航栏的方法。利用display:inline-block属性使列表项在同一行显示,并通过CSS3的过渡效果实现鼠标悬停时的平滑颜色变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  很简单好看的的一个导航栏

   先上代码 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来完成列表项在一行的效果,这样的结果就是顺序会颠倒2333333,而且还是以块元素形式存在,所以同一导航栏其他内容无法排在一行,display:inline-block很好的解决了这一点。

         其他小亮点的使用就是,用一个li的空元素当做用来移动的标识,把他绝对定位到第一个位置,然后通过~来设置每个li元素的悬停时候move类这个li空元素的位置。(css3的新属性真的很好用,尤其是过渡tratition属性)

         ps:本想用同样的原理,来实现当悬停时,实现从下到上的一个颜色变换。不过好像自己的思路不对,我设了四个空元素,把他们高度定为0,绝对定位到底,当悬停时高度变为60px,事实和想象还是有距离。

         前两天终于拖沓的略读了《css3专业开发指南》这本书,css3的好多属性虽然有些还没有被规范使用,但效果真的很棒。也更加模糊了css,js之间的分界,不再是各管各事,不过对设计的人来说还是方便了不少。

         学JS的同时,以后每天巩固学习一些新的css的小样式来加深学习,每天美滋滋。

        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值