当前位置: 首页 > article >正文

CSS——24.实战技能网导航栏 hove状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>技能网导航hover状态</title>
		
		<style type="text/css">
			nav{width: 1000px;height: 40px;background:#363636;margin: 100px auto;}
			nav div{width: 100px;height: 40px;line-height: 40px;float: left;color: #ffffff;text-align: center; font-size: 14px;}
			nav div:hover{
				font-size: 16px;
				color: #00aeff;
			}
			
		</style>

	</head>
	<body>
		       
		<nav>
			<div>电脑办公</div>
			<div>平面设计</div>
			<div>室内设计</div>
			<div>室外设计</div>
			<div>影视动画</div>
			<div>机械设计</div>
			<div>工业自动</div>
			<div>程序设计</div>
			<div>网页设计</div>
			<div>会计课程</div>
		</nav>
		
	</body>
</html>

nav标签用于做导航栏很方便

后代选择器nav div{ }
nav div:hover{ }利用后代选择器添加 hover状态
在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/473144.html

相关文章:

  • 爬虫学习记录
  • P10424 [蓝桥杯 2024 省 B] 好数
  • EXCEL: (二) 常用图表
  • Linux下实时监测双网卡的默认网卡并重新设置默认网卡
  • Ubuntu中使用miniconda安装R和R包devtools
  • oracle闪回恢复数据:(闪回查询,闪回表,闪回库,回收站恢复)
  • docker搭建atlassian-confluence:7.2.0
  • MySQL学习笔记(二)
  • element-ui中多个表单el-form进行显示/隐藏切换时表单部分校验失效的解决办法
  • 服务器漏洞修复解决方案
  • Chapter 4.5:Connecting attention and linear layers in a transformer block
  • 【VUE 指令学习笔记】
  • Linux/Ubuntu/银河麒麟 arm64 飞腾FT2000 下使用 arm64版本 linuxdeployqt 打包Qt程序
  • MySQL进阶突击系列(05)突击MVCC核心原理 | 左右护法ReadView视图和undoLog版本链强强联合
  • 红黑树详解
  • 极客公园创新大会探索AI未来,Soul App创始人张璐团队以技术驱动创新
  • 百济神州后端开发工程师 - 部分笔试题 - 解析
  • spark——RDD算子集合
  • 标题统计C++
  • Spring Security使用指南
  • 代码随想录 链表 test 6
  • 东京大学联合Adobe提出基于指令的图像编辑模型InstructMove,可通过观察视频中的动作来实现基于指令的图像编辑。
  • Selenium 进行网页自动化操作的一个示例,绕过一些网站的自动化检测。python编程
  • 『 Linux 』高级IO (三) - Epoll模型的封装与EpollEchoServer服务器
  • C#里对已经存在的文件进行压缩生成ZIP文件
  • FPGA车牌识别