我正在为自己的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
您可能会实用地向li添加一个类,因为您必须了解活动页面,然后使用该类来设置所需的样式