网站前端代码示例：HTML、CSS 和 JavaScript - 简单易懂 - 常规

"当然，我可以为您提供一个简单的网站前端代码示例。以下是一个基本的 HTML、CSS 和 JavaScript 结合的网站前端代码：\n\nHTML：\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>My Website</title>\n <link rel="stylesheet" type="text/css" href="styles.css">\n</head>\n<body>\n <header>\n <h1>Welcome to My Website</h1>\n </header>\n \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 \n <main>\n <section>\n <h2>About Us</h2>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tristique felis. Sed sed enim sed nunc lobortis tempus.</p>\n </section>\n \n <section>\n <h2>Our Services</h2>\n <ul>\n <li>Web Design</li>\n <li>Graphic Design</li>\n <li>SEO</li>\n </ul>\n </section>\n </main>\n \n <footer>\n <p>© 2021 My Website. All rights reserved.</p>\n </footer>\n \n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS（styles.css）：\ncss\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n\nheader, nav, main, footer {\n padding: 20px;\n}\n\nheader {\n background-color: #f2f2f2;\n}\n\nnav ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n\nnav li {\n display: inline;\n margin-right: 10px;\n}\n\nnav a {\n text-decoration: none;\n color: #333;\n}\n\nnav a:hover {\n color: #000;\n}\n\nsection {\n margin-bottom: 20px;\n}\n\nfooter {\n background-color: #f2f2f2;\n text-align: center;\n font-size: 12px;\n}\n\nscript {\n display: none;\n}\n\n\nJavaScript（script.js）：\njavascript\n// 可以在这里添加一些 JavaScript 代码，以实现一些交互功能或其他功能。\n\n\n这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。希望对您有所帮助！\n