navbar

最新推荐文章于 2023-07-06 09:25:04 发布
最新推荐文章于 2023-07-06 09:25:04 发布
阅读量549 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_40094105/article/details/78157063 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>navbar</title>
</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>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>
</body>
</html>

预览

垂直导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:red;
}
</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>

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
请务必指定 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

<!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>

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中。

<!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.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

<body>
<ul>
<li><a class="active" 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>

让每个链接居中，并给每个列表选项添加边框。
<!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;
    border:1px solid #555;<!--ul只修改外边框-->
}
li
{
    text-align:center;
    border-bottom:1px solid #555;<!--修改的每个li上的下边框-->
}
li:last-child
{
    border-bottom:none;<!--修改的li上的最后一个元素的下边框-->
}     
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

<body>
<ul>
<li><a class="active" 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>

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 25%;
    background-color: #f1f1f1;
    position:fixed;
    height:100%;/* 全屏高度 */
    overflow:auto;/* 如果导航栏选项多，允许滚动 */


}
li
{
    text-align:center;

}
li:last-child
{
    border-bottom:none;<!--修改的li上的最后一个元素的下边框-->
}     
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

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

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
</body>
</html>

水平导航栏

想链接到具有相同的大小，你必须使用浮动的方法
内嵌列表项
横向导航栏的方法之一是指定元素， 上述代码是标准的内嵌:
li
{
display:inline;
}
display:inline; -默认情况下，

  • 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navbar</title>
<style >
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
}
li
{
    display: inline;
}
a:link,a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color: yellow;

    color: red;
}   
</style>
</head>
<body>
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#new">新闻</a></li>
    <li><a href="#connebt">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>
<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>

</body>
</html>

    浮动列表项

    在上面的例子中链接有不同的宽度。
    对于所有的链接宽度相等，浮动

  • 元素，并指定为 元素的宽度：

  • float:left - 使用浮动块元素的幻灯片彼此相邻
    display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
    width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

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

</body>
</html>

    将导航条最右边的选项设置右对齐 (float:right;)：
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float: right"><a class="active" href="#about">关于</a></li>
</ul>

</body>
</html>

    将导航条最右边的选项设置右对齐 (float:right;)：

    添加分割线
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

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

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

    固定导航条

    可以设置页面的导航条固定在头部或者底部：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position:fixed;
    top:0;
    width:100%;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

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

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

    固定在底部
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position:fixed;
    bottom:0; 
    width:100%;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

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

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

    灰色水平导航条
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    position:fixed;
    top:0; 
    width:100%;
    border: 1px solid #e7e7e7;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

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

