使用 HTML、CSS 和 JavaScript 实现复杂的用户界面 (使用HTML和CSS制作网页)

css" rel="stylesheet"/>

css
/ CSS 样式 /container {display: grid;grid-template-columns: 1fr 3fr;grid-template-rows: 64px 1fr 64px;height: 100vh;
}header {grid-column: 1 / -1;background-color: 000;color: fff;
}content {grid-column: 2;padding: 32px;
}navigation {grid-column: 1;background-color: efefef;
}navigation ul {list-style-type: none;padding: 0;
}navigation li {display: inline-block;margin-right: 12px;
}navigation a {text-decoration: none;color: 000;
}footer {grid-column: 1 / -1;background-color: 000;color: fff;text-align: center;
}
javascript
/ JavaScript 脚本 /// 获取 DOM 元素
const header = document.getElementById(‘header’);
const navigation = document.getElementById(‘navigation’);
const content = document.getElementById(‘content’);
const footer = document.getElementById(‘footer’);// 添加事件监听器
header.addEventListener(‘click’, function() {// 处理单击标题的事件
});navigation.addEventListener(‘click’, function(e) {// 处理导航链接单击的事件e.preventDefault();
});content.addEventListener(‘scroll’, function() {// 处理滚动内容区域的事件
});footer.addEventListener(‘click’, function() {// 处理单击页脚的事件
});