CSS 导航

CSS 导航

GUI下有一个导航栏或导航系统,可帮助访问者访问信息。它是网页上的UI元素,其中包含网站其他部分的链接。
导航栏通常以水平链接列表的形式显示在页面顶部。可以将其放置在徽标或标题的下方,但应始终将其放置在网页的主要内容之前。
使用易于使用的导航对于网站很重要。它在网站中起着重要作用,因为它允许访问者快速访问任何部分。
让我们详细讨论水平导航栏和垂直导航栏。

水平导航栏

水平导航栏是水平链接列表,通常位于页面顶部。
让我们看看如何使用创建水平导航栏。

示例

在此示例中,我们添加了
overflow:hidden 属性,以防止
li 元素进入列表之外,而
display:block 属性将链接显示为block元素,并使整个链接区域可单击。
我们还添加了
float:left 属性,该属性使用float来使块元素彼此相邻滑动。
如果要使用全角背景色,则必须将
background-color属性添加<ul>而不是
<a> 元素。
 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}
li {
  float: left;
}
li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第1张

边界分隔线

我们可以使用
border-right 属性在导航栏中的链接之间添加边框。以下示例对其进行了更清晰的说明。

示例

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}
li {
  float: left;
    border-right: 1px solid blue;
}
li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第2张

固定的导航栏

滚动页面时,固定的导航栏位于页面的底部或顶部。参见相同的示例。

示例

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  position: fixed;
  width:100%;
  top:0;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}
li {
  float: left;
    border-right: 1px solid blue;
}
li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the fixed navigation bar</h2>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第3张

粘性导航

position:sticky; 属性用于根据用户的滚动位置来定位元素。
此CSS属性允许元素在滚动到达特定点时停留。根据滚动位置,粘性元素可在
固定
相对属性
之间切换。

例子

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  position: sticky;
  width:100%;
  top:0;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}
li {
  float: left;
    border-right: 1px solid blue;
}
li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<h1> Example of sticky navigation bar</h1>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the sticky navigation bar</h2>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第4张

下拉导航栏

下面的示例说明如何在导航栏中创建下拉菜单。

示例

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: lightgray;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover , .dropdown:hover .dropbtn{
  background-color: orange;
  color: white;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 160px;
  box-shadow: 5px 8px 10px 0px black;
 }
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
background-color: gray;
color:white;
}
.dropdown:hover .dropdown-content {
  display: block;
}
h1,h2,h3{
text-align:center;
color: green;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">C</a></li>
  <li><a href="#">C++</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Web-designing</a>
    <div class="dropdown-content">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">Bootstrap</a>
    </div>
  </li>
</ul>
<h1>Welcome to the bianchenghao6.com</h1>
<h2>Example of Dropdown Menu inside a Navigation Bar</h2>
<h3>Move your cursor on the "web-designing" to see the dropdown effect.</h3>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第5张

垂直导航栏

在此示例中,我们将了解如何构建垂直导航栏。

示例

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: lightblue;
}
li a {
  display: block;
  color: blue;
  font-size:20px;
  padding: 8px 16px;
  text-decoration: none;
}
.active{
  background-color: orange;
  color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>
</body>
</html>
输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第6张

我们可以将链接对准中心并在它们之间添加边框。

示例

在此示例中,我们将
text-align:center; 属性添加到

将链接居中,将 border 属性设置为以添加边框。我们还将为所有 元素添加 border-bottom 属性。

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: lightblue;
  border: 1px solid blue;
}
li a {
  display: block;
  color: blue;
  font-size:20px;
  padding: 10px 20px;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
ul:last-child {
  border-bottom: none;
}
.active{
  background-color: orange;
  color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>
</body>
</html>

输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第7张

全高固定垂直导航栏

我们还可以使用属性
height:100%; 创建固定全高侧面导航栏和
位置:固定;

示例

 <!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: lightblue;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href = "#" class = "active">Home</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
<div style="margin-left:20%;padding-bottom:2000px;color:blue;">
<h1>Welcome to the bianchenghao6.com</h1>
<h2>Side navigation bar with height: 100%; and position: fixed;</h2>
<h3>Scroll the page, and see how the sidenav sticks to the page</h3>
</div>
</body>
</html>

输出:

CSS 导航_https://bianchenghao6.com_【CSS 教程】_第8张