首页帮我写一个html页面，要求用只用js+css+div+html，实现的效果为：1.横向导航栏，导航栏有三个选项，2.body部分分成两个块，左边和右边

帮我写一个html页面，要求用只用js+css+div+html，实现的效果为：1.横向导航栏，导航栏有三个选项，2.body部分分成两个块，左边和右边

时间: 2024-11-24 16:41:00 浏览: 10

当然可以，这是一个基本的HTML结构示例，结合CSS样式和JavaScript事件处理，实现了你所描述的需求： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单导航栏和两栏布局</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } .navbar { display: flex; justify-content: space-between; padding: 20px; background-color: #333; color: white; } .navbar a { text-decoration: none; color: white; margin-right: 20px; } .main-container { display: flex; width: 100%; flex-direction: row; gap: 20px; } .left-column { flex: 2; background-color: lightblue; padding: 20px; } .right-column { flex: 1; background-color: lightgreen; padding: 20px; } </style> </head> <body> <div class="navbar"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> <div class="main-container"> <div class="left-column"> <h2>左侧内容</h2> <p>这是一些左侧的文字或信息...</p> </div> <div class="right-column"> <h2>右侧内容</h2> <p>这是右侧的内容...</p> </div> </div>  <script> // 点击导航栏按钮的简单示例 const navbarItems = document.querySelectorAll('.navbar a'); navbarItems.forEach(item => { item.addEventListener('click', () => { console.log(`你点击了${item.innerText}`); }); }); </script> </body> </html> ``` 这个HTML页面包含一个简单的横向导航栏，以及一个由左右两个等宽区块组成的主体区域。每个链接都绑定了点击事件处理器，模拟了基础的交互效果。

阅读全文