HTML5--制作导航栏

最新推荐文章于 2022-01-30 09:58:20 发布

飞鸿影梦

最新推荐文章于 2022-01-30 09:58:20 发布

阅读量1.9k

点赞数 5

本文链接：https://blog.csdn.net/weixin_43379235/article/details/107280605

版权

案例展示

点击会发生颜色的变化，如下图所示：
代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作导航条</title>
<style>
	/*w800,h40,bac*/
	nav{width: 800px;height: 40px;background-color:blue;}
	/*去边*/
	bav ul{margin: 0;padding: 0}
	nav ul li{display: inline-block;list-style: none}
	nav ul li a{color:aliceblue;text-decoration: none;padding: 10px;font: 1.2em/40px microsoft yahei}
	nav ul li a:hover{background-color: #D1F1FF;color: blue}
	
</style>
</head>

<body>
<nav>
	<ul>
		
		<li><a href="#" >学院首页</a></li>
		<li><a href="#" >学院首页</a></li>
		<li><a href="#" >学院首页</a></li>
		<li><a href="#" >学院首页</a></li>
		<li><a href="#" >学院首页</a></li>
		<li><a href="#" >学院首页</a></li>
	</ul>
</nav>

</body>
</html>

飞鸿影梦

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML5--制作导航栏

案例展示点击会发生颜色的变化，如下图所示：代码<!doctype html><html><head><meta charset="utf-8"><title>制作导航条</title><style> /*w800,h40,bac*/ nav{width: 800px;height: 40px;background-color:blue;} /*去边*/ bav ul{margin: 0..
复制链接

扫一扫