夜间模式切换网页：HTML、CSS 和 JavaScript 示例

当然可以！下面是一个示例代码，可实现黑夜白天两种颜色风格的网页，并通过按钮实现风格间的切换，同时还带有侧边导航栏：\n\nHTML部分：\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>Day & Night Theme</title>\n <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n <header>\n <h1>Day & Night Theme</h1>\n <button onclick="toggleTheme()">Toggle Theme</button>\n </header>\n <aside>\n <nav>\n <ul>\n <li><a href="#">Home</a></li>\n <li><a href="#">About</a></li>\n <li><a href="#">Services</a></li>\n <li><a href="#">Contact</a></li>\n </ul>\n </nav>\n </aside>\n <main>\n <h2>Welcome to our website!</h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor, lacus ac ullamcorper ultrices, felis sapien dignissim justo, nec sodales massa magna a tellus. Mauris dignissim eros eget dolor facilisis, non vehicula tortor egestas. Nam sit amet lorem porta, dignissim dui et, venenatis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas vitae libero mauris. Sed tincidunt efficitur tellus, ac luctus nunc sagittis ut. Sed vestibulum tellus id enim auctor luctus.</p>\n </main>\n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS部分（style.css）：\ncss\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n\nheader {\n background-color: #F2F2F2;\n padding: 20px;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\naside {\n background-color: #333;\n color: #FFF;\n width: 200px;\n height: 100vh;\n float: left;\n}\n\nnav ul {\n list-style-type: none;\n padding: 0;\n}\n\nnav ul li {\n padding: 10px;\n}\n\nnav ul li a {\n color: #FFF;\n text-decoration: none;\n}\n\nmain {\n padding: 20px;\n margin-left: 200px;\n}\n\n.white-theme {\n background-color: #FFF;\n color: #333;\n}\n\n.white-theme button {\n background-color: #333;\n color: #FFF;\n}\n\n.white-theme aside {\n background-color: #F2F2F2;\n color: #333;\n}\n\n.white-theme nav ul li a {\n color: #333;\n}\n\n\nJavaScript部分（script.js）：\njavascript\nfunction toggleTheme() {\n var body = document.body;\n body.classList.toggle("white-theme");\n}\n\n\n这个示例代码中，我们使用了一个按钮来切换网页的主题风格。通过点击按钮，会调用toggleTheme()函数，该函数会将网页的body元素的类名切换为"white-theme"，从而改变网页的颜色风格。\n\n在CSS中，我们设置了两种颜色风格的样式，分别为默认的黑夜风格和切换后的白天风格。在JavaScript中，toggleTheme()函数会切换网页的主题风格，即切换body元素的类名。\n\n希望这个示例能帮到您！如果有任何问题，请随时提问。