bulma中带有html的Css标题页答案

【问题标题】：Css header page with html in bulmabulma中带有html的Css标题页
【发布时间】：2021-03-26 14:59:32
【问题描述】：

你好，我有一个问题。

为什么我的 css 不能在我的 html 页面上运行？

如果您在运行时看到结果，有人可以帮我提供我的代码链接：https://jsfiddle.net/02kf1msd/`。

我使用 bulma 作为样式。

我想将徽标和菜单放在同一标题行中：左侧的徽标和右侧的菜单导航。

HTML 代码：

<head>
  <meta charset="utf-8">
  <title>Oumar Pathe SOW Portfolio </title>
  <!--css-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  <link rel="stylesheet" href="src/css/main.css">
  <!--css-->
  <!--font-->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <!--font-->
</head>
<!--head-->

<!--body-->

<body>
  <!--head-->
  <div class="block">

    <head class="header">
      <a href="#" class="header-logo"> Oumar Pathé SOW Portfolio</a>
      <nav class="header-menu">
        <a href="#">Accueil</a>
        <a href="#">Apropos</a>
        <a href="#">Réalisations et Expériances</a>
        <a href="#">Contact</a>
      </nav>
    </head>

  </div>
  <!--head-->

CSS 代码：

.header header {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 70px;
  line-height: 70px;
  background-color: rgba( 0 , 0 , 0, 0);
  position:fixed;
  top: 0;
  z-index: 999;
}

.header .header-logo {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  float: left;
  margin-left: 30px;
}

.header .header-menu{
  float: right;
  margin-right: 30px;
}

.header .header-menu a {
  margin-right: 15px;
  color: #FFFFFF;
}

.header .header-menu a:hover {
  color: #3498db;
}

为什么我的访问权限不适用于此代码？

【问题讨论】：

在您的 css 文件中，您有 .header 标头，但该标头不存在。尝试仅使用 .header

标签： javascript html css bulma

【解决方案1】：

有时 Bulma 样式会覆盖您的 CSS 代码，因此您需要在某些 CSS 属性之后使用 !important。

第二次使用 navbar-end 和 navbar-start 类在左侧制作徽标，在右侧制作菜单导航， https://bulma.io/documentation/components/navbar/

【讨论】：