navbar

最新推荐文章于 2023-07-06 09:25:04 发布
最新推荐文章于 2023-07-06 09:25:04 发布
阅读量510 收藏
点赞数
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_40094105/article/details/78157063
版权
css 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
html
4 篇文章 0 订阅
订阅专栏 
<!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 408
<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
导航栏：navbar
weixin_45832989的博客
03-31 3796
导航栏：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 430
1、添加.navbar-fixed-top类可以让导航条固定的页面的顶部，固定的导航条会遮住页面上其它的内容，除非给body元素设置padding,导航条默认高度为50px ,因此可以给body元素设置body{padding-top:70px} 2、导航条是在应用或网站中作为导航页头的响应式基础组件。它在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变...
Navbar
weixin_34321977的博客
12-19 89
为什么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 ...
NavBar-:NavBar仅具有HTML和CSS
03-27
在网页设计中，导航栏（NavBar）是网页布局中至关重要的一部分，它为用户提供了一种方便的方式来浏览网站的不同页面。这个名为"NavBar-:NavBar仅具有HTML和CSS"的项目，正如其名，完全依赖于HTML和CSS这两种基础的...
bootstrap-transparent-navbar:Bootstrap 5-tResponsive透明导航栏，固定在滚动网页顶部
05-24
本项目"bootstrap-transparent-navbar"专注于创建一个Bootstrap 5的响应式透明导航栏，该导航栏在用户滚动网页时会变为不透明，固定在页面顶部，以提供一致的用户体验。 首先，我们需要了解Bootstrap 5的基础知识。...
Ant_design_navbar:导航栏带有响应式抽屉
04-28
我们将主要关注"Ant_design_navbar: 导航栏带有响应式抽屉"这一主题，学习如何利用JavaScript实现这一功能。 首先，让我们按照给定的描述开始项目设置： 1. **克隆仓库**： 使用Git命令克隆项目仓库到本地，这样...
SideNavBar:https
03-19
SideNavBar:https
前端Vue自定义顶部导航栏navBar 导航栏搜索框searchBar 导航栏右侧菜单按钮button
chenchuang0128的博客
07-06 4457
### 使用方法```使用方法-- icon: 右侧菜单图标 @searchClick：搜索点击 @rigIconClick：右侧菜单点击 -->```#### HTML代码实现部分```html-- icon: 右侧菜单图标 @searchClick：搜索点击 @rigIconClick：右侧菜单点击 -->-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->
Bootstrap系列之导航条（Navbar）
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
Navbar：导航栏
weixin_43706224的博客
05-24 692
导航栏(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 1155
微信小程序组件 - navbar自定义导航条（支持返回home主页）
iotjin的专栏
08-19 5199
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 小程序中默认的导航条只能设置背景色，标题等效果有限，因此需要使用自定义导航条，源码请在demo查看 jh-navba jh-navbar：基于vant的navbar二次封装，支持设置渐变背景色、网络、本地背景图，左侧文字，左侧图片，左侧、标题solt，隐藏返回按钮 默认效果 <jh-navbar title="渐变导航" /> 渐变背景色 <jh-navbar bgColor.
"导航栏"组件:<nav-bar> —— 快应用组件库H-UI
H-UI官方博客
04-17 479
点击右上角按钮，从右侧划入自定义菜单 <import name="nav-bar" src="../Common/ui/h-ui/navigation/c_nav_bar"></import> <template> <div class="container-full"> <nav-bar id="navbar" ...
react navbar固定
最新发布
03-15
React中的Navbar固定是指将导航栏固定在页面的某个位置，无论用户滚动页面与否，导航栏都会保持在固定位置。在React中实现Navbar固定的方法有多种，以下是一种常见的实现方式： 1. 首先，在React组件中引入所需的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值