首页html+css+js 期末作业页面设计

html+css+js 期末作业页面设计

时间: 2023-12-28 11:05:31 浏览: 119

以下是一个简单的HTML+CSS+JavaScript期末作业页面设计的示例： HTML文件： ```html <!DOCTYPE html> <html> <head> <title>期末作业页面设计</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>期末作业页面设计</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h2>欢迎来到我们的网站</h2> <p>这是一个示例网站，用于期末作业页面设计。</p> </section> <footer> <p>版权所有 © 2021</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS文件（style.css）： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, nav, section, footer { padding: 20px; } header { background-color: #333; color: #fff; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: #333; text-decoration: none; } section { background-color: #f2f2f2; } footer { background-color: #333; color: #fff; text-align: center; } ``` JavaScript文件（script.js）： ```javascript // 在控制台输出欢迎信息 console.log("欢迎来到我们的网站"); // 在页面加载完成后执行的函数 window.onload = function() { // 添加点击事件监听器 var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { links[i].addEventListener("click", function() { alert("你点击了一个链接"); }); } }; ``` 这个示例包含了一个简单的网页布局，包括页眉、导航栏、内容区域和页脚。通过CSS文件对页面进行样式设置，通过JavaScript文件添加了一个点击事件监听器。

阅读全文