CSS导航栏

最新推荐文章于 2024-05-04 02:41:05 发布

微笑向日葵°

最新推荐文章于 2024-05-04 02:41:05 发布

阅读量1.4k

点赞数 1

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43535265/article/details/114651589

版权

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。

一、垂直导航栏

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：
代码如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	ul{
    
		list-style-type: none;/*从列表中删除项目符号 */
		padding: 0;
		margin: 0;     /*删除浏览器的默认设置 */
		background-color: #F1F1F1;
		width:25%;
	}
	li a{
    
		display: block;	
		padding: 8px 16px;
		text-decoration: none; /* 删除项目符号,导航条不需要列表项标记*/
		color: #333333;
	}
	/* 向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上： */
	.active{
    
		background-color: #4CAF50;
		color: white;
	}
	/* 鼠标悬停时改变链接颜色 */
	a:hover:not(.active){
    
		background-color: #333333;
		color: white;
	}
</style>
</head>
<body>
	<ul>
		<li><a class="active" href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Content</a></li>
		<li><a href="#">About</a></li>
	</ul>
</body>
</html&g

最低0.47元/天解锁文章

微笑向日葵°

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
CSS导航栏

易用的导航对于任何网站都很重要。通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。导航栏 = 链接列表导航栏需要标准 HTML 作为基础。在我们的实例中，将用标准的 HTML 列表构建导航栏。导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。一、垂直导航栏创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：代码如下：<!DOCTYPE html><html><he
复制链接

扫一扫