Css 简明教程
CSS - Navigation Bar
Navigation bar 是图形用户界面 (GUI) 中的一个部分，可帮助用户浏览网站、应用程序或其他软件。用户可以快速轻松地导航到他们正在寻找的内容，这一点至关重要。
导航栏可以是水平的或垂直的，其中包含指向重要页面或功能的链接。
How to Design a Responsive Navbar?
以下是设计 CSS 导航栏的常见步骤：
-
HTML Structure: 在无序列表 ( * <ul>* ) 内使用锚标记 ( * <a>* )，以获取导航栏的结构。
-
去除默认样式： 使用属性 'list-style-type: none' 以去除无序列表的默认样式和标签。
-
Flex Layout: 为 ul 元素使用属性 * display: flex* ，并将 * flex-direction* 设置为行或列，具体取决于所需的水平或垂直弹性盒。
-
Responsive Design: 使用 * CSS media queries* 在水平和垂直导航栏布局之间进行切换，具体取决于用户的屏幕宽度。
-
汉堡菜单： 创建一个汉堡菜单图标，用于在较小的屏幕上切换列表的可见性。
导航栏还可以包含其他元素，例如网站或应用程序的徽标、搜索栏或社交媒体图标。可以使用 CSS 为导航栏设置样式以更改其外观。
CSS Horizontal Navbar
以下示例显示了一个水平导航栏，这是在网页顶部显示的最常见的导航栏类型，如下所示：
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>CSS Vertical Navbar
垂直导航栏也称为侧边栏菜单。通常位于屏幕的左侧或右侧。
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
display: flex;
flex-direction: row;
gap: 10px;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<div>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</div>
</body>
</html>CSS Dropdown Navbar
下拉导航栏是一个带有下拉菜单的导航栏，当用户将鼠标悬停在链接上时出现。下拉菜单是一种在狭小空间中显示相关项目列表的方法。
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
background-color: #2c3e50;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #ecf0f1;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
}
.navbar a:hover {
background-color: #34495e;
color: #ecf0f1;
}
.active-link {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
}
.dropdown .dropbtn {
border: none;
color: #ecf0f1;
padding: 14px 20px;
background-color: #2c3e50;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.dropdown .dropbtn:hover {
background-color: #4CAF50;
color: #ecf0f1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #34495e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #ecf0f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: background-color 0.3s, color 0.3s;
}
.dropdown-content a:hover {
background-color: #4CAF50;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">Tutorialspoint</a>
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Articles
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</div>
<a href="#">Courses</a>
</nav>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>CSS Fixed Navbar
固定导航栏是一个导航栏，当用户向下滚动页面时会粘贴在屏幕顶部。要固定导航栏，可以使用 * position: fixed* 属性。
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
height: 2000px;
background-color: #e6e451;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2c3e50;
}
.navbar a {
display: block;
float: left;
color: #ecf0f1;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s, color 0.3s;
}
.navbar a:hover {
background-color: #34495e;
color: #ecf0f1;
}
.active-link {
background-color: #4CAF50;
color: white;
}
.heading {
padding-top: 70px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">
Tutorialspoint
</a>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Courses</a>
</nav>
<div class="heading">
<h1> Welcome to TutorialsPoint </h1>
<h2> Tutorialspoint CSS Fixed Navbar </h2>
<h3>Scrolldown....</h3>
</div>
</body>
</html>Divider Lines for Navbar
还可以使用 * border-right* 属性在导航栏中的链接之间添加分隔线，如下所示：
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
border-right: 5px solid green;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>Fixed Vertical Navbar
以下示例演示如何使用 * position: fixed* 属性创建固定的垂直导航栏，确保导航栏停留在屏幕左侧，即使用户向下滚动页面也如此。
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 1000px;
margin-left: 35%;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
position: fixed;
width: 30%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<div>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</div>
</body>
</html>