如何突出显示Nav的部分?

问题描述 投票:0回答:1

我正在为自己的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

css frontend css-grid
1个回答
1
投票

您可能会实用地向li添加一个类,因为您必须了解活动页面,然后使用该类来设置所需的样式

© www.soinside.com 2019 - 2024. All rights reserved.