li a:hover:not(.active) {
    background-color: #ddd;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

VUE组件封装01---Navbar
m0_52336986的博客
05-17 474
<template> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div> <div class="right"><sl
Bulma框架中的Navbar组件详解
最新发布
gitblog_00453的博客
05-30 281
Bulma框架中的Navbar组件详解 概述 Navbar（导航栏）是Bulma框架中一个功能强大且响应式的水平导航组件。作为现代Web应用的重要组成部分，Navbar提供了完善的导航功能和优雅的视觉设计，能够自动适应不同屏幕尺寸。 基本结构 Bulma的Navbar组件采用模块化设计，主要包含以下结构元素： <nav class="navbar" role="...
导航栏：navbar
weixin_45832989的博客
03-31 3965
导航栏：navbar 导航栏容器可以包含以下几个常用组成： 1、品牌LOGO（.navbar-brand ） navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下. 2、导航菜单（.navbar-nav） .navbar——设置nav元素为导航条组件； .navbar-default——指定导航条组件为默认主题； .navbar-inverse——指定导航条组件为黑色主题； .navbar-fixed-top——设置导航条组件固定在顶部； .navbar-fixe
导航条(Navbar)
adiking520110的博客
12-03 489
1、添加.navbar-fixed-top类可以让导航条固定的页面的顶部，固定的导航条会遮住页面上其它的内容，除非给body元素设置padding,导航条默认高度为50px ,因此可以给body元素设置body{padding-top:70px} 2、导航条是在应用或网站中作为导航页头的响应式基础组件。它在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变...
Navbar
weixin_34321977的博客
12-19 114
为什么80%的码农都做不了架构师？>>> ...
NavBar
03-22
在网页设计中，导航栏（NavBar）是至关重要的组成部分，它为用户提供了一种直观的方式，通过点击各个链接在网站的不同页面之间进行切换。导航栏通常位于页面顶部，呈现出清晰的结构，帮助用户快速理解网站的布局和...
markdown-navbar:React 的最佳降价导航栏
07-24
yarn add markdown-navbar # or `npm i markdown-navbar --save` 快速开始 import React from 'react' ; import ReactDOM from 'react-dom' ; // One third-part component for render markdown documentation ...
bootstrap-transparent-navbar:Bootstrap 5-tResponsive透明导航栏，固定在滚动网页顶部
05-24
本项目"bootstrap-transparent-navbar"专注于创建一个Bootstrap 5的响应式透明导航栏，该导航栏在用户滚动网页时会变为不透明，固定在页面顶部，以提供一致的用户体验。 首先，我们需要了解Bootstrap 5的基础知识。...
NavBar-:NavBar仅具有HTML和CSS
03-27
在网页设计中，导航栏（NavBar）是网页布局中至关重要的一部分，它为用户提供了一种方便的方式来浏览网站的不同页面。这个名为"NavBar-:NavBar仅具有HTML和CSS"的项目，正如其名，完全依赖于HTML和CSS这两种基础的...
Ant_design_navbar:导航栏带有响应式抽屉
04-28
我们将主要关注"Ant_design_navbar: 导航栏带有响应式抽屉"这一主题，学习如何利用JavaScript实现这一功能。 首先，让我们按照给定的描述开始项目设置： 1. **克隆仓库**： 使用Git命令克隆项目仓库到本地，这样...
SideNavBar:https
03-19
SideNavBar:https
前端Vue自定义顶部导航栏navBar 导航栏搜索框searchBar 导航栏右侧菜单按钮button
chenchuang0128的博客
07-06 4847
### 使用方法```使用方法-- icon: 右侧菜单图标 @searchClick：搜索点击 @rigIconClick：右侧菜单点击 -->```#### HTML代码实现部分```html-- icon: 右侧菜单图标 @searchClick：搜索点击 @rigIconClick：右侧菜单点击 -->-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->
bootstrap之navbar
cat_moon的博客
02-26 1136
.navbar——设置nav元素为导航条组件； .navbar-default——指定导航条组件为默认主题； .navbar-inverse——指定导航条组件为黑色主题； .navbar-fixed-top——设置导航条组件固定在顶部； .navbar-fixed-bottom——设置导航条组件固定在底部； .container-fluid——设置宽度充满父元素，即为100%； .navbar-h...
Navbar：导航栏
weixin_43706224的博客
05-24 732
导航栏(navbar) - bootStrap4常用CSS笔记
weixin_30609331的博客
05-14 1万+
导航栏：navbar 导航栏容器可以包含以下几个常用组成： 1、品牌LOGO（.navbar-brand ） 2、导航菜单（.navbar-nav） 3、导航文本（.navbar-text） 4、折叠导航按钮（.navbar-toggle） 5、表单（.form-inline） 一、导航容器一般使用nav标签来定义： <nav class="navbar">...
Bootstrap4 导航栏navbar
热门推荐
前端小99的博客
03-23 2万+
导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 &lt;ul&gt; 元素并添加 class="navbar-nav" 类。 然后在 &lt;li&gt; 元素上添加 .nav-item 类， &lt;a&gt; 元...
Navbar：导航栏的位置
weixin_43706224的博客
05-24 1189
微信小程序组件 - navbar自定义导航条（支持返回home主页）
iotjin的专栏
08-19 5399
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 小程序中默认的导航条只能设置背景色，标题等效果有限，因此需要使用自定义导航条，源码请在demo查看 jh-navba jh-navbar：基于vant的navbar二次封装，支持设置渐变背景色、网络、本地背景图，左侧文字，左侧图片，左侧、标题solt，隐藏返回按钮 默认效果 <jh-navbar title="渐变导航" /> 渐变背景色 <jh-navbar bgColor.
navbar组件
03-18
<think>好的，我现在需要处理用户关于Navbar组件的询问。首先，用户希望找到使用教程或示例代码。根据系统指令，我需要确保回答结构清晰，并且引用相关的内容。 先看看用户提供的引用内容。引用[1]是关于根据navbarSelectedIndex渲染不同Navbar页面的代码片段，可能涉及条件判断和组件切换。引用[2]提到了Vue项目中的Navbar组件，以及路由配置和图片访问方式，这可能和Vue框架下的实现有关。 用户的问题是关于Navbar组件的教程或示例，所以我需要结合这两部分引用，给出具体的实现步骤和代码示例。同时，需要确保使用正确的中文表达，并遵循LaTeX格式要求，不过这里可能数学公式不多，但要注意行内代码用反引号。 首先，我应该解释Navbar的基本概念，然后分步骤讲解如何使用，比如在Vue中的安装、创建组件、路由配置等。引用中的代码示例可能需要被提取出来，比如引用[1]中的条件渲染，可以转化为Vue的v-if或v-show指令。引用[2]提到的路由配置到/nav路径，这需要结合Vue Router来说明。 接下来，示例代码部分需要展示Navbar的结构，可能包括模板部分、脚本部分和样式部分。要确保代码语法正确，比如使用Vue的单文件组件结构。同时，要提到如何通过navbarSelectedIndex来切换内容，这部分可以引用[1]中的逻辑，用条件渲染实现。 然后，相关问题部分需要生成与Navbar组件相关的问题，可能涉及动态样式、路由集成、响应式设计等。这些问题应该帮助用户进一步深入学习。 最后，检查是否符合所有系统指令：使用正确的中文，代码格式正确，引用标识自然添加，没有使用Markdown，结构清晰。确保引用的位置正确，比如在讲解路由配置时引用[^2]，在条件渲染部分引用[^1]。 可能需要注意用户提到的“脚手架项目图片的访问方式”在引用[2]中，但当前问题主要关注Navbar，所以这部分可能不需要深入，除非涉及图片在Navbar中的使用。不过用户没有提到图片，所以可能可以忽略。 总结回答结构：先介绍Navbar组件的作用，然后分步骤讲解实现，包括安装、创建组件、路由配置、使用示例，并提供代码示例。最后生成相关问题。</think>Navbar组件是前端开发中常用的导航栏控件，可通过以下步骤实现基础功能： 1. **组件安装与引入** 在Vue项目中安装MintUI后引入Navbar： ```javascript import { Navbar, TabItem } from 'mint-ui' Vue.component(Navbar.name, Navbar) Vue.component(TabItem.name, TabItem) ``` 2. **基础模板结构** ```html <mt-navbar v-model="selected"> <mt-tab-item id="home">首页</mt-tab-item> <mt-tab-item id="news">资讯</mt-tab-item> <mt-tab-item id="contact">联系</mt-tab-item> </mt-navbar> ``` 3. **逻辑控制实现** ```javascript export default { data() { return { selected: 'home' } }, watch: { selected(newVal) { this.$router.push({ path: `/${newVal}` }) } } } ``` 4. **路由配置示例**（对应引用[2]的路由设置） ```javascript // router.js { path: '/nav', component: () => import('./views/NavbarDemo.vue') } ``` 5. **内容切换逻辑**（基于引用[1]的条件渲染） ```html <div v-if="selected === 'home'"> <h3>首页内容区域</h3> </div> <div v-else-if="selected === 'news'"> <h3>资讯列表</h3> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值