CSS导航栏

最新推荐文章于 2024-03-19 17:43:02 发布

需要学习的小白牧云

最新推荐文章于 2024-03-19 17:43:02 发布

阅读量1k

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52421704/article/details/121843702

版权

概念

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

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

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

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

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

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

1.list-style-type: none; - 删除项目符号。导航条不需要列表项标记。

2.设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

垂直导航栏

display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

li a {
  display: block;
  width: 60px;
}

垂直导航栏的应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

这样就形成了一个简单的灰色垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色。

水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项。

行内列表项

构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline。

display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

li {
  display: inline;
}

浮动列表项

创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局。

float: left; - 使用 float 使块元素滑动为彼此相邻。
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等。
padding: 8px; - 使块元素更美观。
background-color: #dddddd; - 为每个元素添加灰色背景色。

水平导航栏实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

这样就形成了一个简单的深色背景水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色。

总结

1.垂直导航栏有活动/当前导航栏，居中链接导航栏，全高固定垂直导航栏等各种样式。

2.水平导航栏有活动/当前导航链接，右对齐链接，边框分隔栏，固定的导航栏，灰色水平导航栏，粘性导航栏等各种样式。

需要学习的小白牧云

关注

9
点赞
踩
6

收藏

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

概念易用的导航对于任何网站都很重要。通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。导航栏需要标准 HTML 作为基础。在我们的实例中，将用标准的 HTML 列表构建导航栏。导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：<ul> <li><a href="default.asp">Home</a></li> <li><a
复制链接

扫一扫