导航栏链接颜色修改及Grid布局头部内容居中技术求助

Hey there! Let's work through your two CSS challenges step by step—they're straightforward once we tweak a few parts of your code.

Right now, your .navbar-nav links use the same white color across all states, so you don't see any visual change when hovering or after visiting. To fix this, just update the color values for each state to your preferred hues. I’ll use a warm gold (matching your border color #DAC896) for the hover state as an example, but feel free to swap in any color:

/* 修改后的链接状态样式 */
.navbar-nav a:link {
  color: white; /* 初始链接颜色 */
  text-decoration: none;
}
.navbar-nav a:visited {
  color: #f0f0f0; /* 已访问链接用浅白色，和初始状态区分开 */
  text-decoration: none;
}
.navbar-nav a:hover {
  color: #DAC896; /* 鼠标悬停时切换为金色 */
  background-color: #111;
}

Pro tip: If these styles don’t take effect, double-check that your selectors have enough specificity to override any default framework styles (like Bootstrap, if you’re using it). You can temporarily add !important to test, but refining your selectors is the cleaner long-term fix.

Your current Grid setup has overlapping elements (your .logo spans columns 1-3, while .navbar sits in columns 2-3) which throws off alignment. Let’s fix the Grid structure and ensure every element is properly centered:

Step 1: Fix Grid column assignments #

Instead of overlapping columns, assign each section its own dedicated column. Update your .header and element grid rules like this:

.header {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 保持三列等宽 */
  align-items: center; /* 垂直居中所有Grid项 */
  justify-items: center; /* 水平居中所有Grid项 */
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #DAC896;
  background-color: #333;
}

.logo {
  grid-column: 1 / 2; /* 仅占用第一列 */
}
.navbar {
  grid-column: 2 / 3; /* 仅占用第二列 */
}
.buttons {
  grid-column: 3 / 4; /* 仅占用第三列 */
}

Step 2: Ensure inner elements stay centered #

While text-align: center works for text, adding flexbox properties to the inner divs ensures even inline-block elements (like navbar links) stay perfectly centered:

.header > div {
  color: white;
  font-size: 4vw;
  padding: 1rem 0; /* 添加上下内边距，避免内容贴紧边框 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

完整修改后的CSS代码 #

Here’s the full updated CSS with both fixes applied:

.container { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  top: 0; 
  left: 0; 
} 
.header { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  align-items: center;
  justify-items: center;
  margin: 0; 
  padding: 0; 
  border-bottom: 3px solid #DAC896; 
  background-color: #333; 
} 
.header > div { 
  color: white; 
  font-size: 4vw; 
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
} 
.logo, .navbar, .buttons { 
  grid-row: 1; 
} 
.logo { 
  grid-column: 1 / 2; 
} 
.navbar { 
  grid-column: 2 / 3; 
} 
.buttons { 
  grid-column: 3 / 4; 
} 
.navbar { 
  background-color: #333; 
  border: none; 
} 
.navbar > li > a { 
  text-align: center; 
} 
.navbar-nav a:link { 
  color: white; 
  text-decoration: none; 
} 
.navbar-nav a:visited { 
  color: #f0f0f0; 
  text-decoration: none; 
} 
.navbar-nav a:hover { 
  color: #DAC896; 
  background-color: #111; 
}

内容的提问来源于stack exchange，提问作者tmoflash