navbar 相关问题

<div class="flex bg-black h-12 items-center space-x-11"> <nav class=""> <span> <a class="text-white text-3xl font-bold hover:text-gray-300 hover:underline" href="#" >Corner Hair Salon</a > </span> <span> <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#" >Home</a > <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#" >About</a > <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#" >Appointments</a > </span> <span> <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#" >Sign-In</a > </span> </nav> </div> 我是 Web 开发新手，我正在使用 Tailwind 来设计我的网页 - 我想将导航栏中的元素分开，这样“角落美发沙龙”左对齐，“主页”-“约会”对齐居中，“登录”右对齐。我仍然不知道如何构建我的 HTML/CSS 来获得该结果 - 感谢任何帮助。 span.flex 元素上的 justify-between 类将均匀地间隔导航栏项目。 <script src="https://cdn.tailwindcss.com"></script> <div class="flex bg-black h-12 items-center space-x-11"> <nav class="flex"> <span class="text-white text-3xl font-bold hover:text-gray-300 hover:underline"> <a href="#">Corner Hair Salon</a> </span> <span class="flex justify-between"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Appointments</a> </span> <span class="text-white text-3xl font-bold hover:text-gray-300 hover:underline"> <a href="#">Sign-In</a> </span> </nav> </div>

html css tailwind-css navbar

回答 1 投票 0

Bootstrap 5 背景颜色主体和导航栏

我有这段html：我有这段html： <nav class="navbar navbar-expand-lg navbar-dark bg-success "> <div class="container-fluid"> <div class="d-flex justify-content-between w-100" style="white-space: nowrap;"> <div> <span class="h3 text-warning"> James Joyce </span> </div> 由于某种原因，我的带有 bg-success 的 body 标记没有显示在 html 中。不知道为什么所以就写在这里了现在 bg-success 使用了两次。在正文中，它是纯色背景色，但在导航栏中，它变成渐变色，这使得它看起来不太好（我认为）。请参阅屏幕截图。如何避免导航栏使用渐变（在本例中成功）。我尝试寻找渐变的转向，但找不到它。您可以使用相关 div 上的以下 CSS 代码删除第二个 div 的背景： style="background:none;" 如果您打算在其他地方再次执行此操作，也可以创建一个类，方法是将下一个代码放在 < style>" 和 < /style> 标签之间（通常位于页面顶部）： div.noback{ background:none; } 然后在我们放置 in line style 命令的 div 上，删除 style 命令并将其添加到类“noback”中，现在您可以将 div 类设置为 noback，它也会在该 div 上执行此操作。请记住，如果您有 CSS 文件，您需要将此代码移至 CSS 文件中，以便其在所有页面上可用。

navbar bootstrap-5 background-color

回答 1 投票 0

在React中，如何仅在特定页面上有导航栏

我有一个带有导航栏的 React 网站，希望它仅出现在主页上，也可能出现在其他页面上。我尝试过使用 Switch 并创建一个名为 NoNavbar 的 js 文件并从...

reactjs navigation navbar

回答 1 投票 0

Django 中的循环不起作用

嗨，我是 django 的新手，我在 django 中的 for 循环有问题，要制作导航栏/菜单，我在 html 中使用 for 循环，如下所示： ... 嗨，我是 django 的新手，我在 django 中的 for 循环方面遇到问题，要制作导航栏/菜单，我在 html 中使用 for 循环，如下所示： <div class="menu"> <a href="/"> <div class="menu-link klik"> <i class="bx bx-home"></i> <div class="contentMenu hidden">HOME</div> </div> </a> for key,value in menu.items %} <a href="{% url 'app_'|add:key|add:':'|add:key %}"> <div class="menu-link klik"> <i class="{{value}}"></i> <div class="contentMenu hidden">{{key|upper}}</div> </div> </a> endfor %} </div> 和观点： from django.shortcuts import render from .forms import ProjectForm def index(request): projectForm = ProjectForm() context = { 'title': 'Achmad Irfan Afandi', 'tile': 'Home', 'subtitle': 'Data Analyst', 'social_media': {'linkedin':'https://www.linkedin.com/in/achmad-irfan-afandi-9661131a6/', 'github':'https://www.github.com/achmadirfana', 'facebook':'https://www.facebook.com/achmad.irfan.754', 'twitter':'https://www.facebook.com/achmad.irfan.754', 'instagram':'https://www.facebook.com/achmad.irfan.754'}, 'menu': {'about': 'bi bi-file-earmark-person', 'education': 'bx bxs-graduation', 'skill': 'bx bx-wrench', 'projects': 'bx bx-building', 'services': 'bx bx-support', 'contact': 'bx bxs-contact'}, 'projectForm': projectForm } return render(request, 'index.html', context) 上面的代码在主应用程序项目中运行，所有菜单都正确显示，如上图所示：但是在另一个应用程序中（顺便说一句，我对所有应用程序使用扩展标签），不显示 for 循环，它只显示不包含在 for 循环中的“HOME”菜单，如下图所示：你知道为什么吗？或者我必须一一写菜单而不使用for循环？当我一一写菜单的代码时，它都显示出来了，但我想使用for循环来使我的代码更简单我确实看到 for 循环中缺少括号和百分比...否则将需要所有 html 文档来继承（扩展）模板。所以首先显示的是定义模板标签，然后每个其他页面都需要继承模板。 <!DOCTYPE html> <html lang="en"> <head> {% block title %} <title>Local Library</title> {% endblock %} </head> <body> {% block sidebar %}  </a> {% for key,value in menu.items %} <a href="{% url 'app_'|add:key|add:':'|add:key %}"> <div class="menu-link klik"> <i class="{{value}}"></i> <div class="contentMenu hidden">{{key|upper}}</div> </div> </a> {% endfor %} </div> {% endblock %} {% block content %}  {% endblock %} </body> </html> 然后在其他 html 文档中。 {% extends "above_template.html" %} {% block content %} <h1>...</h1> <p> ... </p> {% endblock %}

python django for-loop navbar social-auth-app-django

回答 1 投票 0

Reactstrap Bootstrap 导航栏在 React 应用程序中不起作用

我使用“创建反应应用程序”创建了一个反应应用程序。我现在正在尝试从 Reactstrap 添加导航栏。我从 Reactstrap （我将其添加为一个反应组件）网站复制粘贴：导入 React...

reactjs bootstrap-4 navbar create-react-app reactstrap

回答 5 投票 0

为什么浏览器中没有出现导航栏链接？

这是我在 React 中为导航栏编写的代码...我使用了 React-Bootstrap 从“反应”导入反应；从“react-bootstrap”导入{导航栏，导航，容器}；导入 {

reactjs web navbar bootstrap-5

回答 1 投票 0

NextJS 13.4 布局：水合失败，因为初始 UI 与服务器上呈现的内容不匹配

我尝试在整个应用程序中实现导航栏作为标题。因此，我在 layout.tsx 中的子组件之前调用了 Navbar 组件，它显示了这些错误。我是 NextJS 的初学者，所以我不会...