首页用Dreamweaver完成网页设计的代码

用Dreamweaver完成网页设计的代码

时间: 2023-10-08 08:14:33 浏览: 169

使用Dreamweaver完成网页设计的代码通常会包含HTML、CSS和JavaScript等语言的代码。以下是一个简单的例子： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>我的网页</title> <meta charset="UTF-8"> <link rel="stylesheet" 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> </ul> </nav> <main> <p>这是我的网页内容。</p> </main> <footer> <p>版权所有 © 2021 我的网页</p> </footer> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } nav li { margin: 0 10px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` JavaScript代码： ``` // 在页面加载完成后执行 window.onload = function() { // 获取导航栏中的所有链接 var links = document.querySelectorAll('nav a'); // 遍历链接并为其添加点击事件 for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', function(event) { // 阻止链接的默认行为 event.preventDefault(); // 在控制台输出链接的文本内容 console.log(this.textContent); }); } }; ``` 以上是一个简单的网页设计代码示例，供参考。

阅读全文