水平导航菜单制作

最新推荐文章于 2024-07-10 09:29:11 发布

ArchurSpace

最新推荐文章于 2024-07-10 09:29:11 发布

阅读量609

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/sp1336542268/article/details/44245377

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>水平导航</title>
	<style type="text/css">
	*{margin: 0; padding: 0; font-size: 14px}
	a{text-decoration: none;color: #333}
	.nav{list-style: none; height: 30px; margin-top: 20px; border-bottom: 5px solid #f60; padding-left: 50px;}
	.nav li{float: left;}
	.nav li a{display: block; width: 100px; height: 30px; line-height: 30px; background: #efefef; text-align: center;margin-left: 1px}
	.nav li a.on,.nav li a:hover{background-color: #f60;color: #fff; height:35px; line-height: 35px; margin-top: -5px;}
	</style>
</head>
<body>
	<ul class="nav">
		<li><a class="on" href="#">首　　页</a></li>
		<li><a href="#">慕课发现</a></li>
		<li><a href="#">全部课程</a></li>
		<li><a href="#">学习计划</a></li>
		<li><a href="#">顶尖分享</a></li>
	</ul>
</body>
</html>

ArchurSpace

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
水平导航菜单制作

水平导航 *{margin: 0; padding: 0; font-size: 14px} a{text-decoration: none;color: #333} .nav{list-style: none; height: 30px; margin-top: 20px; border-bottom: 5px solid #f60; padding-left: 50px;} .na
复制链接

扫一扫

专栏目录