我对Web开发还很陌生，但是我很开心。我只是在努力弄清楚如何有效地做到这一点。我正在尝试使用CSS网格制作响应式导航栏，尽管我尚未真正了解响应式功能。目前，我有2个Divs，navbar（我的导航链接）和settings（尚不确定我在做什么），其中包括选项，例如主题选项），我需要将这2个div居中，并在左右两边有一个列，当窗口被拉伸得足够远时，该列会跨越。
[如果可能，我还需要一些样式设置导航链接，即使添加了[[text-decoration：none;，我仍在努力摆脱下划线。这也是我第一次使用StackOverflow，所以请告诉我我在这里做错了什么。
HTML<head>
<title>EminaReads</title>
<link id="theme" rel="stylesheet" />
</head>
<body onload="CheckTheme()">
<div hidden id="loading-wrapper">
<header>
<nav>
<ul>
<li>
<a class="active" href="#">Homepage</a>
</li>
<li>
<a href="#">Follow</a>
</li>
<li>
<a href="#">Info</a>
</li>
</ul>
</nav>
<div class="settings">
<select id="theme-select">
<option hidden>Select Theme</option>
<option onclick="SwapTheme('./styles/Dark.css')" value="Dark">
Dark
</option>
<option onclick="SwapTheme('./styles/Light.css')" value="Light">
Light
</option>
</select>
</div>
</header>
<main>
<div class="blog">
<h2>Blog update1</h2>
<h2>Blog update2</h2>
</div>
<aside>
<p>Discord Link</p>
<p>Music Player</p>
</aside>
</main>
<footer>
<p>Testing Footer</p>
</footer>
</div>
<p id="js-alert">JAVASCRIPT</p>
</body>
</html>
CSS
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(119, 119, 119);
}
/* Navigation System */
header {
position: sticky;
top: 0px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
background-color: rgb(59, 59, 59);
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}
nav {
margin: 0;
padding: 0;
grid-area: 1 / 2 / 2 / 4;
}
nav li {
display: inline;
}
nav li a.active {
background-color: #4caf50;
}
nav li a:hover:not(.active) {
background-color: #111;
}
/* Settings */
.settings {
grid-area: 1 / 4 / 2 / 6;
}
/* Content */
main {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.blog {
grid-area: 2 / 2 / 8 / 7;
}
aside {
grid-area: 2 / 7 / 8 / 9;
}
footer {
margin-top: 1000px;
background-color: grey;
}
Javascript
function CheckTheme() {
if (localStorage.savedtheme !== null) {
document
.getElementById("theme")
.setAttribute("href", localStorage.savedtheme);
console.log("if");
} else {
document.getElementById("theme").setAttribute("href", "./styles/Dark.css");
console.log("else");
}
console.log("other");
document.getElementById("loading-wrapper").removeAttribute("hidden");
document.getElementById("js-alert").style.display = "none";
}
function SwapTheme(style) {
document.getElementById("theme").setAttribute("href", style);
localStorage.setItem("savedtheme", style);
}
参见SakuraYagami的笔
EminaReads（@SakuraYagami）在CodePen上。我需要将这2个div居中，并且在左右两边都有一列，当窗口被拉伸得足够远时，该列会跨越。
为此，您必须添加2个元素，一个在导航上方，一个在div下方，并带有“设置”类，然后使用网格区域为它们提供一些尺寸。请记住，网格只能与显示：声明网格的元素的直接子代一起使用。
就删除下划线而言，CSS是正确的，只需确保使用以下方法选择正确的元素即可：
nav ul li {
text-decoration: none;
}
希望这会有所帮助！