如何突出显示导航的部分？答案

【问题标题】：How to highlight portions of the Nav?如何突出显示导航的部分？
【发布时间】：2020-06-18 20:46:31
【问题描述】：

我正在为我的 UX/UI 程序编写自己的作品集。我的导航使用以下 CSS 设置样式：

.nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-start: span;
  list-style-type: none;
  font-family: eurostile, sans-serif;
  font-size: 24px;
  justify-items: center;
  background-color: #7510f7;
  margin-right: -10px;
  margin-left: -10px;
  margin-top: -10px;
  padding: 15px;
}

.nav-item a {
  text-decoration: none;
  color: white;
  font-weight: lighter;
}

每个导航链接都包含在网格的一列中。

我试图弄清楚如何让网格的特定列更改背景颜色，以指示用户在哪个页面上。这在 CSS 中可能吗？或者我还有其他方法可以指示用户在哪个页面上？

编辑：这是导航的 HTML：

<header>
    <nav>
        <ul class="nav-links">
            <li class="nav-item"><a href="home.html">Home</a></li>
            <li class="nav-item"><a href="contextual_inquiry.html">Contextual Inquiry</a></li>
            <li class="nav-item"><a href="interaction_Design.html">Interaction Design</a> </li>
            <li class="nav-item"><a href="skills.html">Skills</a> </li>
            <li class="nav-item"><a href="about.html">About</a> </li>
        </ul>
    </nav>
</header>

编辑：我发布了网站以便人们更好地对其进行可视化：https://gnenadov.github.io/portfolio/home

【问题讨论】：

你能添加一个sn-p或者至少是html
@AkhilAravind 在原始帖子中添加了导航的 HTML 作为编辑
从上面的标记中，很明显您正在使用 html，因此您将为每个 html 添加 nav 代码块。只需创建一个类active 并将其添加到具有所需样式的nav li
@AkhilAravind 如此关注活动课程是有效的，但是我遇到了一些问题。设置背景颜色只是将文本本身基本上更改为该颜色的块。所以我尝试在 .active 类中将字体粗体设置为“粗体”，但它似乎不起作用。
你可能在其他一些标记中添加了字体粗细，只需在活动类中添加!important，即font-weight:bold !important;，它应该可以工作

标签： css frontend css-grid

【解决方案1】：

您可以务实地向 li 添加一个可能是 active 的类，因为您必须知道活动页面，然后使用该类来设置您想要的任何样式

【讨论】：

那么为 .active 创建一个样式，然后将“active”类添加到正确页面上的 nav li 中？